Bloggers that wish to be successful in their blogging career cannot separate their blog from Facebook since it is one of the top channels to increase blog traffic.
Facebook comment box is a useful tool for bloggers to increase & improve conversations and drive more traffic since the post commented on by your blog visitors will be shown on the visitor’s wall on Facebook.
Today, I want to share a simple process that will enable bloggers to add Facebook Comment box to their blogs without any ado.
How to Apply Facebook Comment Box on Blogger Blog
Step:1 ==> Create a Facebook App ID
1. You need a Facebook App Id. Go to Facebook Developers Page to create one.
2. 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:
3. A new app id will be given to you like the one you're seeing below, so note down your APP ID.
Step:2 ==> Add Comment Box Code To Blog Templates
1. Go to your Dashboard >> Templates >> Edit HTML and Expand Widget Templates checkbox.
2.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'
3. Search for <body> tag 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 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>
4. Replace YOUR_APP_ID with the App ID you note in Step 1 above.
5. 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='Just Naira' 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/justnaira' property='fb:admins'/><meta content='article' property='og:type'/>
Now Make the Following Changes on the Code above:
Replace Just Naira 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/justnaira with your Facebook page url.
6. 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://www.justnaira.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>JustNaira.com</a></b> | <b><a alt='Facebook-Comment-Box-widgets' href='http://www.justnaira.com/2012/07/how-to-add-facebook-comment-box-to.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'
You can keep Facebook Comment box and Blogger default comment box. But in case you want to make Facebook comment box your default comment box, go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.
Don’t hesitate to use the comment box in case you encounter any difficulties.
31 comments so far. What are your thoughts?
That was a good tutorial of facebook comment box how about adding facebook likes box with the faces of the users appearing on it when they hit like. Is it the same process of getting the code and pasting it like that? I'm just confuse I haven't tried that yet.
@Brian Harry, this tutorial is different from adding Facebook like. You can check this Facebook Like Box Tutorial
@Admin I see that and now I know how to do it thanks for the link. :)
Thanks Justnaira , I'ts working :)
@Barry Harry and windows loader, glad the post helped you.
That was a good tutorial of facebook comment box
thanx very mch
great stuff. it worked for me. i had to do one extra step though and add my site to the app... but thanks so much. very well explained.
You're all welcome.
Good work man.can you post a tutorial about how to add javascript before comment and below the header.Thanks
That was a good tutorial of twitter comment box
worked for me after 2 attempts! Thank yoU! :))
Good morning, please i encountered a problem while instaling the fb comment. it works well but my blog is scartered. The latest post doesnt show again, immediately, i publish, its hides the previous post and leaves just the recent one. even as at that, hwen you open the recently published article on explorer, my side bar is shifted down the blog>>>>please i need your assist on this. thanks. my website is www.paradigmshiftng.com
ileowo kikiowo, Always backup your template whenever you want to make any changes. Try and undo all the changes you have done. You can send your template to admin@justnaira.com for checking.
Hi- I cant seem to get it work- followed all the steps correctly- only I can't seem to find < body > in my html- ctrl+F only seems to find <body - so where do I paste the code for step 3? My blog is newnewmusicalexpress.blogspot.co.uk. Thanks
@Sick ßookies, you can add the code below the <body - tag.
Hi, on #6, I can't find any of those tags. My blog is at bachelordaily.com. Thanks!
@The SVB make sure you clicked on Expand Widget Templates box. Let me know if you don't find any of the code after doing that.
It’s always great to visit a helpful and useful post like you did. Ideas like this are amazing; it can be applicable to my marketing. Thanks for sharing this.
Dissertation Service
Hi! Thanks so much for your tips, but I was wondering why we shouldn't edit the last code replacing your blog url with ours.
I went ahead with the process, leaving the last code as it is. I clicked save and it came back with this error message:Error parsing XML, line 717, column 8: Element type "body" must be followed by either attribute specifications, ">" or "/>"
@customdissertationhelp, you're welcome.
@Ugochi, we put our link as a credit, you don't have to remove that if you want others to know about us.
Try and re-copy it again without making any changes.
@Easy Rider Jacket, you are welcome.
@Angie Salinas-Benjamin, What type of template are you using?
Thank you a lot. I was looking for it
cool thanks..-
Its excellent method to learn about a most needed thing of adding a blogger comment in Facebook which is really a resourceful thing to learn about.
Thanks Mr. justnaira i am successes to do this.
thanks
thank you so much sir.. www.whispernaija.com
I did all the steps then it work thanks :)
www.imadeonline.com
thanks for sharing such info to us... it very necessary because many people always search this type of things that how they can do that.. by sharing this information to the people you have place yourself in the heart of the people
Click Here to Leave a Comment
Don't just read and walk away, Your Feedback Is Always Appreciated..
Note:
Please do not spam, spam comments will be deleted immediately upon review.