Add Facebook Comments Box/Plugin to Blogger Blogs

By Ayman H Wednesday, May 9, 2012
Facebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Share were the most inspired one. Now they have released Facebook comment form for bloggers on which I am going to give the tutorial today. Facebook comment form helps the bloggers in getting most comments and more social media exposure. This Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, Yahoo, AOL and Hotmail. This plugin by them is really an awesome resource for bloggers, so what are you waiting for???!!. lets move on with the tutorial.
UPDATE: Bug Fixed!!

How To Add Facebook Comments form to Blogger

Creating An App in Facebook

1. Go to Facebook developers page to create a new app.
2. Create an new app with your blog details as shown below.
create a new app in facebook
3. Note down your Facebook app id which will be shown like this.
find your facebook app id

JavaScript SDK for Facebook comment box

4. Now go to your blogger dashboard > template > Edit Html (Tick expand widget template option).
5. search(Ctrl+F) for <html  and replace it with the following code.
<html xmlns:fb=http://www.facebook.com/2008/fbml

6. Find For <body> tag and add the following code just after it.
<div id=fb-root/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect
.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).
appendChild(e);
    }());
</script>
source: Facebook developers
Note:: Replace YOUR_APP_ID with your app id you just noted down.

Facebook Open graph tags

7. Now search for </head> and add these open graph meta tags just above it.
<meta expr:content=data:blog.pageTitle property=og:title/>
<meta expr:content=data:blog.url property=og:url/>
<meta content=Blogger Tricks property=og:site_name/>
<meta content=YOUR_BLOG_LOGO_IMAGE_LINK property=og:image/>
<meta content=YOUR_APP_ID property=fb:app_id/>
<meta content=http://www.facebook.com/bloggertricksdotbiz property=fb:admins/>
<meta content=article property=og:type/>
Note::
  • Replace Blogger Tricks with your blog name.
  • Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
  • Replace YOUR_APP_ID with your app id.
  • Replace http://www.facebook.com/bloggertricksdotbiz with your Facebook page url.

Facebook Comment box widget code

8. Now search for this code.
<data:post.body/>
Add the following code just below it.
<b:if cond=data:blog.pageType == &quot;item&quot;>
<div style=padding:20px 0px 5px 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=550/></div>
<div style=color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;>Facebook Comments Plugin Bloggerized by <a href=http://www.Bloggertricks.Biz target=_blank><b>BloggerTricks.Biz</b></a></div></div>
</b:if>
Note:-
  • You can change the width of widget by replacing 550 with your desired width.
  • As you all know you can change the color scheme to light or dark.
  • Go to blogger dashboard > Settings > post and comments and set comment section as HIDE.
  • If you find 3 occurrence of  <data:post.body/> then add the above script after the first occurrence of it.
9. Save your Template.

Conclusion

I have fixed some bugs in this tutorial and the Facebook comment plugin given here works perfect. If you find any difficulty in implementing this Facebook comment box plugin on your blogger blog, feel free to ask me in the comment section below and I would be pleased to help you on it.

Post Tags:

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

No Comment to " Add Facebook Comments Box/Plugin to Blogger Blogs "