Add Facebook Comment Style for Blogger

Previously, I've posted about Add Facebook Fan Page In Blog. Now, I will post about Add Facebook Comment Style for Blogger. I think this trick also important, because maybe some of our visitors don't have a blogger account. Or maybe, they can't navigate blogger comment style. If you want to know how to add facebook comment style for blogger, just follow the steps below. See the DEMO first!

=> Hide Blogger Comment Box

1. Log in to your blogger account

2. Go to Settings --> Comments
3. Find "Comments", and choose "Hide"

4. Click SAVE SETTINGS

=> Add Facebook Comment
1. Go to Design --> Edit HTML
2. Check in the "Expand Widge Templates" box
3. Copy the code below, and paste under <data:post.body/> (If you're using "Read More", there are 2 <data:post.body/>, so choose the second)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://tipsandtricksfor.blogspot.com/2011/04/add-facebook-comment-style-for-blogger.html' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcdXmXp9IF9PYDBxWQXuSNmfWgVtbrzd0Xk5qUv4hltwQD_wREK_saShL3XywopeWCr2yj1Umz1THCCgAIhnAhMrWsq-1KLBRVDkuswVrAutjDRrnA6bGCNCTUVPB8EzKT4LkgJWTmwRM/'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;149973631711831&#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>

4. Now you can click SAVE TEMPLATE