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.
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'>
or
<div class='post-footer-line post-footer-line-3'>
or
<data:post.body/>
Add the code below after any of the tags above and save your template.
<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
lightwith 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.
nice
Very important article specially for me and should be followed practically…..
very good article. Thanks for sharing such kinds of informative article.
I love to read such kinds of article that u shared. i was also searching about it. Now my problem is solved. Thanks for sharing your valuable experience.
Thanks so much for responding. I have been able to setup and a new Application ID.
Hello dear,
Is anything wrong, if you use the app you have already created for another website (WordPress) and use it in Blogger?
Thanks
@Tony, nothing is wrong.
please i can find any of this tags
or
or
what do i need to do.and it has also made my normal comment box disappear. help please
please help me out. i have created the app but could not integrate it on my blog.
@ akinola, where did you have challenge?
your article was very helpful. thank you sir
Why some time the code we apply don’t work it because when u click save Templet it did not save because of network or sever issues
Androidvillaz.com
Hey, I cant find the tag
@Reginald, which tag?
Can not find #6 in my HTML 🙁 Very disappointed.
6. Search for the any of these tag:
or
or
Add the code below after any of the tags above and save your template.
@Kristiiina,
<data:post.body/>should be in your template.It is not. I have searched 1001 times, it is not there.
@Kristiiina, what’s your blog address?
I tried all the steps, it keeps telling me “template-design only available for version 2 and above”. What’s wrong???
@Evidence Grace, it ought to work. Please try again.
I tried all the steps, but my comment widget did not show , What Might have gone wrong . Thanks for ur help
@mnenigeria, undo all the things you’ve done, and then retry again.
I believe I followed all the steps and yet, I kept getting this message below:
Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Element type “html” must be followed by either attribute specifications, “>” or “/>”.
Error 500
Please what can I do?
Joe, make sure you replaced <html with <html xmlns:fb=’http://www.facebook.com/2008/fbml’ correctly.
I did all the steps then it work thanks 🙂
http://www.imadeonline.com
Hai your post is really informative or helpful for me keep it up and check also my blog is very informative i write itself Trick Of Blogging
thank you so much sir.. http://www.whispernaija.com
thanks
Thanks Mr. justnaira i am successes to do this.
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.
cool thanks..-
Thank you a lot. I was looking for it
@Easy Rider Jacket, you are welcome.
@Angie Salinas-Benjamin, What type of template are you using?
I’m really having problems trying to integrate the facebook box…I’ve followed several tutorials and nothing 🙁 in this one, you’re mentioning body tag…I didn’t find it…like tag body when I look only for “body” there are too many!! what can I do??
Another problem the
wonder if the b: version thing is supposed to go…please help me 🙁
Good work! Your post is an excellent example of why I keep coming back to read your excellent quality content that is forever updated. Thank you
@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.
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 “/>”
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.
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
@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.
Hi, on #6, I can’t find any of those tags. My blog is at bachelordaily.com. Thanks!
@Sick ßookies, you can add the code below the
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
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.
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 http://www.paradigmshiftng.com
worked for me after 2 attempts! Thank yoU! :))
That was a good tutorial of twitter comment box
Good work man.can you post a tutorial about how to add javascript before comment and below the header.Thanks
You’re all welcome.
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.
thanx very mch
That was a good tutorial of facebook comment box
@Barry Harry and windows loader, glad the post helped you.
Thanks Justnaira , I'ts working 🙂
@Admin I see that and now I know how to do it thanks for the link. 🙂
@Brian Harry, this tutorial is different from adding Facebook like. You can check this Facebook Like Box Tutorial
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.