20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Facebook Comment Box In Blogger Template

learn trick to create install latest new version 2.5 2016 fb comments box comments widget inside blogger template,facebook comments gadget tool plugin for blogspot theme,comments load on click to increase the page speed load fast.
How To Add latest version 2.5 create install Facebook Comment Box In Blogger Template
Hello guys,Today we are going to explain how to install facebook comment box in blogger template.With the help of fb comments box plugin people can share their views regarding the posts or article in your website or blog and they can also share them on facebook wall.It's a best way to share your comments on facebook wall posts.Facebook comments box suits all kind of blog niche.If we see the benefits of comment box is only we can share them on facebook page and also people can comment from their profile into your inbox and keep connected to your blog.But in the view of google indexing and robots crawling google don't crawl facebook comments as compare to blogger default comments box.Blogger comments are keep indexing by google search engine but facebook comments are just for the look it's never be crawled by any search engine over the internet.If someone comment on your facebook comments box admin will get notification as well all people engaged with the comments they will also get notify.In this case you will increase the view of your website which will helps your website to increase alexa rank too.
However now days lot's of template coming with three or four comments box like blogger ,disqus,facebook etc..in previous post we have already share how to install disqus comments load on click version for blogger template.later on we will share for facebook and blogger too,for that stay tuned..So to grab facebook comments box trick follow the steps mentioned below.

How to install facebook comments box in blogger template

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template (FirstTake backup) Then proceed to -> Edit HTML.
Step 3. Now Search for opening <head> tag by Pressing Ctrl+F keys and copy the below code snippet and paste just below <head> tag.
<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=’App_id‘ property=’fb:app_id’/>
<meta content=’https://www.facebook.com/bloggersstand‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>

If the above code already available in your template then you can skip step 3.
Customization:
  • Replace App_id and bloggersstand with your app id and username.
  • If you have already created app id then you can use it..if not then visit this url https://developers.facebook.com/apps/?action=create and create your app.after that you can use your app id.
Step 4. Now search for opening <body> tag and copy the below java script and paste just after/below the <body> tag.

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : '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>
Customization:
  • Replace App_id with your facebook app id.
Step 5. Now search for the following code <div class='post-footer-line post-footer-line-1'> and copy the below code and paste after <div class='post-footer-line post-footer-line-1'>.

<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' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/></div>
</b:if>
  <div class='clear'/>
Step 6. Now Save Your Template..Done ! 

Post a Comment