How to Add Facebook Comments to Blogger 2015

BlogSpot and Facebook are two most widely used free service. Blogger provides you an opportunity to publish your content and earn from it and Facebook on the other hand helps you to stay connected to your friends 24*7.
If you are a BlogSpot user then you must be outraged by its comment system, so am I. Recently I came across Facebook Comment Plugin and found it really amazing and tried to integrate it with my blog. here in this tutorial you will get detailed tutorial on Adding Facebook Comment Plugin on Blogger.

Step 1: Goto Facebook developer page and enter your blog name, URL and click on Create application. Now copy the Application ID given to you.

Step 2:Open your Blogger dashboard and go to to Layout > Edit HTML and check on Expand Widget Templates. Search for and paste the code given below just after and save the template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: 'APPID', status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol  +
  '//connect.facebook.net/en_US/all.js';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
  }());
  </script>
  <fb:comments width='WIDTH' expr:title='data:post.title' expr:href='data:post.url'

  colorscheme='dark' expr:xid='data:post.id'/>
  </b:if>

Replace APPID and WIDTH given in the code with your Application ID (Step 1) and the desired width of comment box (as per the width of your content area) and then Save the template.

Step 3: Now all you need to do is hide the ugly default blogger commenting system. So navigate to Settings > Comments and select hide and save settings.
Facebook comment system is minimal and also helps in promotion of your blog. Do try this but before proceeding please make a backup of your design.