Skip to main content
FANCYBLOGGERTRICKS

follow us

Add the latest Facebook comment box to blogger blog.


Install Facebook comment box for Blogger blog- Comment system plays a crucial role in a blog. Comment system enable visitors to comment on blog posts either to give feedback or report a problem. Facebook comment box makes it all very easy, by enabling people to comment on your blog using their facebook account. Also posts can be shared directly from the comment box on your blog to friends on facebook by just clicking the share button.

There are multiple comment system out there like(google+ and Disqus) , but facebook comment system stands out due to his amazing features. Many updates has taken place lately on facebook comment box therefore leaving the old versions out of the circle. In this post I will be sharing a tutorial on how to add facebook comment box v2.3 on a blogger blog. The unique feature is that visitors easily interact with the admins of the blog which makes blogging encouraging, especially when you can get hold of your blog readers.

The current version of facebook comment box (v2.3) look more elegant and beautiful than the older versions. I must say Facebook always add more features to their products to satisfy their user's. Firstly, it was like buttons and share buttons then introduces Fan box which a page can easily be liked from it. Today, we are talking about Facebook comment box. With this, users can comment, reply and even like comments which will directly notifies the user on their account.

Related Articles


Facebook comment box add more beauty to your blog, but the sad news is that facebook comments on blog are not crawled by Google Search Engine Bots which those not improve the Search Engine Optimization (SEO) of the blog. Follow me as I drop a detailed guide on how to add a Facebook comment box v2.3 to a blogger blog.

Step 1
Login to blogger dashboard >Template>Edit HTML. Search the Meta Tag below the <head> tag and locate the text highlighted ingreen below..


<meta expr:content='data:blog.url' property='og:url'/> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.pageName'> <meta expr:content='data:blog.pageName' property='og:title'/> </b:if> <meta content='website' property='og:type'/> </b:if> </b:if> </b:if> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <meta content=’YOUR_APP_ID ‘ property=’fb:app_id’/><meta content=’http://www.facebook.com/username‘ property=’fb:admins’/><meta content=’article’ property=’og:type’/>

Replace "YOUR_APP_ID" with your Facebook App ID. Create one here and write it somewhere, we will still use it.
Replace "http://www.facebook.com/username" with your facebook profile url.

Step 2;
Now let's add the comment box. Login to blogger dashboard >Template>Edit HTML> Locate <body> and paste the below code after or below the <body> tag.

Important Notice
If you already have this code on your blog don't add it again. To be sure if you have it on your blog, search for <div id='fb-root'/>. If it's your template there is no need to add it again.

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR-FB-APP-ID',
status : true, // check login status
cookie : true, // enable cookies 
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-FB-APP-ID" with your Facebook APP ID.

Step 3
Search for <div class='post-footer-line post-footer-line-1'> and paste the following code just below it.
<b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;background:white;border:1px solid silver;'><fb:comments colorscheme='light' data-version='v2.3' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/></div>
</b:if>
  <div class='clear'/>

That's it guys, we have successfully added a facebook comment box to your blog. Refresh your blog to see the magic. If you have any problem installing the comment box, please drop a comment so we can solve it together.
Happy blogging...... 

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment