Facebook comment box is one of the very useful tool for bloggers to increase engagement of readers. You may find many other blog posts teaching to add Facebook comment box to blogger blog. But still people are getting problem as I did. In this post, I will talk about how to integrate Facebook comment box to your blogger blog in very simple steps.
Step 1: Setup an application at Facebook developer page and enter your blog name, URL. Save the APP-ID for future reference.
Step2: Get your Facebook USER-ID. If you are using a custom username for your Facebook profile or page, you can get your profile Id from http://graph.facebook.com/<your username>. Here is the same page for Programming Interviews.
Step 3: Login to you Blogger dashboard and navigate to Layout > Edit HTML and check on Expand Widget Templates. Search for <head> and add following lines just after it:
To moderate comments across a site, all moderators must be added as admins of the app:
<meta property="fb:app_id" content="{YOUR_APP_ID}">
To receive notifications on every comment posted to the Comment Box, add:
<meta property="fb:admins" content="{YOUR_USER_ID}">
Change {YOUR_APP_ID} and {YOUR_USER_ID} with earlier saved values.
Step 4: Search for <data:post.body/> and add following lines just after it:
<!-- Facebook comment start -->
<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'>
</script>
<fb:comments expr:href='data:post.url' num_posts='5' width='600'/>
</b:if>
<!-- Facebook comment end -->
Line 2 adds a check so that Facebook comment box doesn't appear on home page of your blog but only on the post pages. If you are familiar with blogger template you may want to add above code somewhere else. Please note to use expr:href in place of just href in line 5.
Step 5: You may or may not want to hide your blogger comment box. If you want to hide Blogger comment box, navigate to Settings > Comments and select hide and save settings.
PS: If you like this tutorial or have any question, please use below Facebook comment box to start conversation.
Subscribe - To get an automatic feed of all future posts subscribe here, or to receive them via email go here and enter your email address in the box. You can also like us on facebook and follow me on Twitter @akashag1001.
hello,
Thanks for sharing this..
My comment section appears on top of the post..please help
visit www.ruqaiyakhan.com to see how it appears in my posts
Good information. And i alway like to read the quality content. And i am really happy to found this information on your blog. Thanks for sharing this opportunity to leave a comment.
Rally Nice Good Job man......... Thanks foe sharing.
Good Info' ..It's very useful.
Thank you for sharing this :)
Thank you for this I will try on my blogs.
Justin of Facebook Application Development Companies
This is an excellent website. This is my first visit to this blog, and I think it's amazing. The most important thing is that this blog's information is written in a clear and understandable manner.
Developers On Demand