How To Add Facebook Comment Box For Blogger

Hi! Thanks for visiting. This post has been update and I recommend you use the updated version of Facebook comment for blogger with notifications!

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://geek.ng/ 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://geek.ng/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://geek.ng/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.

. Filed Under: Blogger




Author: Don Caprio

Don Caprio is a full time blogger / web designer living in Nigeria and apart from blogging, my other obsession is music. I'm a self-confessed Tupac fan, an iOS lover, an Android user, a Windows 8 power user, a writer with a 5-year old unfinished novel... and the list goes on and on. You can add me on Facebook, follow my updates on Twitter or add me to your circles on Google+! You can as well grab my feed and get updates through email...

  • http://www.facebook.com/pages/MochaBelle-Lifestyles-of-the-Rich-in-Melanin/174094565978936 MochaBelle: Lifestyles of the Rich in Melanin

    Great post! Thanks for sharing…

  • http://www.facebook.com/belogfadah Belogfadah Sempoi

    this is great.

  • http://www.facebook.com/doncaprio Don Caprio

    you're much welcome.

    • http://www.facebook.com/abesin.ademola Abesin Moshood Ademola

      Baba why dont u want to talk to me brov please now talk to me

    • http://www.facebook.com/doncaprio Don Caprio

      you sent me a message? i swear i didn't know :( where?

    • Ans

      I followed all the steps but nothing appears an anybody help?

      • Don Caprio

        I have a feeling you’re getting it wrong at the last stage. How many do you have in your template?

        • http://bollywoodhdpictures.blogspot.com shan king khan

          when i do your complete instructions then page show me this ?

          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 “htmlxmlns:fb” must be followed by either attribute specifications, “>” or “/>”.
          Error 500

          sir plz tell me what do i do now

          • Don Caprio

            I checked your blog just now and saw you got it working already.

  • Shalini

    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

  • Jeni

    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

  • http://www.facebook.com/sanu.sansar Palpali Milan

    thanks buddy

  • Nuwan Srimal

    great..you are awesome..thanks dear.

  • http://www.facebook.com/rafuzii Rafuzii Rafiz

    it work but the comment in light scheme…can you give the code for dark scheme?

    • http://www.facebook.com/doncaprio Don Caprio

      alright, buddy. i'll update the post later today that later today

  • Alicia

    nice one .. really like it … and helpful .. aw sum comments as well

  • Technosalons

    Nice explanation!!! I really want it and now get it so thanks…..// :-)

  • http://www.facebook.com/people/Hamza-Siddiqui/100001008724229 Hamza Siddiqui

    Click To Earn From Facebook.

  • http://www.facebook.com/iodinaka Ikenna Odinaka

    Nice tutorial man. Thanks for sharing.

  • http://www.facebook.com/hemendrakumarsaini Hemendra Kumar Saini

    Hey Don, Just want to how do you reply to the comments on this blog. you came down to blogger or you directly reply from facebook.

    • http://www.facebook.com/doncaprio Don Caprio

      I often come down here directly, not from facebook.

  • http://www.facebook.com/wamaitha.njoroge Wendy Njoroge

    Hello, I am unable to get the code <body>. Please help

    • http://www.facebook.com/iamsherwood Mark Sherwin Agbayani

      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.

  • http://www.facebook.com/iamsherwood Mark Sherwin Agbayani

    uhh..<body> is missing.

  • Anonymous

    the best tool for hack facebook account and many things is here!
    :http://facebookhackcode.blogspot.com/
    the rest on the web is totaly fake!

  • Adrian

    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

  • MsEthnicMinorityUK

    I followed all your instructions and it doesn't work for my blog. I did a preview and nothing shows

  • Don Caprio

    I suggest you start all over. It still works cuz it's the same code used on this blog

  • juleya

    Action Web Group is dedicated to providing reliable and professional web hosting solutions.web hosting We offer the RubberBand Plan,domain name registration an expandable shared web hosting plan for disk space, bandwidth and more.

  • Rohan Sharma

    working fine….thank you..

  • http://www.facebook.com/Tonikct Varun Dadhich

    its nice………

  • http://www.facebook.com/muruchandru Muru Chandru

    wow… its work perfectly…

  • FluidJoint

    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.

  • Don Caprio

    @FluidJoint Thanks for the compliment :)

  • Ashish Musani

    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……………

  • webiadenmark

    I think very useful information. sure read again.

    crm support

  • Rugged LCD

    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.

  • Don Caprio

    @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.

  • http://www.facebook.com/people/Eli-Israelov/100000190183689 Eli Israelov

    Thanks Max, I'ts working :)
    But how do I follow the comments? I don't see it in my profile.

  • http://www.facebook.com/nishanthathilakawardana Nishantha Thilakawardana

    thanks

  • nishuoc

    thanks

  • WormMom

    Thanks a lot. I went around a lot of posts and this one makes mine work. The only difference between this one and http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/ is your last line of div-class='post-footer-line post-footer-line-2'. My blog has two lines exactly the same. If I paste code after the second line, it never works.

  • ……

    @worm use d second procidure

  • Data Center India

    i appreciate that post i like it

  • Alif Azhar

    Man, I work but why I not get any of notification when someone comments at my blog? please answers @ email me please malik171@yahoo.com.

  • http://www.facebook.com/MrFendy920 FeNdy Deja’Vu

    Thank You

  • Anonymous

    . i CANT SEE THIS POS

  • http://www.textilelearner.blogspot.com/ Mazharul Islam Kiron

    excellent article. very help full……..

  • http://kraizeetales.blogspot.com kraizeewhiz

    i tried all this. but it didn’t work,:(

    • Don Caprio

      You’re getting something wrong somewhere. This is exactly what I was using on my old blogger site – http://doncaprio.blogspot.com

  • http://www.pakmuxicbox.blogspot.com zeeshan iqbal

    Hi, I have applied all the steps on my blog I am having a magazine template but its not working can you plz help !

  • http://cheaptaobao.blogspot.com taobao

    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 ?

    • Don Caprio

      This doesn’t support that. You can only get notified of replies to your own comments.

  • http://laughfacebook.blogspot.com/ LaughFacebook

    Worked for me thank you very very much:-
    http://laughfacebook.blogspot.com/

  • http://what-latest.blogspot.com what-latest.blogspot.com

    Hi Don, thanks for sharing.
    Bye the way i am a newbie blogger. i come here for the very first time through google search result. I will be very happy if you visit my blog and drop your comment.
    Heartly thanks to you…!!!

    • Don Caprio

      You have a nice blog there and it doesn’t look like a newbie’s blog. Keep it up!

  • http://myvirtualabode.com Ely

    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.

  • http://www.daniel-gossage.com Internet marketing boston

    I do not think that there is any more controversial topic in internet marketing and SEO in general than how to backlink. So many of the newcomers get completely stuck on the…

  • http://www.bollywoodhdpictures.blogspot.com Saba Anjum

    sir please tell me it is not working ? what do i do now please tell me this is my loving blog . If you help plz then do for me ? plz

    http://www.bollywoodhdpictures.blogspot.com

  • Phineas

    I followed all the steps, but the only thing appears is link to this post. What’s wrong? Check http://mikro-trompaktiko666.blogspot.com/2012/03/ass-roll-2012-2013.html

    • Don Caprio

      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.

      • Phineas

        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

        • Don Caprio

          Lost like button? That’s serious. You can let me have a look at it. caprio at capriofiles dot com.

  • http://abercrombieukonline.co.uk abercrombie uk

    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!

  • http://techinfobot.blogspot.com/ Omar Khalid

    I used these steps. but the problem is, i can’t see any comment box in my posts. not even the blogger’s default one. i selected the comment location ‘embedded’ but still no result. can you help me?

  • http://www.socialcubix.com Facebook Development

    I am impressed that this site is really gonna share this site to my friends.

  • http://www.pk5.net xxx

    links are disappeared. But now they are working fine. however, If you does’t like to Use the Default Pagination links for Comments pages this widget is so helpful to you.

  • http://hollywoodplayerguide.blogspot.com/ Hollywood Player Guide

    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 !

    • http://www.doncaprio.com Don Caprio

      thanks for the positive feedback! Glad it worked for you. :)

  • http://www.balinesehotel.com Bali Hotels

    Very useful post, thanks for sharing

  • http://www.windowsloader.info/ windows loader

    thank for share this tutorial, I’ts working :)

  • http://www.internetdreamz.com Guppu Boss @ InternetDreamz

    tried this tutorial but stuck on the 2nd step. i think facebook apps creating procedure has been changed. Can you update the tutorial Don?

  • http://www.siberrygames.com Berry

    nice bog guys,….
    article and your post is the best…
    visit http://www.siberrygames.com...
    if you went to watch online movies….
    freee

  • webmaster

    Hello
    I need a good, reliable Cloud Server. I can use personally and recommend to others. Any ideas?

  • http://bannersbrokerworkers.blogspot.com banners broker

    Very nice and useuful tutorial !
    Thank you !
    bannersbroker

  • http://www.a1z3.com hms

    wow… its work perfectly

  • http://xp7driver.blogspot.com/ Engr. Jamal

    Boss Excellent Post………………………….

    • http://www.doncaprio.com Don Caprio

      Glad you found it useful, bro. :)

  • http://www.afacebookproxy.com Facebook Proxy

    Your articles are purely enough for me.

  • http://www.bigrock.com/domain-registration/ Bigrock Domain Registration

    Nice post its quite useful, i have just started my own website and it looks like this will help a lot.

  • http://meditationuk.blogspot.com/ sheyna Heart

    I have a project that I am just now working on, and I am sure this will help me a lot and I have been looking for such information since from few days, Thanks!

  • http://meditationuk.blogspot.com/ sheyna Heart

    Blog and blog would be of advantage, Thank you for providing information about the update.

  • http://www.adetechblog.com Adesanmi adedotun

    I think I have the preference of this facebook comment over Google + comment box

  • http://www.fuoye.edu.ng omowumi fabamise

    Great blog. 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!

  • http://zibup.com midhunraj

    Nice tutorial brother, but I the code for dark template is not-so cool :)

    • http://www.doncaprio.com Don Caprio

      It’s a matter of choice, bro. Glad it worked for you. :)

  • http://www.carilagump3.com museluv

    great!,, but no body comment at my blog :(

  • http://www.problogtricks.com chamal

    Great.. Should i want to use Application ID ?

  • http://facebooksteal.com/ piratage facebook

    I agree. You have made the nice blogs with the great info in the contents.