Integrate Facebook Comments into your Blogger Blog


Update October 2012 - I have noticed a lot of traffic on this post. I stopped using facebook comments quite a while ago in favor of the Blogger dynamic view. I have tried to set it back up only to be frustrated by Blogger's seeming insistence on not allowing it to work. It seems that Blogger, being part of the Google family, wants you to use Google+ instead. Which is great and all, but it's not facebook where all your friends are.

If you get it to work, let me know and I will update this post. Thank you.
UPDATE! I got it to work! Follow directions carefully.

Step 1. Disable Default Comments


The first thing you should do is disable blogger's default comments. You don’t want to have 2 comment forms.

Log in  to your blogger account.
Navigate to:
 Settings  >> Posts and Comments >> Comments >> Comment Location 
In the drop down box choose Hide.
Click Save Settings

Step 2. Generate your Facebook App ID

Now you should generate your own facebook app id, it’s really easy and one step process,
just go to this page:  Facebook developers.

If you have not used any features in Facebook Developers before, you may have to verify your account with either a credit card or a mobile phone. You will have to re-enter your facebook password, too.



You will not be charged anything to verify, this simply confirms you are a human doing polite human things. Click the link that is appropriate and follow the directions. It may take several minutes for the verification to complete. Then come back to Facebook developers.


Click  +Create New App
You will see the following screen:


Enter your blog title for "Site Name" and enter your blog's full URL for "Site URL".

click  Continue 


On the next page Facebook will generate you a lot of info. you’ll need only one line, it’s App ID/API Key.
just copy it and keep anywhere, we’ll need it in the next steps.


Step 3. Codes To Add To Your Template
In your Blogger account again, navigate to:

  Template >> edit html >> Proceed then check Expand Widget Templates

 Find the following code (Hint: pressing CTRL+F will open the text search in your browser):

<html
Replace it with:
<html xmlns:fb='http://www.facebook.com/2008/fbml'

      Next, search for:
<body
Just above that, paste this code:

<div id="fb-root">
</div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>
 change YOUR APP ID to your app id ( you got it in the previous step ).

Now, copy the following code.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content=' MY-SITE-NAME' property='og:site_name'/>
<meta content='http://google.com/…/blogger_logo.gif' property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Paste it into Notepad or another text editor. 
Change the colored text as follows:

Change MY-SITE-NAME with the one you want to appear when a user likes a page. ("Gil likes Helping on Facebook")

Change http://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.

Change YOUR-APP-ID with your application ID number.

Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
(This is your Facebook Username. If you visit your profile (Timeline) and look at the address in your browser bar, this is the part that comes after http://www.facebook.com/.)

After making these changes, copy everything and add the code just above
</head>
It should be just above the code  you pasted in the last step. 

Step 4. Adding the Comments Box to your blogger template

Find the following code:
<b:includable id='comment-form' var='post'>

After it, please paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:450px;'></div></div>
</b:if>
To change the width of your comments box, please change 450 to what ever you want, it’s in pixels, 

 Click:

 Save Template 

Close the editor and then check your blog. If anything is out of whack, go back carefully through the steps.

Spewed forth by on