Social networking sites like facebook makes a real important part on the world of blogging. This social networking sites helps you a lot to get traffic on your blog if you do take some special care to them.This are really a gift of internet for bloggers like us to drive traffic towards our blog.Using facebook comment system on your blog makes our blog more interactive and drives more traffic as commenting on your blog.This also helps your blog reader to share the topic on their facebook wall easily.
so,here we're going to share the details tutorial about how to make this possible.This tutorial will completely explains you how to add facebook comment box to your blogspot blog easily.
Must Read : Blogger Simple DropDown MenuCreate A Facebook App-id
- First uou need a Facebook App Id. So for that you have to go there Facebook Developers Page to make one.
- Next Click on the "+ Create New App"and a window will pop out, there you've to enter your blog Name and click on "Continue" as shown in the screenshot below:
- You'll get a new app id just like the below screenshot, so note down your APP ID and keep it some safe place.You have to need that in next steps.
Add Code On Blogger Template
- Log onto your Blogger Dashboard >> Templates >> Edit HTML and Expand Widget Templates checkbox.
- Search(CTRL + F) for <html tag and replace it with the below code
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Then search(ctrl+f) for on you template
<body expr:class='"loading" + data:blog.mobileClass'>
Now add the below code after it.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_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>
- Replace YOUR_APP_ID with the App ID you've noted down on Step 1
- Search for </head> code and add the code below above the </head>
<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.
- Next you have to search for the any of these following codes
<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.com/ </a></b> | <b><a alt='Facebook-Comment-Box-widgets' href=' http://techtrickhome.com/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 wish to use the dark scheme then just replace light with dark
- If you want change the Comments box size then change this value width='520'
Must Read : Add Paypal Donation Button On BloggerDon’t hesitate to use the comment box below in case you're facing any difficulties while trying to do this.
|
|
Articles You May Like |
About The Author
Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.
ReplyDeleteIn kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results just remove the div tags and give the object some width/height parameters. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)
<!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='' type='text/html' width=''>
</object></div>
<!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...
Nice job man
DeleteCan you please help me?
ReplyDeletewhen i add this comment box, my facebook share button lying right to each post disappears!But the tweet button is still there! urgent help pleasE! :(
your site url please.
Deletenot working bro please help :(
ReplyDeletehttp://hanantechnews.blogspot.com/
its not showing in my News feed but it does show when i open it seperately
ReplyDeleteIt'll not show on your news feed,Just visited your blog.It's working perfect there buddy :)
DeleteI did all the steps then it work thanks :)
ReplyDeletewww.imadeonline.com
If I want to remove the box, do I just do a reverse? I cannot reset the template because I've made other changes I'd like to keep. Thank you for this by the way it really works!
ReplyDeleteYup,exactly.
DeleteHey Dude this technic is not Working in Ma Site
ReplyDeletehttp://adukkalakkaran.blogspot.in
Send us your template please.
DeleteIf I hide bloggers box it also disappears facebook comment box. Any help?
ReplyDeleteYour url please.
DeleteHaha! It worked! Thank you.
ReplyDelete