New Facebook Comment Box for Blogger With Notifications Enabled

Facebook comment for your blog can serve as a good way to make your site more engaging and encourage readers to drop comments if they’re already logged in to Facebook. It also serves as a source of traffic since using Facebook comment shares the comment and post page on the visitor’s Facebook wall. One thing should be noted though: Facebook comment has no SEO value since it’s being displayed in an iframe which Google won’t index. Comments made with the regular comment box on your site has more advantages especially if you get loads of comment, more keywords you didn’t actually mention in the post content but appearing in comments do bring more search engine traffic. This is something Facebook comment lacks, execept the extra traffic you get from Facebook.

I just thought you should know that before you implent it on your blog. As you can see, I do use it too. I wrote a post on this particular topic earlier but Facebook has changed since, lots of things on the post may not look exactly as explained. Also, this one has a feature the previous one didn’t have – getting notified of every comment made on your blog. One other thing, I customized this with a little CSS. Below is a screenshot of what it looks like:

new facebook comment box for blogger with notification

You may also check the live demo on my old blog here.

How to add Facebook comment box to Blogspot

There are about five steps to get this done but chill out, it’s easy, ok? :D Just follow the steps and you’ll have a nice Facebook comment box installed on your blog in no time.

1. Creating a Facebook Application

i. Head on to facebook developer page, you should create a new app by clicking the button at the top right.

how to add facebook comment box for blogger

ii. Enter your application name and namespace,input the captcha code and proceed.

how to add facebook comment to blogger

iii. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.

For App website, enter you blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:

how to add facebook comment to blogspot

iv. Scroll down a bit and hit the Save Changes button. Now you’re done with creating your facebook application but there’s one more thing to do. On that same page, you should see your application ID. Copy it and save somewhere, you’re gonna be needing it.

facebook comment box for blogspot

Now let’s head to your blog and finish this up ;)

2. Adding the codes to your template

We’re adding four sets of codes into your template to make this work the way we want, aight?

i. xmnls attribute
ii. SDK script
iiI. Open graph meta tag
iv. Comment form iframe code

Log in to your blogger account and click on Template > Edit HTML > Check Expand Widget Template

i. Press Ctrl + F and search for this code:

<html

This should be found on the second or third line of your template.

– Right in front of this, add the following code:

xmlns:fb='http://www.facebook.com/2008/fbml'

-Be sure to have a space before and after this code. Take a look at the example below:

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

ii. Press CTRL + F on your keyboard and search for this:

<body>

If you can’t find this, search for something similar. You should search for this instead:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

In the next line, paste this code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
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>

Be sure to replace YOUR APPLICATION ID HERE with the application ID I asked you to copy earlier, remember?

iii. Now, let’s add the open graph meta tag. Search for this code in your template:

</head>

In the line above it, paste this piece of code:

<meta property="fb:app_id" content="YOUR_APP_ID" />

Replace YOUR_APP_ID with that same application ID you previously copied.

iv. Now here’s the last part of tweaking your template your template to make it display Facebook comment box. The last thing is the iframe to display the comment box where you want. Search for this in your template:

<data:post.body/>

If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

<div class='post-footer-line post-footer-line-1'>

In the line just below it, paste this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://geek.ng/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div align='right'><a href='http://geek.ng/2011/08/facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div>
</div>
</p>
</b:if>

Save your template, the Facebook comment form should now appear. If it looks rather small, replace width=’450′ with width=’600′. This increases the width from 450px to 600px.

3. Enabling notification for comments on every post

This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone comments on your blog. You get a regular notification on Facebook and you can visit your blog to reply the comment.

– Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

– Be sure to replace YOUR_APP_ID with your real application ID

– On the page that opens, click on settings and add yourself as moderator

facebook comment box for blogger with notification

– Click on your name when it shows up and save the changes you made. When someone drops a comment on your blog, you should be notified that instant on Facebook.

facebook comment box for blogger with notification enabled

If this works for you, you can say thank you by sharing on Facebook, hitting the Google +1 button or simply using the comment box. Also, it would be nice of you not to remove the credit link to allow others find this useful widget. If you’re having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.

Update 1: Showing the Comment Box on the Homepage and Archive

I don’t recommend this because it doesn’t make your blog look neat and professional but if you have to show the comment box on the homepage, there’s only a little thing you must do. See the code you pasted in STEP 2 iv? Yeah, just remove the first and the last line of that code and the box should appear on the homepage below every post.

Update 2: Fix Facebook Comment Box Aligned to the Right

We all know Blogger recently made some changes and I noticed this box got aligned to the right due to some reasons. This seems to be cause by some HTML tags being incorrectly parsed by the new template editor… my guess.

Anyway, here’s the fix: Replace the code you have under data:post.body with the one below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://geek.ng/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div align='right'><a href='http://geek.ng/2011/08/facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div>
</div>
</p>
</b:if>

Replacing the whole code pasted earlier under data:post.body or post-footer-line-1 should fix it. I did it on my test blog and it works just fine. Any problem? Don’t hesitate to holla at me. :)

Peace.

Comments

    • says

      I can only assume you’ll use this post and the codes contained therein on your next blog post, like you did on the post appearing in your comment above… the post and code which originally appeared here – Adding Stylish Share Buttons to Your Blogger/Wordpress Blog’s Post

    • says

      Hello, I have a request why not make a video tutorial how I can apply the facebook comment box in my blog, because there are many options to put the blog comment box, but the old version of html and that new is a bit more complicated and can not find code that is required to make application on the blog, if you have something that can help me please get on my facebook page and let a private message https://www.facebook.com/ FilmeBiled Thanks Advance!

  1. says

    The Widget is so Cool Bro Don, the Notification feature is on pint, and you made it look awesome by styling it, besides this, I notice you do styling in widgets you talk on your blog these days, seems you’ve added CSS to your skills. Thumbs Up ;)

    • says

      Since you already have a facebook comment installed, just replace that with is as explained above: You can replace the comment form with this new one. Just replace the code under

  2. says

    The instrument is so calm, the Notification component exists on pint, also you caused it appearance large by styling it, additional this, I caution you do styling in instruments you conversation on your blog these days.

  3. says

    Not working for my blog…… message shown like this …… ” Error parsing XML, line 3, column 340: Attribute “xmlns:fb” was already specified for element “html”…..

    • says

      That’s because you already have a facebook comment installed. You can just replace the code you have under data:post.body with the one I posted. That’s all you need to do.

      • says

        Don, this is a great help. I had the same problem and it seems to be because I already have Facebook “like” buttons installed. Is there is there a work-around where I can keep both?

          • says

            Well, the most bizarre thing happened. I just went back to do what you said, and when I follow your instructions and click on “edit HTML” I get the screen and the scroll bar, but there is NOTHING THERE. No HTML. Yet, the blog itself seems to be fine. Ever seen this before?

  4. says

    hi sir am following same steps in my blogger .but it will not showing anything.and there is no error at saving template.Please help me and am using blogger theme simple magazine 2 theme pls reply to me sir

        • says

          This is a great little app – hopefully, it increases the amount of comments on our blog (most of our comments come from Anonymous because many of our readers don’t have Google accounts and don’t want to take the time to sign up). Thanks for instructions. One thing that I am having problems with is the enable notification part… when I follow that link and click on Settings it says loading and then never loads anything. Looks like it’s a Facebook issue… not sure if anyone else has had this problem. I’m going to try again a little later and hopefully it works.

          • says

            Chuck Porter, Did you ever get the page to load when you click on settings. It’s three months after you’ve posted this and it does the same for me. Did you ever figure out a way around this, maybe another way to set up notifications and moderator.

  5. says

    I changed my blog template to a third party template and when I did that I lost the Facebook Comment Box. Do you know of an easy fix for this or is this something that won’t jive?

  6. says

    Hello, I did all the above and the commet box apperas normaly and when i comment it works(i’ve added myself as moderator) but when someone else commets he gets this message: “Something went wrong. We’re working on getting it fixed as soon as we can.” Also I don’t get a notification of a new comment. Ca n you help?

  7. says

    I just the comment box for a few days snd took if off because, a comment posted on a particular post runs through all the posts, can u help. Thanks

  8. says

    App creation failed Please use your personal account to create this app. To use a different name for testing, create the app with your personal account and then create a test account. If you received this message in error, please submit an appeal.

  9. says

    How To make action default Post to Facebook Box aleardy have checked user no need to make check to post it to his profile I wish u understand me thanks for this good topic

      • says

        Hi. When I try to add myself as moderator, I get this message: “Cannot add non-users or non-friends as moderators: Ara Aquino” What should I do?

        • says

          Never mind this one as well, I got it to work :) I am using a design by Sora Templates (Eclipse) and appeared thrice in my codes so I looked for instead. However, when I paste the codes after it still doesn’t work, so I tried pasting it after . Unfortunately, it still didn’t work so I asked you what to do. After a couple of days, I tried pasting it after the second and it finally worked! It looked great, I have to say. But I had to revert to the simple Facebook comments because it seemed to me that there was already “a lot” happening in my pages. Anyway, great work, Don! Thanks for this one! Hugggs! xoxo

          • says

            LOL I just noticed that the tags didn’t appear :P Anyway, I said: I am using a design by Sora Templates (Eclipse) and appeared thrice in my codes so I looked for instead. However, when I paste the codes after it still doesn’t work, so I tried pasting it after . Unfortunately, it still didn’t work so I asked you what to do. After a couple of days, I tried pasting it after the second and it finally worked! It looked great, I have to say. But I had to revert to the simple Facebook comments because it seemed to me that there was already “a lot” happening in my pages. Anyway, great work, Don! Thanks for this one! Hugggs! xoxo **remove spaces between tags ———- Yep, keeping it simple Don. Thanks :)

    • says

      I hope you don’t mind me replying here, but try to play with the codes :) Search for and if it appeared more than once, try to paste it after the first. If it doesn’t work, cut the codes and paste them after the second. And so on. Same thing with . If it doesn’t work, move the codes after , or , blah blah blah. Give it a try :)

  10. says

    Don, I did what you wrote (and even added tweets) but my problem is, the “Posted by” tag is below the comments boxes instead of been just under the post. I need help! My blog is: http://www.campuzfilla.com

  11. says

    Hi there, Thanks for this tutorial! I think it works. I tried commenting on my blog, and got no notification; is that just because it was me who wrote and not someone else? Also, the comment box is covering up my post-footer. How can I move it down? (haha, most of my blog design problems involve spacing – see my sidebar! – I really need to figure it out!) Thanks so much!

    • says

      Ah, got it to work AND be in the right place! Yes! I modified it a touch, just to make it fit better on my page (removed shadow, changed “Love to hear what you think” to “I’d love to hear what you think”, removed the comment icon picture thingy, changed the font size of the title so it’s not so big…) The only thing is that I would LIKE it to fit the space of my blog post. Changing the size like you say in this post only makes the actual comment space where you write bigger and not the whole thing. Any recommendations?

      • says

        Glad you got it working! By using width=’600′ it should actually be bigger… I mean the whole thing. Just noticed the apostrophe up there in the post looks a bit twisted.

  12. Malik Ismail says

    hi i have coded this step by step but it is only working for 1 post and not showing comment box for other post kindly help

  13. says

    I tried your code but on my blog http://www.spicejaat.com its working on post pages but when on label search facebook messagebox is not displayed. Any resolution to it.

  14. says

    Hi, thanks ! i already did it but thanks for sharing. But, i want to have the notification on my mobile (iOs), in facebook’s app, i don’t know how to do that (i ONLY receive notification on facebook’s website, not mobile app). Any idea ?

  15. says

    Hi Don THANK YOU so much – it works!!! I just made some changes as I didn’t want the border. I have a question thought – I’d like the FB-comment-box to be AFTER the Linkwithin box. How do I do that?? Thanks in advance

    • says

      Did you add the linkwithin box manually? You may have to locate the code within the template and place the Facebook code right under it. Alternatively, paste the Facebook code under <post-footer-line-1/>

    • says

      I put it as a gadget using HTML/Java script and then placed the gadget below the posts. Do you mean I have to replace the code instead of below “”, after “” ??

  16. says

    Step 2 part iv searched for both codes and can’t find it now I don’t know where to put the code that will make the box show I thought the problem might be in the template I used one called Awesome Inc. so I changed it to water mark they both the same they don’t have that section and I just wanna know where to put the last code part

  17. says

    Hi Don I searched for the right “footer-line” and placed the code in the place I wanted it. Thanks. It’s working and I already seeing comment, but I DO NOT get any notification, and I followed your instructions

      • says

        I have now few comments in different posts, but I didn’t get any notice. I saw these comments by chance (and replied to them). You can see for example here – http://www.winnish.net/2012/12/blog-post_25.html They might be some that I haven’t seen yet….

  18. says

    Dear admin, where will we get the notification if someone leaves comment on our post coz in default comment box we receive notification in blogger but when using facebook comment box where we will find this notification. Plz help.

  19. deep says

    hey bro i can’t add app domain it rejected with Error App Domains: www.photoscape-material.blogspot.com/ is not a valid domain. now what to do?? plzzz help

  20. says

    Can I move the Facebook comment box at the lower side ? Below the standard blogspot comment box, because I prefer Blogspot comment box first, and Facebook comment box after it. Thankyou

  21. says

    i already have the fb comments on my blog for some time and now its showing that “Warning: [url of the blog post] is unreachable.” i fear if i do the steps you’ve mentioned, my old posts with comments will disappear. do you know if anyone tried to change to your style and did not lost the old comments?

  22. says

    This errors is coming ” Error parsing XML, line 3, column 339: Attribute “xmlns:fb” was already specified for element “html”.” while implementing this tool on my blog of ” latest jobs, bank job government jobs, exam paper and career resources” http://abhicareer.blogspot.com

  23. Alina Aronow says

    I did all steps and it works. Thanks! One problem – people can only comment through Facebook if you’re logged in from a computer. It doesn’t work if You’re trying to comment through your phone. Please help! My blog is alinasfashtips.blogspot.com

  24. says

    Already have fb comment on my blog, but without notification it difficult to trace any incoming new comment on each my post. Thanks don! nice tutorial, very much helpful

  25. ieva says

    Thank you very much! No instructions worked until I found your perfect explanation. It works just fine and it looks amazing. I just translated the top line to my language. Just one thing – when the page loads, it takes some time to load comment box. It sort of tries to load it many times before it’s finally done. Maybe there is a way to fix it? Thanks again lieknek-lengvai.blogspot.co.uk

    • says

      That’s because it’s a server side javascript that has to be loaded straight from Facebook’s server. There’s no way tofix it, Ieva. Glad it worked for you though :)

      • ieva says

        Hello again, I hope you can help. Again:) I decided to change my blogspot domain to my own. And all the comments disappeared… Comment box is still there but all the likes and all the comments gone:( Is there a way to fix it please? Thank you Ieva

        • says

          There’s no way to fix that that I know of. The comments appear as per the URL of each post and once the URL changes or even just your permalink structure, the comments disappear.

  26. says

    Hi Don, thanks for the post. I believe Facebook has changed since you wrote this post. In step 1, iii, your instructions are to put in your domain or subdomain and in the lower section put in your site URL, there is no place to put my url. Help please!

    • says

      I have figured out where to place my custom domain, but as of October 2011 you must input a canvas url and a secure canvas url, to which I have no idea what these are. Any help or reference you can give me will be much appreciated, thank you in advance:)

  27. says

    I tried this. Finished all the steps. But the comment box didn’t appear on my blog! :( And when I go to settings (for comment notifications) there’s literally nothing in the settings dialogue box, except ‘Save’ and ‘Cancel’ Help?

    • Alexis Mendoza says

      I also experienced this, what I did is just go to my website, and check the comments area, theres a similar settings button there. That worked for me :)

      • dope says

        I understand, thank you. I was thinking about something else: What if I would want to make a link at the right bottom of every post I make that says ‘Comment’ and that link is just the same ‘variable’ link that says the ‘name of the post’ and goes to the post page? And also automatically scrolls down to the bottom of the page to the comment form? I know how to make the page ‘jump’ to bottom but I have no idea where should I place the codes. What’s the code for the link up top and where should I place it? Have you got any idea how to achieve this?

        • dope says

          ok I figured out where to put the ‘Comment’ jump link: COMMENT but I have no idea why the jump link doesn’t work, I’ve put the blabla after the line: and it’s linked to the comment link so it should jump to the bottom of the page but it does not happen. Have you got an idea?

  28. says

    Hi Don, Thanks for the free info on how to do this, people like me really need all the help we can get with this stuff. I followed your instructions and was able to (eventually) get it to work! Any delay in making this work was due to my brain, not your instructions! The only place where I had to do something differently than was instructed was where you input the App domain. I couldn’t get any version of my blogspot.com url to be accepted, so I ended up leaving it blank and for some reason that worked !?! I hope it will still function alright. Many thanks for doing the HTML hard yards on this tutorial.

      • I Am Magnus says

        I guess there have been a few changes or just Errors. I used torch browser and IE It says, “Top-Level Domains are not allowed” when you use blogspot.com…. Still working on mine; i’ll leave App Domain empty. It seems i only need the App Id. but, then again, i’m unsure. Custom url and .blogspot got rejected

  29. says

    Does these steps work with WordPress too? There are so many Facebook commenting plugins but none that actually notify you. Hope I can use your advice on my blog!

  30. Mako says

    I successfully added the comment box to my blog but when i try to add notification alerts by following the link “https://developers.facebook.com/tools/comments/?id=……….” and clicking setting, it just shows “loading” and remains that way… waht do i do pls

  31. Mark says

    I have same issue as Mako has. Also comment box is not appearing under page URL (page which I have created under blogger). for post page, it’s working fine. Thanks for sharing this greate tutorials.

  32. Chuck Richter says

    Hey Don, I tried following your directions and it’s not working for me. I’m using Blogger. Here’s my Blog: http://angelswinblog.blogspot.com/ …. I’m probably just lame, but I was wondering if I sent you mail if I could send you my template and if/when you have time, if you can add it for me. If you have a donation box or PayPal I’d be happy to send you some $$$ for your time. Respectfully, Chuck Richter AngelsWin.com

  33. says

    hi there, i have a fashion blog and i was trying to put the comment box but unfortunetelly i couldnt do it although i followed all the steps, could you please help me? :/ ive been trying to use this for months :/ and the fb widget only works in the bottom of my messages and not post by post you see? Please give me a hand

  34. Gabriel says

    I created a comment box and it works great the way I wanted for my customers responsive website . However when I look at in on an iPhone there is white space under the box.. Can you help me make it go away thanks in advance

    • says

      Hi Ugo, It will appear above your your default comment box, directly below your posts. It won’t displace your blogger comment box unless you disable that from your settings.

  35. says

    That’s lovely.. Your tut is simplest. It worked like charm… Thanks for sharing.. keep doing the good work,, Regards, Noor http://www.trickshacker.com

  36. says

    I had installed facebook comment on my blogspot blog it is www.computertweaks.in . It worked fine. Whenever somebody comments using facebook comment I see notifications, and when I click on that notification it takes me to facebook developers moderation page, where I can see all the comments made on my blog. But the problem is: I am not able to distinguish on which particular POST that comment was made. I hope you got my problem. So how to resolve this thing? I mean how would I come to know on which post that comment was made??

  37. says

    Hey Don, Thanks for this blog. I followed all your steps rigorously. But when I tried commenting using it it says you are not logged in. Please help me out here.

  38. says

    Looks like I have goofed up somewhere and I am not able to track it down. Its funny though that, if i copy the link from the comment button and paste it on another window in the browser I am able to put comments. for example : https://www.facebook.com/plugins/comments.php?api_key=&locale=en_US&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Df2462420a8%26origin%3Dhttp%253A%252F%252Fwww.jaadathendi.com%252Ff2568ae80c%26domain%3Dwww.jaadathendi.com%26relation%3Dparent.parent&numposts=10&width=450&href=http%3A%2F%2Fwww.jaadathendi.com%2F2013%2F01%2Fblog-post_17.html#

  39. says

    Hi! What works for me is to set a time to do blog hopping and blog commenting several times a week even each day. This gives me the opportunity to really know what is trending in my niche and reach out to other bloggers who talk about the same topic. I even share their posts in my social media accounts if I really find their content interesting and useful to my followers.

    • says

      I was using it before but I decided to do away with Facebook comments. It wasn’t easy trying to moderate both Facebook comments and default WP comments at once cuz I get loads of comments here.

  40. says

    Pls. I want the facebook comment to be under the shearing icon. How can I do that??? pls view my site to see what I am talking about. Thank you in advance http://meritword.blogspot.com/2013/02/be-swift-to-hear-slow-to-speak.html

  41. says

    Waowww… :D Superb Man.!!! it was So easy to enable facebook comments on a Blog…Really Simple.Thank You Don…You actually made it easy..thank’s Check out My Blog & let me know comment box working fine or not. GOD BLESS.

  42. says

    Hi this is a bit off topic but is there any way to add a comment box to blogger similar to the one you have here. I looked at commentluv and see that it is only for wordpress. Do you know of anything similar that would work on Blogger. I’m not a fan of their drop down menu on the comment box

  43. says

    oops…I just realize commentluv is an ap for sharing post . Anyway, to clarify, What I’m looking for is a comment box where, readers can just type in their name (like yours) instead of the drop down where they have to sign in through another account.

  44. says

    Thank you very much for the step-by-step tutorial. Your post is the best on the web on this subject. Nigerians are definitely the best educators!!! Proud of ya. I also own a blog dedicated to the learning of CAD (and obviously it’s the only Nigerian blog on this subject). Please tell me what you think about the blog. Thank you. http://inventortutorials.blogspot.com

  45. says

    i get this ereo please try to help me when someone comment on posti get this this comment has not yet been published to facebook. publish comment

    • Samir says

      I’m getting the same message, and have to confirm twice before having the message publish to facebook page. “This comment has not yet been published to Facebook. Publish Comment”. Sara, were you able to handle it? Couldn’t anyone else help us on that? Don?

        • Samir says

          Thanks for your quick response. The posts are made public by default, and I seem to have made any important changes. I’ll start it over again so maybe I can fix something that could’ve gone wrong in the way.

  46. says

    Caprio, you are the Don men! Thanks a lot. I have been trying to add the Facebook to my blogger for quite sometime now, but finally with you outstanding expertise I am good. Thanks again. *taking off my hat for the Don*

    • says

      I’m not actually using any plugin for that. I only need to parse the code here, use HTML editor while composing and give it that background using a pre-defined style in the CSS.

      • says

        Still no luck. Followed the steps and tried both the data:post bodys as well as post-footer-line1. Could it be because of this code I inserted for the facebook like button under div:post.body? (removed the angle brackets so it appears in the comment) b:if cond=’data:blog.pageType != "static_page"’ iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=62"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:55px; height:62px;’/ /b:if

        • says

          No, it shouldn’t be the reason. Does that Facebook like button appear? Can you put the commment box code right under it too? If it doesn’t show up with that despite the like button still showin, then something is definitely wrong with the rest of the code or where you placed them.

  47. says

    Thanks a lot buddy! I needed to insert the code step by step for 3 times because it wasn’t working on me, but finally I tried to post the part under: instead of: and everything worked perfect! Thanks a lot!

  48. says

    didn’t work for me followed all the steps… using ur ex-blogger theme… and the “xmlns:fb=’http://www.facebook.com/2008/fbml'” is already in the theme buh far from <html tried re-arranging it buh it didn't work.. any help??

  49. says

    This works great. Thank you so much! One question: Is there a way to add it to static pages and the homepage? The comment will appear if I go to the post link, but it’s not under the homepage post.

  50. says

    Thank you for this tutorial. I want to try fb-comment in google site also. But unlike blogspot google site does not allow me to edit complete html.. Is it possible to follow above steps in google site?

    • says

      I really don’t know exactly how google site works but if you have no control over HTML editing, I’m not sure you can use it there, Besides, this tutorial is strictly for Blogger.

    • says

      For Google Sites integrating FB comment is very easy. Go to Edit HTML and before tag place the following code… remeber to replace ‘upalc’ with your FB ID.

  51. says

    I’m wondering if there’s any way to integrate your FB comment box with the preset blogger comment box? On my site, focusonthebeer.com, I now have two comment boxes and I’m hoping just to have one. I wouldn’t mind just having yours but people can’t comment anonymously, or through google, or a variety of other options. Is there a way to have these options?

    • says

      Unless you disable the default Blogger comment box from your dashboard. Facebook comment box also provide a few options for those not signed in to Facebook.

  52. says

    hi! I love this tutorial and made it work. I have one question though, when I get a notification on my facebook it only brings me to the moderation page on facebook not the page where they commented. thanks!

  53. says

    I tried to integrate this on http://stories.jolchobi.com …but it is not working !!! Is it because I am using advanced mode or I have not been able to complete the last part of integration properly ?

    • says

      I can see some share buttons below your posts so I guess there’s probably a problem implementing the last part of the code that’s supposed to be under data:post.body. Have you tried putting it before or after those share buttons?

  54. says

    Thanks so much for this tutorial. It was all working fine till I had to find this For some reason it’s not in my html? What do I do? Thanks in advance!

  55. says

    This is Good Plugin and u explained in very detail :) thanks for your Post… Now days a new Plugin come across and thats too much awesome, With Facebook, Twitter, G+ and other Social Services. You can check by clicking below link :) http://www.thetrickslab.com/2013/03/how-to-add-smooth-comment-widget-to.html The Tricks Lab

  56. says

    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 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. In 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 so it should work for any and all posts/pages dynamically – I thought that was a nice touch ;-) One final note, I AM NOT a programmer so this isn’t the prettiest thing in the world, but it works great…

    • says

      just realized the code didn’t paste… here it is: <!– 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='60px' type='text/html' width='450px'> </object></div> <!– END Graph API comment pull and text insertion in an invisible div for SEO purposes –>

      • says

        sorry, now I noticed a type :-( &lt;!– BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes –&gt; <div class=’separator’ style=’clear: both; display: none; text-align: center;’>&lt;object data=’http://sukithookahs.com/get_comment_text.php’ height=’60px’ type=’text/html’ width=’450 px’&gt; &lt;/object&gt;&lt;/div> &lt;!– END Graph API comment pull and text insertion in an invisible div for SEO purposes –&gt;

  57. says

    Hello.. Really Nice box and all working fine. Can you help me 1 thing please… to make appear at home page fb comment box ( under pic same with social share). Thanks for your time and great job. http://wesharefunny.blogspot.com/

  58. says

    Thank you for this great tool! I have it working on the simpler of my blogs (static) as a trial. My only concern is having both the Facebook and the standard Blooger comment box showing up. Is this supposed to happen? Also, my standard FB [LIKE} widget has stopped displaying. What would cause this?

    • says

      Hi Alberto, Having both comment boxes appearing isn’t a problem but if you’re not comfortable with it, you can disable the default blogger comment box from your Blogger dashboard. For the FB like, are you using the iFrame version? or XFBML?

  59. says

    Hi, Don. Thanks for this tutorial. However, I’ve tried all the steps but still it didn’t work out on my blog. Is there something that I’ve missed or wronged to follow here? I hope you could help me out. Thank you.

  60. says

    Hi, I’m pretty new to blogging and tried this on my blog but it just didn’t work. There are no error messages but the Facebook comment option just doesn’t come on the blog. I had a bit of trouble with the 4th part of the code. I have 3 of this – data:post.body code and 2 of the footer code. I tried copying your code below the second footer code and also below the third data:post,body code. But nothing seems to work. Pls help me out. Thanks Dee

  61. says

    i followed all instructions, but comment box isnt showing on my mobile… what should ido next to have it apply when viewing blog on mobile

  62. says

    I tried this earlier today, and the code worked fine – then I guess I had too many different blogger code windows open, so I must have shut down the wrong one….code was gone except for the css styling box for FB comments. I can not get this to work on my blog again, but I did notice that blogger reverts characters to ascii (or whatever it means when the ‘ mark becomes ' ) and absolutely will not save the code as it is copied and then pasted. I realize this is likely a blogger issue rather than an issue with the code, but I even pasted it with the “characters” all typed out and it still won’t show on my blog. Any suggestions? Also, when I do get this working again: is there a way to get the FB comment box right under the blogger comment box, and not directly underneath the post itself? Thank you for sharing your code, and for any help you can give me!

    • says

      I can only suggest you clear all edits and try again. Better still, if you saved your template before making those changes, you can restore the backup and try the steps all over again. It’s quite possible to place it under the default Blogger comment box but I’ve never tried it before. The last part of the code that’s supposed to go under data:post.body can be placed before <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

      • says

        Cleared everything out; thanks again so much for trying to help! Unfortunately, blogger will absolutely not save any code as I have copy/pasted it, and the needed things like the apostrophes or single quotations turn into four characters – AGAIN. Ugh.

  63. says

    Thanks so much for your help getting the facebook commenting onto my blog! I’m just wondering what to do about the default blogger comment box that is still left underneath the facebook? Seems a little odd to have both still ;P Any help you can provide is GREATLY appreciated!

  64. says

    hey thanks so much for the tutorial! its great… on step 3, I cant figure out how to turn on comments? When I click on settings in facebook it just says loading forever? any tips? thanks! taylor

  65. Ieva says

    Hello Don, I used your instructions about 3 months ago and comment box worked perfectly all this time. THANK YOU! Now last couple of posts keep getting strange message “unreachable” inside the comment box. I would appreciate your advice if it’s possible to fix it. And one more quick question. How can I change the language on my “like” button? Thank you Ieva

    • says

      Try to debug the URL of the new posts here to let Facebook access them quicker: https://developers.facebook.com/tools/debug Changing the like button language depends on the version of the button you’re using. Check this page: https://developers.facebook.com/docs/reference/plugins/like/ It explains hot to change the language. You can get the right language code here: http://facebook.com/translations/FacebookLocales.xml

  66. says

    Hi, I followed these directions but don’t see the comment box on my blog. can you tell what i’m doing wrong? when i go to the moderater site for the comments i can see posts people made through facebook but not sure why I can’t see it on my blog: www.danalaymonphotographyblog.com. thanks!

  67. says

    bro, it didn’t appear on my site but there’s an empty space under my post…. PLEASE SHARE YOUR WISDOM, I’M NEW AT THIS BLOGGING STUFF

    • says

      I saw the white space but on checking your source code, all I see is a lot of line break tags. This sure works unless you’re doing something wrong. Maybe you can restore your backed up template and try again.

  68. says

    thanks bro, it realy work for me. since i hv been finding it difficult to install it in my site, untill i found it here, u realy solve my problem,

  69. says

    Hi there, just a quick question before I try to do this, will this tutorial work if I am using a dynamic template? And could you maybe just peek at my site to see if you think it will work with my current template. Thank you in advance.

  70. says

    why the facebook comment box only show in my old blog post didn’t show in my new post (post after add the comment box) Please help me ! thanks you! www.joliediary.com

  71. says

    Hi Don, thanks so much for looking at my site. I do have one more question, when I click your link to go to the Facebook Developer page, it is totally different from the page you show in your tutorial and there is no option to “create an app”. Has the link to the page changed and if so can you post the new link, thanks again.

    • says

      It’s gonna be different if you’ve never created an application before but you will eventually come to that page. The link is still the same but I guess you need to first sign up to become a developer.

  72. says

    Is there any way to have the facebook comments box appear if they are on the blog homepage and not on a post? You can only see the facebook comments option if you have clicked on a post link. thanks!

  73. says

    Hi Don, Your tutorial is really very clear and elaborative; indeed a well written article. I implemented it on my blog but it is not working. Just to mention my original blogspost address is paradigmwisdom.blogspot.com and I have a domain www.DailyTenMinutes.com. This domain is actually a mirror of my blogspot. While making my facebook app, I mentioned www.DailyTenMinutes.com do you suggest making a new facebook app with paradigmwisdom.blogspot.com? Thanks bro Junaid UAE

    • says

      Hi Junaid, Since the main site is www.dailytenminutes.com, the domain should be dailytenminutes.com while the URL should be http://www.dailytenminutes.com for the Facebook app. If you did all the steps and the comment box isn’t yet showing up, you can check step 4 and try other data:post.body tags in the template.

  74. says

    Hello, thank you for sharing this. I implemented in February and it was all working fine. However, today I noticed that the comments have shifted to the right and no longer fits in the FB comment “box.” Any ideas on how I can fix this? Thank you so much.

  75. says

    Hello Don, I have added your app on my site a long time ago and I didn’t have any problems. Although today I saw that the comment box moved right for no reason. Check it out if you please! http://www.asudotoi.gr/2013/04/blog-post_7834.html It is the same on every post! How can I fix that? Why is tha happening?

    • says

      I have the exact same problem… Its been working great until i noticed this today. The main outter box is still ok but the actual comment box inside it has shifted to the right and I can’t seem to find a problem in the code that could have caused this.. any help would be muchly appreciated. http://www.mybooksnthings.com

        • says

          Hey Don.. This has very nearly fixed the problem for me. The only thing now is that it isn’t quite centering it, it’s slightly to the left now and in the code the p align tag doesn’t seem to want to close. (it’s red) have been staring at it for about 40 mins now and can’t seem to see why. Don’t know if it’s just me. But ive fiddled with the width and got it to fit neatly. Thanks for fixing so quickly :0)

  76. says

    here is the solution to Error parsing XML, line 4, column 290: Attribute “xmlns:fb” was already specified for element “html problem visit this below link http://www.howtoread.co.in/2013/04/facebook-recommendation-bar-parsing-error-solution.html

  77. says

    Hey! Despite following the instructions properly, there is no notification for the comments posted. The first time I had installed, there was no notification but suddenly one day I started getting notifications and now they have stopped again. I removed it and did it again, but no notifications :(

  78. says

    Hi.. I’m not getting any notifications when someone comments anymore. Googled the problem, seems to be a very common issue but cant find a reason. It used to work fine. Any ideas?

    • says

      Perhaps it’s a problem with Facebook or something. It used to work but a lot of people now complain the notification isn’t coming anymore. I’m yet to find a fix for this.

      • says

        Yes. I was thinking the same thing as I haven’t come across any fix either. I’ll keep checking back here just in case. Hopefully, if it is a facebook issue then they’ll sort it out asap.

    • says

      That is only to promote the widget and help more people find it. Of course, you can remove it if you like but there’s no harm keeping the credit anyway.

  79. says

    Hello again Don, I changed my template and not working Facebook comment box anymore, i do all the steps again at new. Please help me again Don. THANKS

  80. Manal says

    this works only for one of my websites, for the other one it seems not be working, they are both on blogger….I don’t understand why

  81. says

    Hi, I did this and it worked but when I tried to implement update 1 to get the comment box on the homepage it didn’t work anymore. So I repasted the original code to get the box on the blog posts but it won’t work anymore even though I’m following the exact same steps. Any ideas? Sarah

    • says

      Hi, If you backed up your template before implementing the codes, I suggest you restore the backup and then try the steps all over again. Something must have went wrong while replacing the code.

    • says

      I figured it out. One of the lines of code I was supposed to find occurred twice. I was putting it in the wrong spot. Thank you so much for such a detailed tutorial!! Sarah

  82. says

    Hi, I used this code for my two blogs and it worked perfectly – until some time ago (I’m guessing a month or so). I get no notifications regarding new comments. Moreover, on the developer tab on my FB page I got some notifications about these apps not being compliant with some changes that will take place in July 2013. I have absolutely no idea what to do to fix the apps. It would be really lovely if you could take a look at it. Thanks!

  83. says

    Great post but not working for me either! Followed your instructions to the letter and no go. And somehow I have ended up with an AdSense ad embedded in my posts? WEIRD! BTW, I COULD get the comment box to show up as a banner gadget at the bottom of my home page or on the sidebars, but never under the posts. What gives? Any help.info is appreciated!

    • says

      I’m sure you’ve tried other things on your template that resulted in those Adsense ads, not the code in the post. I would never stoop so low as to embedded an Adsense code in my widget. Anyway, I checked your blog to see what’s stopping the comment from showing but I can see you have a different widget already.

  84. says

    comments widget should be awesome like yours because it helps in building relationship with readers and engaging conversation ,many of the top bloggers like you have written about it and also give importance to it.thanks for sharing.

  85. says

    This article is having uniqueness and is helpful . I have posted some tutorials on my blog and i hope, my tutorials will clear your remaining issues related to “Facebook Comment Box” .

  86. says

    Hello there I have the comment box on my other website which works fine. But I have tried to add it to the new website I have made and it does not come up for some reason, do you know why mate??

  87. says

    Thank you for such a thorough tutorial. However, I have an error that I cannot get around: “Error parsing XML, line 3, column 2: The markup in the document following the root element must be well-formed.” How do I fix this? Thanks.

  88. Maestro says

    Thanks for this tut. Ive done everything that you said but for some reason im not getting any notifications. Ive had few ppl comment on certain posts but I still havent been notified. The comments show up on the developers page when I check but as u already know it doesnt tell u on which post the comment was left. Any help to solve this would be greatly appreciated. Thanx again

    • says

      Hi Maestro, Like I replied earlier, this seems to be an issue with facebook as the notification thing was working fine till a few months back. I’m yet to find a fix but I’ll update this post when there’s one. Thanks.

  89. says

    Still looking for a solution to this problem i have with the comment box. I still havet received any notifications although ppl have comment. Can u please help me out bro! Thanx in advance

  90. says

    Actually am looking for this code from several days and through search landed on this great post. I applied it on my blog and its working. Any SEO benefits of this script??

  91. says

    hi I am Moroccan I am weak in English I made ​​all the steps but I see not comment on my blog facebook there’s nothing there help me stp blog www.footforyou.blogspot.com

    • says

      Hi Zakarie, Like I pointed out in the article, if you have more than one data:post.body tag in your template and the first one you pasted the code under isn’t working, try the next one or use post-footer-line-1

  92. says

    Thanks for this tut. Ive done everything that you said but for some reason im not getting any notifications. Ive had few ppl comment on certain posts but I still havent been notified. The comments show up on the developers page when I check but as u already know it doesnt tell u on which post the comment was left. Any help to solve this would be greatly appreciated. Thanx again

  93. says

    Hey Don, I found some more text rendering php scripts for the Facebook comment tool. It took a little tweaking but I finally got it working on our blog. Now it organizes each comment in a more ‘reader friendly’ format and displays the commenter’s current facebook photo. Again, I have this in a hidden div behind the actual comment box so only the search engines see it and index it for SEO. I saved this script in a new location and I’ll leave the old one up for those who are already calling it. The link to more info is: http://americanhookah.com/blog/get-seo-friendly-facebook-comment-text/ and the script is below: [code] [/code] Hope you find this useful.

    • says

      Hi JP, Unfortunately, the code isn’t showing. Again, isn’t it considered a shady SEO practice hiding things from regular users but showing it to search engines?

      • says

        Don, my understanding is that, as long as the content matches exactly, it won’t be an issue. I think the invisible div may flag the page for review when the webcrawlers hit it but, once it is examined, the search engines (Google specifically) recognize that the content is identical and that its purpose is to make the legitimate content index-able for their bots. I’m not sure why you’re having issues getting the content to pull. Here’s a link to a fully visible version of the script output and a fixed URL (the normal script uses a dynamic reference for the referring site): http://americanhookah.com/americanhookah/get_comment_text_display.php The original blog post that this is attached to is: http://blog.sukithookahs.com/2013/03/get-seo-from-facebook-comments.html . If you want, take a look at the output, then drop in a comment on the blog post, and reload the output page to see it in action. Maybe we could try an work on this one again – I thought we fixed it last time we spoke?

        • says

          I used it and it works great but I still feel uneasy cuz it’s hidden. I found a WordPress plugin that does this though: http://wordpress.org/plugins/seo-facebook-comments/

  94. says

    I used the codes you posted on the older post about how to add comments to your blog…I would like for fb to notify me when people leave comments. I followed your instructions above, but when I go to settings and choose myself as moderator the settings box just appears blank and only shows save changes or cancel. Do you know how I can get this to work?

  95. says

    Ignore my previous comment please. It seems that I have figured it out now. I wasn’t able to select myself as moderator from the link you gave above, but when I went to my blog and to the fb comments box if I clicked the settings there then it let me choose myself as the moderator. Thank you for all that you do!

  96. says

    Hi. I got this message while trying to save the template after placing the codes as you instructed: Error parsing XML, line 3, column 2: Content is not allowed in prolog. How do I fix it please?

  97. says

    I added this custom comment box to my new site www.malayaliscorner.com, but how can I hide default comment box? When I try to hide comment box from blogger settings, it also hides the fb comment box.

  98. says

    Completed all steps as per your post but my facebook comments are not appearing :( Not sure what is wrong… do i need to worry about the “App Details” status on the developers.facebook page … where it says “Approval Status: Unsubmitted” ?

  99. says

    Hello! I was wondering if you could help me out. I have used your instructions for adding the fb comments on my blog in the past and have been very successful. Now that I updated my blog and installed a new template I can’t seem to have the same success. My comments from blogger aren’t even showing up. Is there any guidance you could share with me please?

  100. says

    Don, i just opened a new wordpress blog and would love to integrate the facebook comment box. Is it possible to use the above codes on a SWIFT (free version) Theme. And you mentioned plugins for wordpress above, which is the best of the facebook comment plugins. I’m seeing a whole bunch here on the plugin installer.

    • says

      No, this won’t work for WordPress. I think there’s an official Facebook plugin that does what you want. Mayb you should try it out. http://wordpress.org/plugins/facebook/

  101. says

    Hi Don I was using your comment box for a while and everything was ok, but today it disapearred. The only thing left is the top part “thanks for comment”. I didn’t do anything with blog code since I installed it last time about 6 months ago. How could I fix this please? Many thanks Ieva

  102. Vivan Cosme says

    Hello every one there my name is Vivian Cosme from Canada I never believed in love spells or magic until i met this spell caster once when i went to see my friend in Africa this year on a business summit. I meant a man who’s name is DR ONIHA he is really powerful and could help cast spells to bring back one’s gone, lost, misbehaving lover and magic money spell or spell for a good job or luck spell .I’m now happy & a living testimony cos the man i had wanted to marry left me 3 weeks before our wedding and my life was upside down cos our relationship has been on for 3 years. I really loved him, but his mother was against us and he had no good paying job. So when i met this spell caster, i told him what happened and explained the situation of things to him. At first i was undecided, skeptical and doubtful, but i just gave it a try. And in 9 days when i returned to Canada, my boyfriend (now husband) called me by himself and came to me apologizing that everything had been settled with his mom and family and he got a new job interview so we should get married. I didn’t believe it cos the spell caster only asked for my name and my boyfriends name and all i wanted him to do. Well we are happily married now and we are expecting our little kid, and my husband also got the new job and our lives became much better. His email is :onihaspiritualtemple@yahoo.com

  103. navit says

    Hi, Thank you very much for the tutorial. I used it successful on my blog in the past, but now I’m trying to do the same for my friend and it doesn’t seems to appear on the blog. What should I do? Her blog is http://bisofcake.blogspot.co.il/ Thanks Navit

  104. Alfred says

    Hello Don, This method didn’t really work for me, here is what worked for me. I had to derive the plugin, copy and paste on blogger layout http://mynaijaplace.blogspot.com/2014/10/add-facebook-comment-box-to-blogger-layout.html

  105. Johnny Test says

    thanks just implemented this on my new blog www.Nigeriapromoblog.com, but how do i change that “We love your Comment” logo?

Share Your Comments & Feedback:

Please do NOT use keywords in the name field because they won't be linked to anything anyway...just use your real name. Let's try to have a personal and meaningful conversation.

Commenting Note(s):
To insert code into comments, use: [php]code in here...[/php]
Some HTML tags allowed: <strong>, <em>, <del>, etc. (Just don't overdo it, please!)