How to Add Facebook Comment Box to Your Blog

"Simple Steps For Adding Facebook Comment Box To Your Blog"

Everyone knows that Facebook comment box is one of the useful tool for bloggers to increase conversations. To have a facebook  comment box you must have a facebook application if not then go to Facebook Developers. and create application on facebook and keep the application id along with you.  

So now I am going to teach you that how to add/integrate Facebook comment box to your blogger in some simple steps. Before getting into the process I recommend you to back up your template and previous comments in blogger wont be visible if you use Facebook commenting system.

Follow the below steps

1: Disable blog’s default comment box. 

• Login to your blog –> Dashboard->Settings->Comments – > 

• Choose Hide option then click to Save Settings button.

2: Find xmlns:fb='http://www.facebook.com/2008/fbml' line.

3: after the tag put the following code 

      <div id="fb-root">div>

      <script>

      window.fbAsyncInit = function() {

       FB.init({

      appId:'Your FaceBook APPID',

      status : true, // check login status

      cookie : true, // enable cookies

      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>

4: Before ending of the tag add following code 

       if cond='data:blog.pageType == "item"'>  

       'data:blog.pageTitle' property='og:title'/>  

       'data:blog.url' property='og:url'/>else/> 

       'data:blog.title' property='og:title'/>

       'data:blog.homepageUrl' property='og:url'/>if>

       'MY-SITE-NAME' property='og:site_name'/>

       'http://google.com/help/hc/images/logos/blogger_logo.gif'

       property='og:image'/>

       'YOUR-APP-ID' property='fb:app_id'/>

      /* This is different then application id, every facebook user 

       has their own unique id, 16: you can get it from the 

       address bar as soon as you login to facebook it will looks like 

       http://www.facebook.com/?ref=home#!/profile.php?id=numbers */ 

       'YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>

       'article' property='og:type'/>

5: Find the following Code

           <data:post.body/>

  6: Add the following Code 

       <b:if cond='data:blog.pageType == "item"'>

       <div>

       <fb:comments expr:title='data:post.title'

       expr:url='data:post.url' 

       expr:xid='data:post.id' width='450'/>

       div>

       b:if>


This video also helpful to you: