How To Add Facebook Comment Box To Your Blogger/Blogspot /

Facebook added new functionality of commenting on Websites with Facebook account.



1. Log in to your blogger account and disable blogger default comment.



Settings > Comments



Choose Hide and save your setting.



This is optional though, it depends on whether you intend to have two comment forms on your blog.



2. Next is creating your facebook application. Click here to create a facebook application.

Creat New Application

Then Popup a window like below

Click Continue

Now Save Your App id in Notepad.

Then go to Website option and write your Site Domain as " Blogspot.com "

 Click on " Save "


Next

Sign in Blogger Account

Click on " Template "

Click on " Edit Html " and Proceed it.

Check Mark on " Expand Widget Templates

Press Ctrl + F and Search This



<data:post.body/>


Now past the following code below it:
(Now just press Ctrl+ F and find " Your App id " and replace it with the App ID you had saved before. After that save it.)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' src='http://lh4.googleusercontent.com/-HvqNmNXhkzY/TjATfsEVeSI/AAAAAAAAAjc/yMCvjARROZk/Screenshot.png'/></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;Your App Id&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

Save Template.................................