Latest version Facebook comment box for Blogger (v2.3)

Latest version Facebook comment box for Blogger (v2.3)

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'/>
</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’/>

Customization

  • 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'>
//<![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>
 
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'>   
<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. 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.


Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

11 comments:

  1. Very helpful article for me. Thanks for sharing. Waiting for another one.

    ReplyDelete
    Replies
    1. you'r most welcome bro. Keep visiting our site

      Delete
  2. ভাই আরটিকেলটি পড়ে খুব উপকার হল। ধন্যবাদ

    ReplyDelete
  3. Very nice article. Like it. I have a question. I want to show only fb comment box and hide the default blogger comment option in my blog. How could I do this? Please help me.

    ReplyDelete
    Replies
    1. #comments:display:none!important; use this css code right after style tag.

      Delete
  4. Hello, thanks for script. Just wondering if there is a way to load facebook comments on click of a button so that webpage could load faster?
    Thanks....

    ReplyDelete
  5. Your article is fantastic. It’s very helpful for me. I have achieved a lot of knowledge from your site. Keep it up. I will visit again here.

    ReplyDelete
  6. Hi. Iv found your articles very helping and I appreciate. However, in this article I cant find the last "div class" part on the html of my blog. please help

    ReplyDelete
  7. I want FB cmt tab and Blogger cmt as TrueMag Theme. Please, Share!

    ReplyDelete