In 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site.Facebook Comments can bring better interactivity into your Blog. These comments will work like a Facebook Wall.This tutorial will help you to easily setup Facebook Commenting on your Blogger Blog.
You can add comment box in 4 easy steps -

  1. Hiding Existing Comments
  2. Creating Facebook App
  3. Add Application and Moderator Meta Tags
  4. Adding Comment Box To Blogger


Features:

  1. Threaded Comments i.e Reply Button To Comments.
  2. Comment Permalinks.
  3. Likability.
  4. Can Subscribe or unsubscribe to comments.
  5. Can Moderate Comments at one place.

Drawbacks:

  1. Won’t Sync with your Existing Blogger Comments.

Adding Facebook Comments To Blogger


1. Hiding Existing Comments

  • Before adding facebook comment box to blogger you have to disable your current blogger comments.
  • To disable comment form Go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.


    2. Creating Facebook App

    • Enter Some name for your App.
    • Agree to the Terms and click on the continue button.
    • If it issues a Captcha verification, type the Captcha and click on the Submit Button
    • Now you will be taken to a Settings Screen.


    • In the App Domain Field give blogspot.com (If you are using a custom domain give that) Give your Blog Address in the Site URL field under “Website” and Save The Changes. Copy the Application ID from the screen.

    3. Add Application and Moderator Meta Tags

    • Now go to Blogger Dashboard » Design » Edit HTML.
    • Tick the Expand Widget Templates Box.
    • Find <head> tag.
    • Add below code just after <head> tag.

    Modify the below code with the application id copied in setting page.

    <meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>

    Save your template.

    You should create the Facebook Application and the above fb:app_id meta tag should be added to your Blog. Otherwise you won’t be able to manage/moderate your Comments from a single Place(you will have to go to posts one my one and moderate and that too is possible only if you have added the fb:admins open graph meta tag).

    4. Adding Comment Box To Blogger

    Now you have to add the Facebook Comment Form to your Blog Template. To do that Go to Edit Template > Design > Edit HTML and click on the “Expand Widget Templates” checkbox

    Find the following code in your template(Use the keyboard shortcut Ctrl + F), and immediately below that paste the following code:

    <p class='post-footer-line post-footer-line-3'>


    If you can't find this try this one.

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


    If you cant find that as well, then find

    <data:post.body/>


    Paste the following code just below the line that you just found out

    <b:if cond='data:blog.pageType == "item"'>
    <div id="fb-root"></div>
    <script>(function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
     d.getElementsByTagName('head')[0].appendChild(js);
    }(document));</script>
    <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
    </b:if>



    • If you want to change the width of comment box then find this line width='450' in line number 9
    • If you want dark version of facebook comment box then find this colorscheme='light' and change light to dark in line number line.

    5. FB Namespace Declaration

    Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following XML namespace declaration will take care of that. To declare the namespace, find

    <html


    and change it to

    <html xmlns:fb="https://www.facebook.com/2008/fbml"


    Save the Template. This namespace declaration is necessary for all FBML widgets using the fb tag. So if you have already added the namespace declaration while adding some other FB plugin, then you can skip this.

    You are done.....
    Check your blog you should see the comment box on your blog.

    Displaying Facebook Comment Count (Optional)

    Use the following code in the post loop to get a Comment Count Display with a link to the comment form. This code should be added within the post loop. For example, this can be added below <data:post.body/>

    <b:if cond='data:post.isFirstPost'>   
    <script>(function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
     d.getElementsByTagName('head')[0].appendChild(js);
    }(document));</script>
    </b:if>
    <a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'></fb:comments-count> comments</a>


    If you are getting problem then post it below through comments.I'll glad to help you.
    Preference - Bloggerplugins.

    Post a Comment

    1. Thank You So Much Buddy :-) ...I'm glad u help me fix this,thank you so much again...

      ReplyDelete
    2. it keeps sayin "Error parsing XML, line 1028, column 366: The element type "br" must be terminated by the matching end-tag "
      "

      ReplyDelete
    3. I've fixed it check it again

      ReplyDelete
    4. Its not working for me now, as i changed my template, it got vanished, and now im trying but it aint working, need help, waiting for your reply..

      ReplyDelete
    5. @desirockers - I have checked my codes again and they are working successfully please try again.

      ReplyDelete
    6. i tried buddy, will you please tell me anyother way to get it work, it sure isnt working for me, i tried it many times..

      ReplyDelete
    7. Ok now try this.
      Backup your template.

      1. Add below code just before </body>

      <div id="fb-root"></div>
      <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      2. Now add below code just below <div class='post-header-line-1'/>


      <div class="fb-comments" data-href="http://www.helperblogger.com" data-num-posts="1" data-width="470"></div>

      Replace helperblogger with your domain change width 470 as you wish....

      ReplyDelete
      Replies
      1. I Want To Show Facebook Comment For Blogger Post..........

        Email: sahirajaan@gmail.com
        Please Help Me.........Please Please Please .........

        http://freelibrarybook.blogspot.com/

        Delete
      2. Hi ! I trried All the steps that u told but nothings happening :(

        Delete
    8. nope, still no luck, this last one doesnt need any APPID ?

      ReplyDelete
    9. Soory, that was last one.I checked my code again in another template and its working.Please provide me your blog URL.Your profile is unavailable.

      See this image - http://i.imgur.com/c5qTF.jpg

      ReplyDelete
    10. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
      html5 video player| html5 player

      ReplyDelete
    11. I tried this on my other blog and it works. But on the other blog i have it doesn't. Is there a code that blocks this plugin? As per Facebook developer site fb-root shout not be hidden... is that the root of the problem? i'm trying out this over and over again but i really doesn't work on m other site :(

      ReplyDelete
      Replies
      1. Can you provide the URL of your that specific site ?

        Delete
    12. I am really impressed by this amazing and informational site.
      Facebook Application Developers

      ReplyDelete
    13. This comment has been removed by the author.

      ReplyDelete
    14. Thank You So Much..:)
      its working to my blog now
      http://photomaga-zine.blogspot.com

      ReplyDelete
    15. It doesn't work for me. And i think sth went wrong with number 3 bcoz i found this but NOT only <html

      <html 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'

      ReplyDelete
    16. Please help. What do i have to do?

      ReplyDelete
      Replies
      1. Just replace

        <html

        with

        <html xmlns:fb="https://www.facebook.com/2008/fbml"

        don't change any other things..

        Delete
    17. Worked like a charm but how do I get notification when someone comments?

      ReplyDelete
    18. Hi Rahul

      Nice post, I just wanted to know, if we use this what about the present comments , will they gets replaced ??

      ReplyDelete
      Replies
      1. yes your current comments will replaced....

        Delete
      2. Does it means it will get removed forever.

        Delete
      3. No they will get back as soon as you remove facebook comments.

        Delete
    19. Need some help here.
      I have been trying to get this plugin working for days now. Not sure if I messed up the HTML but I just can't get this to work.
      Please help. Thanks.

      URL: http://marchformarsh.blogspot.com

      ReplyDelete
      Replies
      1. Hey I have just visited to your blog and the comment box is working then whats the problem? If you have faced any problems then I am sorry :( I think you have fixed it :)

        Delete
      2. I went on the facebook developers site and got it working. But I would like for each comment box to be different, how do you do that?
        And how do you keep the comments in reverse chronological order?
        Thanks.

        Delete
    20. Can u please visit my blog and say how it is ?

      www.netinfozblog.in

      ReplyDelete
      Replies
      1. Of course bro. why not.I just visited your blog and it is really amazing also the design of your blog is neat,clean and simple :) specially I like footer section.Keep it up.

        Delete
      2. Great! How to change the language?

        Delete
    21. not working.what to do
      http://howtogetmoredollar.blogspot.in/

      ReplyDelete
    22. Help! When I change

      <html

      with

      <html xmlns:fb="https://www.facebook.com/2008/fbml"

      I couldn't save my template. Does this work for all templates or for a specific template only?

      ReplyDelete
      Replies
      1. You template already have this,so avoid this and follow the next steps.

        Delete
    23. This comment has been removed by the author.

      ReplyDelete
    24. Cool!!!
      Thnq so much 4 this wonderful post...

      I had some trouble with the comment count... So it took some time 2 correct it..

      Athira

      ReplyDelete
    25. It work!!!! thanks xo much dear!! www.kakagod.blogspot.com/2012/08/chris-brown-mixtape-sht-music-video.html#.UCB2xuErPsM

      ReplyDelete
    26. Plz help with the notification...I need the notifications of the comments made by the readers. Plz help..

      Athira

      ReplyDelete
      Replies
      1. Hey I have no any idea about notifications also I have never used FB comment box but I will try to find out about this.I think there is no any notification system as Disqus and IntenseDebate.

        While creating a APP ID for FB comments use registered FB account i.e. which is linked to your other mail account.

        Delete
    27. @ admin
      I didn't find any of the codes above in step(4) And i tired codes in your editor it works find but it doesn't so up comment box on my site
      Really Need Help. :(

      My Page: www.nepcan.net

      ReplyDelete
    28. hai bro..
      i cant moderate comments what should i do?

      ReplyDelete
    29. I tried it but doesn't work... can you help? website BoomStocks.com

      ReplyDelete
    30. thanx man really usefull and without any error done to mine blog thnxz

      ReplyDelete
    31. Worked perfectly. Thank you so much !!! ^_^ Nice job!
      http://mylikeszoom.blogspot.com

      ReplyDelete
    32. I followed every instruction but it doesn't appear on my blog. :( Need help.

      ReplyDelete
    33. I so just want to thank you for this wonderful post! it's working on my blog http://lailigurl.blogspot.com .. :)

      ReplyDelete
    34. brother any ideas to show Facebook recent comments in blogger widget..?

      ReplyDelete
    35. it doesnt work ... www.timeline-covers.org , can u help me out?

      ReplyDelete
    36. I actually liked reading your writing content as it is very educational. I recommend you to submit blogposts even more frequently.
      web applications

      mobile applications australia

      mobile application development

      ReplyDelete
    37. Hi, thanks a ton, finally i got a fb comment box where there was no ad of other person, rest 2-3 comment box which i installed were having links and/pics which had logo of thwir own blog/website.

      ok now my fb comment box is working but i have a big question to ask, hope u solve my query...

      this is the link to my blog: http://ultimatesqs.blogspot.in/

      when u go to any individual post on my blog, like for example this one: http://ultimatesqs.blogspot.in/2013/02/blog-post_3873.html

      as u can see, i get my fb comment box below the pic and below fb comment box i get my social sharing buttons, my problem is that the social media sharing button comes below fb comment box whereas i want first social media icons and below that i want fb comment box, as i dont know anything about coding can u plzzzzzzzzz reply in as simple steps as possible, plzzzzzz my e mail id is vishalrpanchal@yahoo.com desperately waiting for ur reply...

      ReplyDelete
    38. A woman takes a lot of pride in her breasts, because they help her to feel naturally beautiful and stylish as a grown woman. Triactol is a breast enhancement serum that acts on the tissues surrounding your breast and gives them a younger appearance. Large, firm, perfect and perky breasts that give a natural look are the dream of every woman. There are different methods used for the breast enlargement. Triactol bust enhancement serum has gained a larger number of fans on the market and the demand for its use is constantly growing. Triactol serum renders outstanding and guaranteed results and offers you a 60 days money back guarantee as well. No other breast enhancement cream or any such product offers this kind of guarantee to the users. Triactol works by increasing breast tissues. In order to make breasts naturally larger and perkier, the growth of the tissues are being controlled the natural way. Throughout any Triactol review, you will notice that there are more then plenty of benefits from using this serum, because it is natural and it provide the scouted results. Triactol serum utilizes quality grown bright pueraria mirifica, which functions the most efficient. Triactol is the kind of effective serum that can make your bust size grow and grow, seemingly all on their own. Sure, the process will be a little bit more drawn out than a nip and tuck, but you’ll be protecting your future health while also improving your appearance. This is the kind of solution that you can count on, and a very real reason to buy Triactol, For more review about TriactolBust Serum, Visit http://www.triactolplus.com

      ReplyDelete
    39. Hello Rahul,
      as you can see it works pretty good http://usteu8.blogspot.com/.
      My question now. I left the blogger comments embedded and till the update it shows me both boxes.
      Is there a way to keep it? That both comment boxes are always available?
      Thanks in advance mate.

      ReplyDelete
    40. thanks ,i tried many off blog tutrls but this is only worked.wooooow thanks fish,this is exslad wrk :)

      ReplyDelete
    41. 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 (search engines won't crawl iframes) 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(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)

      <!-- 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='' type='text/html' width=''>

      </object></div>

      <!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->


      One final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...

      ReplyDelete
    42. thanks.. bro.. it's working .. gr8..
      but yar.. i need one sliding comment box..i mean.. it must be always on the top in the lower right corner..
      similar to fb chat box..
      possible????

      ReplyDelete
    43. how do i enable it for mobile view?

      ReplyDelete
      Replies
      1. I also want to use in blogger mobile template.... But how???

        Delete
    44. Thanks for useful info. Is there a way to make facebook comments box always visible after each article? at the moment my readers have to click on 'no comments' note to see it... :( http://www.mylifemypassion.com/

      Thanks!

      ReplyDelete
    45. it worked for me but i have no notifications ...............................please help!!!!!!!!!!!!!!!!

      ReplyDelete
    46. It's come to my attention that the Friday Fill-Ins is apparently attracting spammers who are trying to lure participants to their blog. To counteract this, if your Friday Fill-In post isn't at the top of your blog on Friday, your link will be deleted. I will be checking this each Friday. Also, the link-up on Mr. Linky will close on Saturday from now on. Thanks for your understanding
      READ FULL STOry

      ReplyDelete
    47. I think the above code is to big and almost not working properly as dynamically different for each blog post. By implementing this code one get same fb comment box for each post. In which all comments are visible for every post and that is not good.

      By searching over the net for a long time I found only one site from something 30 sites taking
      place in top 5 search results. It's an usual thing because this trick to change comment box
      dynamically is a big problem to get rid due to cross site scripting (blogger has its own API and
      fb also has its own). Before last one search i got every searched site with normal fb comment box.

      It is so cool because here no app id required. It uses dynamic xid to get different fb comment box for each post.

      you can get the solution from this site.>> http://pitora.blogspot.in/2013/04/add-different-fb-comment-boxs-for-each.html

      ReplyDelete

    48. Good blog and the contents are really nice, thanks for sharing here with us.

      parking management
      parking guidance
      parking counting

      ReplyDelete
    49. Now a days most of the peoples are using the Facebook comment box, most of the bloggers are don't have the Facebook comment box. I think your article is great resource for those kinds of peoples. Chennai Hospitals

      ReplyDelete
    50. thanks for all your effort salute

      but a small irritation

      i am not able to copy ur code from your page

      ReplyDelete
    51. Find your dream homes through the experts in Real Estate sector on : WWW. PropertyDealerOntips.COM 01165556555
      Finding experts and getting the best consultancy in Real Estate becomes so easy now, you say and we give….Just call on 01165556555 and get the details for FREE on your phone right away.

      ReplyDelete
    52. It works but if I hide bloggers box, facebook box disappear too. Any help?

      ReplyDelete
    53. this trick is not working....!

      can u help me?

      ReplyDelete
    54. Your essayis incredibly instructional! Looking at your work has enlightened me. Learned a lot from it. I will store your website and will continue to browse your upcoming content. Good! Thanks!

      ReplyDelete
    55. This comment has been removed by a blog administrator.

      ReplyDelete
    56. thank you for your helpful discussion. i have used simicart, i think it is the best magento mobile app builder. simicart adds value for storeowners by helping them create a native magento mobile apps for online business. so, you don't have to be a coder to build a powerful magento mobile app.

      ReplyDelete
    57. This comment has been removed by the author.

      ReplyDelete
    58. Very good post! We are linking to this great article on our website.
      Keep up the great writing.

      ReplyDelete
    59. wonderful information, I had come to know about your blog  from my friend nandu , hyderabad,i have read atleast 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards, paytm promo code

      ReplyDelete
    60. wonderful piece of information, I had come to know about your blog  from my friend Nandu , Hyderabad, I have read at least 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that I had been looking for, I'm already your RSS reader now and I would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards, paytm promo code

      ReplyDelete
    61. Mobile aplication testing is the process by which the application software is developed for the hand held mobile devices mainly for its functionality.
      Mobile Testing Training in Chennai | Mobile application training in Chennai

      ReplyDelete
    62. It is a nice page provide nice techniques of allowing the blogger to get hited with facebook.I really appreciate your manner of organising everterm with advantage and disadvantage.You can also visit herehttps://www.technocrab.com/mobile-app-development-company.html

      ReplyDelete
    63. Software testing is to be done for developing process.For testing a software,testers use test plans,test cases,etc,to ensure the completeness of testing.Testing field has more job vacancies IT sectors.
      Regards,
      Software Testing Training in chennai | Testing Training in chennai

      ReplyDelete

    If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

     
    Top