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.
<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.
<b:if cond='data:post.isFirstPost'>Step 6. Now Save Your Template..Done !
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[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'/>