How to Add Facebook Comments in Blogger

Facebook commenting system is one of the trending commenting system that we see in websites these days. With likes and automatic top comments sorting option, it is a great commenting system even for blogs. The default blogger commenting system is good enough but it could use some changes.

The commenting system is great because most of the people who are on the internet are a member of Facebook. Moreover, they are logged into Facebook most of the time. That means, the users can make a quick comment without any problem.

To add a Facebook commenting system to Blogger, follow these steps:

In Facebook:

1. The first thing to do is to create a new app (if you have not already) for your blog in Facebook.
2. Go to: https://developers.facebook.com/apps
3. On the top right, you will see a “Create App” button. Click on it.
   
4. The following app creating dialogue box will open. Fill in the details like App Name, App Name Space, App Category. Your new app will be created and you will be provided with the details like App ID and App Secret. Please note your App ID.
   

In Blogger:

1. Go to your Blogger blog, click on Templates and click on Edit HTML. Make sure to make a backup of your Blogger template XML.
2. Before the </head> tag add:

   <meta content="APP_ID" property="fb:app_id"/>

3. Find:

   <b:includable id='comment-form' var='post'>

   If you can’t find it, then find:

   <div class='post-footer-line post-footer-line-3'>

4. Below it add the following code:

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='fb-root'/>
   <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = &amp;quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;amp;appId=APP_ID&amp;quot;;
   fjs.parentNode.insertBefore(js, fjs);
   }(document, &amp;#039;script&amp;#039;, &amp;#039;facebook-jssdk&amp;#039;));</script>
   <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='650'/>
   </b:if>

5. Save your template changes and preview your posts. You will have Facebook comments alongside your regular Blogger comments. You can disable the Blogger comments from Blogger: Settings > Posts and comments: Under the Comments heading choose Comment Location to “Hide”.

Additional Notes:

1. Replace APP_ID with your App ID which is provided by Facebook for the app that you created.
2. You can change the numerical value of width of your comments to fit your template’s comment area width. Colored in blue in the code of step 4 above.
3. Some Blogger templates have a completely different layout. While this is the case for most Blogger templates, you might have to find the correct place to put the Facebook commenting code in Blogger sometimes. Experimenting is the best option at such cases.