I always say that commenting is the best way to increase the engagement of visitors with a site. If you are blogging on blogger platform then you know that blogger has a default commenting system. But limited users can/want to comment using blogger commenting option. To increase comment in your blog you use such platform by which you can inspire more user to comment. Facebook is such platform. There are several I have published on Blogger Commenting System. In this post I am gonna show How to Add Facebook Comment Box in Blogger.
Facebook developer always try to make user experience more better with its features. That is why they introduce several plugins like Facebook Like box, button for blogger and website. If you add Facebook comment box in your blog then the visitors can comment on your blog via Facebook account. Beside that when someone comment via his Facebook account then the commented post automatically comes in his news feed. Which increase chances for getting more visitors. Let's try the trick...
Adding Facebook Comment Box in Blogger:
Create an Facebook App:
Installing Facebook Comment Box in Blogger
Facebook developer always try to make user experience more better with its features. That is why they introduce several plugins like Facebook Like box, button for blogger and website. If you add Facebook comment box in your blog then the visitors can comment on your blog via Facebook account. Beside that when someone comment via his Facebook account then the commented post automatically comes in his news feed. Which increase chances for getting more visitors. Let's try the trick...
Adding Facebook Comment Box in Blogger:
Create an Facebook App:
- First go to here to create an Facebook App.
- Then enter a Valid App name, Namespace and Select App Category. And then click on Continue to create the app.
- Then click on Disabled button of Sandbox Mode.
- Now click on Save button and Note down your App ID.
Installing Facebook Comment Box in Blogger
- Sign into your Blogger Account and go to Dashboard.
- Then click on Template option and then click on Edit HTML button. You will land on the HTML page.
- Here in the HTML page find <html and Replace it with the below code.
- Then find </body> tag and Paste below code just Above it.
- Replace APP-ID with your Facebook APP ID.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() { FB.init({ appId : 'APP-ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
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>
- Now find </head> tag and Paste below code just Above it. And Replace the following...
- iTTimesbd - With your Blog Title Name
- Blog-Logo-Image - With your Logo Image
- APP-ID - With your Facebook App ID
- iTTimesbd - With Facebook Page Username<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='iTTimesbd' property='og:site_name'/>
<meta content='Blog-Logo-Image' property='og:image'/>
<meta content='APP-ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/iTTimesbd' property='fb:admins'/>
<meta content='article' property='og:type'/>
This above code will give better appearance to blog in Facebook News Feed when someone comment on your blog.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Placing Facebook Comment Box in Blogger:
- Now find <b:includable id='comment-form' var='post'> code and Paste the following code just Below it.
- Note: In case if are not able to find above searched code or in case if comment box not appear then find <div class='post-footer'> (You will find this line for two times) and paste the following code just Below the second one.
- Customization: Adjust the comment box width='530' and width:520px as you need.
<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='530'/></div>
<div style='color:#fff;
background-color:#3B5998;border: solid 1px #ddd; font-size:10px;
padding:3px; width:520px;'>Facebook Blogger Plugin by <b><a
alt='blogger templates' href='http://www.safetricks.com'
style='text-decoration:underline; color:#fff;' target='_blank'
title='blogger templates'>Safe
Tricks</a></b></div></div>
</b:if>
<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='530'/></div>
<div style='color:#fff;
background-color:#3B5998;border: solid 1px #ddd; font-size:10px;
padding:3px; width:520px;'>Facebook Blogger Plugin by <b><a
alt='blogger templates' href='http://www.safetricks.com'
style='text-decoration:underline; color:#fff;' target='_blank'
title='blogger templates'>Safe
Tricks</a></b></div></div>
</b:if>
- Finally click on Save Template button to apply it.
Hiding the Blogger Comment Box: If you don''t want to use both the Blogger Comment box and Facebook Comment box together in your blog then follow the below steps to hide it.
- Go to your Blogger Setting and choose Post and Comments option.
- Then change Comment Location to Hide and then click on Save Settings button.
That's it. Now view your blog. If you have complete the whole procedure correctly then you will see Facebook comment box in your blog.
Stay with www.iTTimesbd.com for more IT related Post
I totally agree that the maximum traffic could be generated by commenting and Facebook is the exclusive portal which proves this strategy to be the beneficial one.
ReplyDelete