Visit My New website ...............

Monday, July 16, 2012

Display Facebook Comments On Your Blog

Friends here is Tutorial  That Display Facebook comments on your blog and let Facebook users comment on your blog without signing up for Blogger or other services.

To integrate Face-book Comments on your blog,  you  need to have a Face-book account and a Blogger account with a blog.
               so friends here we go with step by step

1. First you need to create a Facebook App for your blog. In order to do this go through this link


2. In the top right of your screen click on the "+ Create New App" button as shown in the screen shot below:

3. Now  You will be presented with the screen below where  you need to choose: 

  •    A name for your app which can be anything you like; I have chosen "Imsubhublogspot"
  • A namespace for your app this can be anything you like as well but it must be in all lower case letters without any spaces. I have chosen "imsudipsubhu". Don't worry about what these attributes do, but just know that they are necessary for any Facebook App.
  • Do NOT tick the web hosting option. This is not necessary for our comment application.
Once you have entered all the details click "Continue"
4. You will then be asked to pass the "captcha" test ,Enter the correct letters or numbers the click "Submit".

If you have not setup your Facebook account with a mobile phone number you will see the message below. 

If you don't see the message (that means you have already setup your account with a mobile telephone you will be able to attempt Next task 5. )

5. So Friends you will see the page, from that page :

  • Make a note of your App ID or copy it
  • Where is says "App Domain" enter "". (If you host your blog on your own domain name then enter your domain name here)
  • In the "Website" section where it says "Site URL" enter the address of your blog e.g. ""
            Click "Save Changes"

6. After saving the changes to your Facebook app, you will see a confirmation message in a yellow box at the top of the webpage.

Now your Facebook App is ready. Just make a copy of the App ID as you will need this number when integrating the Facebook comment application into your blog.

7. Change the code below by replacing FACEBOOK-APP-ID with your Facebook App ID number which  you copied at step 5.
<meta content="FACEBOOK-APP-ID" property="fb:app_id" />
So my modified code looks like this: 
<meta content="203832293077633" property="fb:app_id" />
8. Go to your blog dashboard on; Select "Template" then click on "Edit HTML" as highlighted in the screenshot below:

9. You will receive a popup with a few options. Click on the "Proceed" button as shown below:

10. You will then see the code in your template. Try to locate the <head> tag.
11. Just below the <head> tag paste your modified code from step 7. Here is

how my code looked like after this change:

12. Click "Save Template"

13. Now you need to add some more code to your template (this is the actual
 code for the Facebook comment section below your blog posts). Go to you blogger dashboard for your blog then select "Template" > "Edit HTML" > "Proceed" to view your HTML code (i.e. follow steps 8 and 9)
14. Tick the "Expand Widget Templates" checkbox .

15. Find the code below in your template code using Ctrl+F shortcut and paste the code into the search box.  Warning: Do NOT try to type the text below as your web browser could freeze.
<div class='post-footer-line post-footer-line-3'>

15.a) Depending on the blogger template that you are using it is possible that the above search fails. In that case search for this tag:
<p class='post-footer-line post-footer-line-3'> 
15.b) if the search at step 15.a failed then search for the following tag:
16. Paste the code below immediately after the tag you found at step 15(or 15.a or 15.b)
<b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); = id; js.async = true; js.src = "//"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid=''/> </b:if>
So the resulting code would look like this:

17. You now need to add the Facebook Namespace declaration in your code. If you go the top of your code you will see a tag as <html as shown below:

You need to add the code below right after the <html tag
So it would look like this instead: 
<html xmlns:fb=""
Here is a screen shot of the code after the change:

Note: The namespace added in the code above is used for all Facebook widgets and apps. So you only need to add this into your code once, regardless of how many different FBML widgets you use.
18. Click "Save Template"
19. Click "Close"

20.So Friends lets enjoy Your New Facebook Comments on Your Blog.

              Hope this will help You. copyright@imsubhu