Home HTML / Javascript / Web Tools / Widget

Latest version Facebook comment box for Blogger

Latest version Facebook comment box for Blogger - The Comments plugin lets people comment on blog post on your site using their Facebook account. If people wish to they can share this activity to their friends in News Feed as well. This comment box also contains built-in moderation tools and special social relevance ranking. There have been many facebook comment box in internet but today i am share the latest version of facebook comment box. Recently facebook developer update their Facebook Comment box plugin version v2.3. The main facilities are using of facebook comment box is, visitors are easily explain their opinion about your content and admin can catch his/her visitors easily.

Also read: Add Facebook Like box with Cover Photo in Blogger

Install Facebook Comment Box for Blogger

Facebook comment box is the best comment box for blogspot blog. By using facebook comment box you can increase your blog comments by visitors. Some people who logged in on facebook, he/she can explain his/her opinion easily.

In this tutorial i will show you that, how to add new facebook comment box in blogspot. Latest version fecebook comment box is look awesome. Facebook developer update their new API from previous version to new version v2.3.

blogspot new facebook comment box

Latest version facebook comment box look more beautiful then previous version. First of all, in this tutorial we are talking about the facilities of the Facebook comment box. We all know that Facebook is the most popular social network site in the world. They always release new features to serve the people and to catch the visitors more on the Facebook. So Facebook comment box is one of the best popular feature of facebook. When some people like and reply to their comment. notification is appeared to the user. And it also provides multiple commenting features. The main disadvantage of Facebook comment box in blogger is that Google spider never crawl Facebook comment as blog comment, so these comment can not be useful in the view of optimization.

Now lets start this tutorial. Firstly go to blogger dashboard > Template > Edit HTML and find and below meta tag right after <head>

<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'/>
<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'/>
<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 the App ID which you saved on your computer earlier.
  • http://www.facebook.com/username is the link of Facebook admin url.Just replace with your facebook profile url.

To add this new facebook comment box in blogspot blogger, firstly you have to need make a facebook app id. because it will be need. For create facebook app id go the follow link: https://developers.facebook.com/apps/?action=create

How to add Facebook comment box:

Go to blogger dashboard > Template > Edit HTML and past the below code after <body> tag. If already added this, then ignore it.
 <div id='fb-root'/>
<script type='text/javascript'>
window.fbAsyncInit = function() {
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;
Note: "YOUR-FB-APP-ID" replace it with your Facebook APP ID.

Now again search <div class='post-footer-line post-footer-line-1'>  and past the following code below the above code.
 <b:if cond='data:post.isFirstPost'>   
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;;
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
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;;
<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>
<div class='clear'/>

That's it. If you found any problem then inform me in comment and if you found this post is helpful then do not forget to share this post.

Read Also:

No comments

Post a Comment

to Top