Display Facebook Comments On Your Blog

                    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 Facebook Comments on your blog,  you  need to have a Facebook 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 https://developers.facebook.com/apps
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 displayed below;

  • Make a note of your App ID or copy it
  • Where is says “App Domain” enter “blogspot.com“. (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. “http://imsubhu.blogspot.com/”

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 Blogger.com; 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′>

The screenshot below shows how it would look:

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:

<data:post.body/>

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’); js.id = id; js.async = true; js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”; 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=’data:post.id’/> </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

xmlns:fb=”https://www.facebook.com/2008/fbml”

So it would look like this instead:

<html xmlns:fb=”https://www.facebook.com/2008/fbml”

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

 

Facebook Comments
Facebooktwittergoogle_plusredditpinterestlinkedinmail

One Response to Display Facebook Comments On Your Blog

  1. I like the valuable info you provide in your articles.
    I’ll bookmark your blog and check again here frequently.
    I’m quite sure I’ll learn a lot of new stuff right here!
    Best of luck for the next!

Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to toolbar

Fatal error: Uncaught exception 'wfWAFStorageFileException' with message 'Unable to save temporary file for atomic writing.' in /home/sudipbsl/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:29 Stack trace: #0 /home/sudipbsl/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(567): wfWAFStorageFile::atomicFilePutContents('/home/sudipbsl/...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig() #2 {main} thrown in /home/sudipbsl/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 29