Home » Blogger » How To Add Facebook Comment Box For Blogger

How To Add Facebook Comment Box For Blogger

Posted on by

It’s getting harder and harder to separate blogging from facebook as it remains one of the top channels to drive traffic to your blog. Using facebook comment on your blog has a makes your blog more interactive and drives in more traffic as commenting on your blog also shares the topic on the visitor’s facebook wall.

This tutorial explains how to add facebook comment box to your blogspot blog easily.

1. Log in to your blogger account and disable blogger default comment.

Settings > Comments

Choose Hide and save your setting.

This is optional though, it depends on whether you intend to have two comment forms on your blog.

2. Next is creating your facebook application. Click here to create a facebook application.



i. Input the Application name

(ex., The 9ja Geek’s Journal. This makes the the post on your visitor’s wall look like via The 9ja Geek’s Journal)

ii. Check Agree and click on Create Application. This takes you to the basic settings page.

iii. Change your Icon . (it must not b more dan 16*16)

Upload your own Icon. (it must not b more dan 75*75)

Then Scroll down and save changes

iv. Copy your App ID to a note or notepad



v. Click on Edit Settings and select Website.

vi. Write your site URL in full ending with a slash /

(ex. http://www.doncaprio.com/ or http://myblog.blogspot.com/

vii. Input your site domain

(ex. doncaprio.com or blogspot.com if you’re publishing using blogspot sub domain)

3. Next is adding the required codes to your blog.

i. xmnls attribute

ii. SDK script

iii. Comment form code

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

i. XMNLS ATTRIBUTE

-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. SDK SCRIPT

- Search for this code:

<body>

-Immediately after this, add:



<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 change ‘YOUR APPLICATION ID HERE‘ to the application ID you copied earlier!

iii. COMMENT FORM CODENow here comes the last part of the steps.

-Press Ctrl + F and find <data:post.body/>.

- Immediately after this, paste the following code:




<div style='border: 1px #3b5998; background-color: #eff3fa;'><div align='center'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div><div align="right"><a href="http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html" target="blank"><small>[Get Facebook Comment For Blogger]</small></a></div>

</b:if>

</div></div>

Change the number (450) written in red to fit your desired width.

Also, if you’re using a magazine style template, you might have more than one <data:post.body/> in your template. You must locate the one that contains the post body on the post page.

If you’re confused about the right <data:post.body/>, search for this code instead:




<div class='post-footer-line post-footer-line-2'/>


Paste the comment form code right below it.

Update

If you’re using a dark template, the above light comment box might not be the best for your blog. You might try the dark facebook comment box below.


<div style='border: 1px #000000; background-color: #000000;'><div align='center'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div><div align="right"><a href="http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html" target="blank"><small>[Get Facebook Comment For Blogger]</small></a></div>

</b:if>

</div></div>

Share this post if it’s helpful and leave a comment if you encounter any problem trying to make it work. It’s working perfectly as you can see the comment box right below this post.

Get free daily email updates!

Follow us!

Tags:

facebook comments for blogger, facebook comments on blogger, facebook comment for blogger, facebook comments blogger, add facebook comments to blogger, facebook comment box for blogger, facebook comment blogger, facebook comment on blogger, blogger facebook comments, blogger facebook comment, how to add facebook comment box to blogger, how to add facebook comment to blogger, facebook comment box, facebook comment button, comment box for blogger, add facebook comment to blogger, how to add comment box in blogger, facebook comment in blogger, facebook comment box blogger, add facebook comment box to blogger
avatar

Don Caprio

Don Caprio is a part-time blogger living in Nigeria and apart from blogging, his other obsession is hip-hop music. :) You can follow my updates on Twitter or add me to your circles on ! You can as well grab my feed and get updates through email.

More Posts - Website

Facebook Comments

Facebook comments

Related posts:

  1. How To Add Facebook Like Button To Your Blog
  2. How To Add Automatic Post Summary For Blogger
  3. Numbered Page Navigation / Pagination For Blogspot/Blogger
  4. How To Change Blogger’s Post Title Format
  5. How To Install Blogger Templates
  6. How To Add Email Subscription To Your Blog
  7. Change Your Blogger’s Blog Favicon ( site icon )
  8. How To Remove Blogger’s Top Navigation Bar
  9. Add Email Contact Form To Your Blog
  10. Colors Idea 2 Column Blogger Template

69 thoughts on “How To Add Facebook Comment Box For Blogger”

  4. We endeavour to provide high level function to local and national searches for the all users, the general public, local government, central government, private businesses and charities so they can source the right information and contacts easily and for free.Hire services

    Reply ↓

  5. thanks a lot …it really works….all of them who don't believe it just check my blog….thanks againg and a kiss for you

    Reply ↓

    • can you try this : In New Blogger Designed templates the same code looks like this,

      <body expr:class='"loading" + data:blog.mobileClass'> search for that as i tried it and works for me then but now that i redesigned my blog it doesn't work.. kindly reply if it works for you.

      Reply ↓

  17. So I actually went to the site for the berea post. This is a borderline case. She is coming close to being abusive with her posts. I understand not liking a mayor. The personal attacks on the site seem to go too far. business logo design

    Reply ↓

  24. It is a rather useful article. It is insightful so you have not surprisingly done your study ahead of producing that post. I will need to return and observe your forthcoming articles or blog posts.

    Reply ↓

  26. Hey! I cant find <data:post.body/> code in html mode. other all things are ok. pls help….
    i found similar code""" <title><data:blog.pageTitle/></title>"""".
    pls pls help me……………

    Reply ↓

  28. That's a very nice and so much informative article. I really impress with this article. I get many information from there. And now i often visit on that site. So please keep posting me such a informative article.

    Reply ↓

  29. @Webiadenmard and Rugged LCD. I'm glad you foud the piece of information useful.
    @Silu. I'm not sure you'll lose your old comments.

    Reply ↓

  42. I have added this in my blog. One of the problems I encouter is that, now how can i know if someone has commented in one of our post ? even in facebook there is no notification?

    any suggestion ?

    Reply ↓

  45. Hi Don Caprio, I followed your intructions and it worked with my Blogger-hosted site. However, the comments box is not appearing on my pages, only on regular posts. Kindly help me find a way to make it appear on the pages as well? Thank you in advance.

    Reply ↓

    • Visited your blog just now and noticed that. I cross-checked and tested the code now on my old blog now just to see if it’s a mistake on my part but it worked quite well. You can go over the steps and try again, Phineas.

      Reply ↓

      • again… Nothing else but link to this post. Well, as other commenter above, couldn’t find “” and I added your code BEFORE “” . I tried also by adding the code after “” and didn’t work too. Finally, “” appears twice and there is no “” but something similar. Any clues? If u like, I can send you whole template code with e-mail . Worst of all, I lost “Like” button

        Reply ↓

  49. That’s great. I will apply this for my blogger blogs now. Disqus is still the best commenting system.After reading so many nice comments, I will have to try it out soon. Thanks!

    Reply ↓

  53. I tried searching for this in the past in google, and found really horrible tutorials, I mean they were clear and all but DIDN”T WORK. What’s the point. yours is really fantastic. because it’s so easy to follow and it works. For your info, I have also ‘digg’ your post !

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Commentluv Enabled