Blogger Tools

How to add Facebook comments for blogger

Now blogger officially providing google plus comment system on blogger websites. So here i am going to share method to add facebook comment box to blogger websites. I know this is already posted by many bloggers but i am writing updated method because now facebook has updated there design and policy.

Advantages of facebook comments :

Users can easily reply to their comments because they got notification on facebook and when they got notification they check back their notification and again comes to your website. when increases daily page views and impression.

Big advantage of facebook comment system is spam filtering. As you know there are many bots which comments on your blog, so by enabling facebook comment system on your blog only real users can comment on your blog using their real ID.

So lets start How to add facebook comment on blogger :

first of all goto developer.facebook.com and create new application same as your site name.
Click on "Add a new App" button. as shown below

Now select platform. (we are developing app for our website so we will choose 'website').

If you have already created some app having same name as your site then you can use your existing app. otherwise Enter new App name.
Enter name and click on "Create new facebook app ID".

Now choose any category which best fits your business or website. And click on "Create App ID" button.

Now click on "skip Quick start" button on right top.
So now copy App ID which is needed in next step.

Now login to blogger and goto template -> Edit HTML
Now inside <html> tag you will see some codes like xmlns:b='http ...' something like this, just at last add below code.

xmlns:og='http://ogp.me/ns#'

Now search for <body

<div id="fb-root"></div><script>window.fbAsyncInit = function() {
 FB.init({
 appId : 'YOUR_APP_ID',
 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('script');e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script>

Replace 'YOUR_APP_ID' with your real app id, which you have copied from facebook.
Now search for </head> and paste below code above this tag.

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

Replace YOUR_APP_ID with your actual app id.
Configuration is complete now last step to add facebook comment box body where facebook comment system will render.
Now search for below code

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

and below this code paste below code

<div class='post-footer-line post-footer-line-1'></div>

this code will occur many times so below every code put this code.
Now again search for <body tag and paste below code and done

<b:ifcond='data:blog.pageType == "item"'>
<divstyle='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:commentscolorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/>
</div></div></b:if>