How to Add Facebook Comment Box to Blogger Blogs


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-For-Blogger

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:

add-facebook-comment-box-to-blogger

3. A new app id will be given to you like the one you’re seeing below, so note down your APP ID.

Facebook-comments-widget-blogger

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  : &#39;YOUR_APP_ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).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 == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px;'>Facebook Blogger Plugin by <b><a alt='blogger templates' href='http://www.justnaira.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>JustNaira.com</a></b> | <b><a alt='Facebook-Comment-Box-widgets' href='http://www.justnaira.com/2012/07/how-to-add-facebook-comment-box-to.html' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Get Widget</a></b></div></div>
</b:if>
  •  If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'

You can keep Facebook Comment box and Blogger default comment box. But in case you want to make Facebook comment box your default comment box, go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.

Don’t hesitate to use the comment box in case you encounter any difficulties.


I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Share on Facebook22Tweet about this on Twitter2Share on Google+1Pin on Pinterest0Share on StumbleUpon0Digg this

Comments

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

  2. Hey, I cant find the tag

  3. Kristiiina says:

    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.

  4. I tried all the steps, it keeps telling me “template-design only available for version 2 and above”. What’s wrong???

  5. mnenigeria says:

    I tried all the steps, but my comment widget did not show , What Might have gone wrong . Thanks for ur help

  6. 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?

  7. I did all the steps then it work thanks :)
    http://www.imadeonline.com

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

  9. thank you so much sir.. http://www.whispernaija.com

  10. thanks

  11. Ibrahim Ali says:

    Thanks Mr. justnaira i am successes to do this.

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

  13. cool thanks..-

  14. বিন রফিক says:

    Thank you a lot. I was looking for it

  15. @Easy Rider Jacket, you are welcome.

    @Angie Salinas-Benjamin, What type of template are you using?

  16. Angie Salinas-Benjamin says:

    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
    html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’t
    Tag head

    wonder if the b: version thing is supposed to go…please help me :(

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

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

  19. 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 “/>”

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

  21. customdissertationhelp says:

    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

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

  23. Hi, on #6, I can’t find any of those tags. My blog is at bachelordaily.com. Thanks!

  24. @Sick ßookies, you can add the code below the

  25. Sick ßookies says:

    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

  26. ileowo kikiowo says:

    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

  27. worked for me after 2 attempts! Thank yoU! :))

  28. pandora charms says:

    That was a good tutorial of twitter comment box

  29. saiful Islam says:

    Good work man.can you post a tutorial about how to add javascript before comment and below the header.Thanks

  30. You’re all welcome.

  31. jasontoheal says:

    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.

  32. Filex Mmari says:

    thanx very mch

  33. That was a good tutorial of facebook comment box

  34. @Barry Harry and windows loader, glad the post helped you.

  35. windows loader says:

    Thanks Justnaira , I'ts working :)

  36. @Admin I see that and now I know how to do it thanks for the link. :)

  37. @Brian Harry, this tutorial is different from adding Facebook like. You can check this Facebook Like Box Tutorial

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

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*