It’s getting harder and harder to separate blogging from facebook as it remains one of the top channels to drive traffic to your blog. Using facebook comment on your blog has a makes your blog more interactive and drives in more traffic as commenting on your blog also shares the topic on the visitor’s facebook wall.
This tutorial explains how to add facebook comment box to your blogspot blog easily.
Create a Facebook App-Id
- You need a Facebook App Id. Go to Facebook Developers Page to create one.
- Click on "+ Create New App" a window will pop out, so enter your blog Name and click on "Continue" as shown in the image below:
- A new app id will be given to you like the one you're seeing below, so note down your APP ID.
Add Code on Blogger Template
- Go to your Dashboard >> Templates >> Edit HTML and Expand Widget Templates checkbox.
- Use CTRL + F key on your computer keyboard to search for <html and replace it with the code below.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Search for
<body expr:class='"loading" + data:blog.mobileClass'>
in you template and add the code below after it.
<div id='fb-root'/><script>window.fbAsyncInit = function() {FB.init({appId : 'YOUR_APP_ID',status : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : 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_APP_ID with the App ID you note in Step 1 above.
- Search for </head> tag and add the open graph meta tags below above the </head> tag
<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='TechTrickHome' property='og:site_name'/><meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID' property='fb:app_id'/><meta content='http://www.facebook.com/techtrickhome' property='fb:admins'/><meta content='article' property='og:type'/>
Now Make the Following Changes on the Code above:
Replace TechTrickHome with your blog name.
Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
Replace YOUR_APP_ID with your app id.
Replace http://www.facebook.com/techtrickhome with your Facebook page url.
- Search for the any of these tag:
<p class='post-footer-line post-footer-line-3'>
<div class='post-footer-line post-footer-line-3'>
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px;'>Facebook Blogger Plugin by <b><a alt='blogger templates' href='http://techtrickhome.blogspot.com/ ' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>http://techtrickhome.blogspot.in/ </a></b> | <b><a alt='Facebook-Comment-Box-widgets' href=' http://techtrickhome.blogspot.in/2012/09/facebook-comment-box-for-blogger.html ' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Get Widget</a></b></div></div>
</b:if>
- If you want to use the dark scheme then simply replace light with dark
- To change the Comments box size, change this value width='520'
Don’t hesitate to use the comment box below in case you face any difficulties.
Post a Comment