How to add facebook comments To Blogger

In this post we will learn how to add Facebook comments to blogger you would allow the visitor to choose method to comment very nice.
Demo
Let's start

Setup steps
before doing anything Take a backup and delete any code related facebook comments if you use it.

#1-First Make facebook app if you didnot know how Create facebook application

#2- Go To Blogger Dashboard

choose template
click Edit template

Search for:
<div class='comments' id='comments'>

You may be find more than one add the below code after it:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Leave comment with facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Leave comment with blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='580'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Now search for </head> and add the following code before that with changing App ID:

<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='App id' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}</script>

Now search for ]]></b:skin> and add before:

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: right; padding: 5px; margin-left: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-left: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Search for <html Post immediately after the following code:

xmlns:fb='http://www.facebook.com/2008/fbml'
to be like this 
<html xmlns:fb='http://www.facebook.com/2008/fbml'

Now look for your <body> immediately after the following code and change AppID:

<div id='fb-root'/>
<script>window.fbAsyncInit = function() {FB.init({xfbml: true, appId: app id here });};(function()
{var e = document.createElement('script'); e.async = true;e.src = document.location.protocol + '//connect.facebook.net/ar_AR/all.js'document.getElementById('fb-root').appendChild(e);}());</script>