Tuesday, 11 February 2014

Add Facebook Comment System in Blogger

Facebook Comment For Blogger
Facebook is one of the widely used social website which is grossing day by day it is releasing its great plugins for web developers but one of its famous plugin is the Facebook comments many of you people use blogger and see that your blog is not getting enough comments that is because people don't specially comment on your blog but every person keeps login on Facebook every time whether whatever they are doing on pc so when they read the blog post so they comment because Facebook comments are present there so they don't need to log in they simply write there feedback so today i will tell you how to add Facebook comments in blogger and get read of old blogger comments.


  • Stylish
  • Fast Comments
  • Traffic From Facebook When Someone Comment on Blogger
  • Quickly Loads
  • Never Crashes
  • Moderator Can View and Delete Specific Comments


Facebook Comments is a nice social plugin but sometimes its not too good to use there is no Doubt That it is the No.1 Social Network But When it is down it also effects your comment system because all your meta tags and scripts are hosted on Facebook Developers Site.


  • First of All Goto Facebook Developer Site and make There a New App By Hitting The 'Create New App' Button.
  • A Dialog Box Will Appear Now Here Write The Name of Your App and Click Continue in The Category Section Just Select Other.
  • Now You Will Be Taken To The App Dashboard page Where Your App Details are displayed you have to copy these keys such as app id which we will use later in the tutorial.
  • Login To Blogger.
  • Goto Template & Click Edit HTML.
  • Search For Following Piece of Code it will be in the starting of the template.
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
  • Just Next To This Code Paste Following Code.

  • The Code Will Be Look Like This.
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

  • Now Search For <Body> Tag and just below it paste the following piece of code.

<div id="fb-root"></div><script>window.fbAsyncInit = function() {FB.init({appId : 'YOUR_APP_ID',status : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : 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> 

  • Don't Forget To Replace  YOUR_APP_ID With Your Facebook App ID
  • Now Search For </Head> and Just Above it Paste That Facebook Open Graph Meta Tag.
<meta property="fb:app_id" content="YOUR_APP_ID" />

  • Replace app_id With Your Facebook App id That You Created
  • Now Search For <b:includable id='comment-form' var='post'> if You can't find this code just paste it below <div class='post-footer-line post-footer-line-1'></div> Make sure You repeat this process because there are more line (i.e line-2,line-3) And After that paste the following HTML code.

<b:ifcond='data:blog.pageType == "item"'>    <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>                </b:if>

  • If You Want to Change The With Change The Number 550 To Desired .
  • & You are Done :)


Now You have successfully installed and add the Facebook comments in blogger if you have any problem in the coding then simply leave a comment we will be here for you all time & Don't Forget To Share The Tutorial. Good Luck!

No comments:

Post a Comment