August 6, 2013

How to Add Facebook Comments System in Blogger

In the past, we have already covered How to Add Google+ Comments, Disqus Commenting system and LiveFyre Commenting system in Blogger. Recently, one of our users asked us how to add Facebook Comments in Blogger? Today in this article, we will show you How to Add Facebook Comments System in Blogger. We will also discuss the Pros and cons of using Facebook Comments on your website, so that you can make an ingenious decision whether to for it or not.


Advantages of Facebook Comments in Blogger

Facebook is the most viral social networking site, so it might be the reason why one should always think about making use of all the features that it provides to the publishers and developers. However, I would not push anyone to start using Facebook comments without knowing its advantage. Every site has their own priorities and concerns but for the sake of an ongoing argument, let us first take a look at the following pros of adding Facebook Comments in Blogger.

Whenever someone likes or reply to their comment, Facebook sent an automatic notification to user.  The author or other users might also receive the same notification if they are following the topic.

Unlike Google+ and others, it provides multiple commenting options. For example, if someone is not a Facebook user then he can use his Yahoo, AOL or Outlook id to comment on your website, so your visitor never gets locked out.

Whenever a registered user is caught spamming, Facebook automatically treats him with a security code while the rest of the loyal visitors keep on commenting without any worry. If that spammer didn’t even stop then, Facebook holds the authority to disable him from commenting.

Disadvantages of Facebook Comments in Blogger:

You are totally depending upon Facebook. Though it is a reliable brand, but sometime minor glitches happen. What would you do if Facebook suffers some down time. Since, all the scripts you are using is hosted on Facebook, so you never know when the comments get disappear.

Nonetheless, it is unlikely to happen because Facebook is a well-known site with quality backup server. However,  you never know what would be the next thing to come.

How to Add Facebook Comments in Blogger: 

Step#1: Creating a New Application:
The First thing you need to do is to create a separate App ID for your application and that can be done easily through Facebook Developer. Login to your Facebook account and go to Facebook Developers website. This places allow Developers to manage their apps hosted at Facebook, click on Create New App button.
A Small pop out will appear which would ask you to insert little information about your application. There are two fields, write the App name and press the continue button.
Now you will land of a new page which would provide you your application details like App ID, App name and etc. You need to copy these keys and enter them later.


 Step#2: Installing Facebook Comments in Blogger:
The First thing you need to do is to Login into your Blogger account. Now from the dashboard go to Template >> Edit HTML and search for the following highlighted HTML attribution. (Quick Tip: This code is usually present at the first lines of your template’s coding).

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Now just next to the highlighted code (as shown above) add xmlns:og='http://ogp.me/ns#'. Once everything is down, it would somewhat look like this. (Quick Tip: Make sure you leave a space between these two codes). 

<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Now you need to search for the <body> Tag. After finding it, just below it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id. 

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

Now you need to add Facebook Open graph Meta Tags, We have written a detail tutorial on it that can be viewed from here. However, search for </head> and just above it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id. 

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


 Step#3: Adding Facebook Comments in Blogger: 
Last step is to implement Facebook Comments using the HTML Code. In the template, search for <b:includable id='comment-form' var='post'> and just below it paste the following HTML Coding. Incase, you are unable to find <b:includable id='comment-form' var='post'> then you can paste it just below <div class='post-footer-line post-footer-line-1'></div> (Make sure you repeat the process because there are more than 1 tags on you theme). 

<b:if
cond='data:blog.pageType == "item"'>
    <div
    style='padding:20px 0px 5px 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='550'
            />
        </div> 
                </div>
                </b:if>

Note: You can also customize the widget of the comment box by adjusting 550 the numbers in the below code.

Congratulations: You have successfully learned how to add Facebook Comments  in blogger blog. You can also preview your posts to see everything is working in an order or not. 

We hope this tutorial has helped you in adding Facebook comments in blogger. Are you using Facebook comments in your blog? If yes, then please take few minutes to tell us about your experience in the comments below.

91 comments:

  1. EditorialAugust 6, 2013 at 4:19 PM

    Awesome bro, I have applied it on my blog and its working like a charm :)

    ReplyDelete
    Replies
    1. BernNovember 14, 2013 at 10:12 PM

      me, on my blogger doesn't working... i dont't know why but i think i have done and followed the instructions very carefully...

      Delete
    2. Syed Faizan AliNovember 19, 2013 at 11:38 AM

      Can you provide your Blog URL? so i can look into it

      Delete
  2. RAJ KUMARIAugust 6, 2013 at 7:41 PM

    dear Team ,

    Please release widget for blogger ,facebook, google plus comment together .

    Further also release a trick how we can measure/track link given in related widget or link list or popular post etc in Google analytics

    ReplyDelete
  3. Daniel's Chronicle August 6, 2013 at 8:54 PM

    Thanks, your steps are simple unlike the once have been seeing.

    ReplyDelete
  4. Ian Ishmael OderonAugust 6, 2013 at 8:57 PM

    finally i have been waiting for something like this!! YEAH!

    ReplyDelete
  5. Gagan MasounAugust 6, 2013 at 9:40 PM

    Very nice tutorial. Your blog is really amazing.

    ReplyDelete
  6. ZeeAugust 7, 2013 at 7:55 AM

    very nice bro

    ReplyDelete
  7. UnknownAugust 7, 2013 at 10:21 PM

    Works Perfect on my blog

    http://www.pirateshare.us

    ReplyDelete
  8. jhinAugust 8, 2013 at 1:15 AM

    great post ! I think read on of the best post.....................thanks

    ReplyDelete
  9. Story TellAugust 10, 2013 at 12:05 AM

    Please its returning an error msg on my blog when I try to apply it
    "Error parsing XML, line 4, column 1: Element type "html" must be followed by either attribute specifications, ">" or "/>".


    Please what do I do?
    www.mybusinessklass.blogspot.com

    Thanks

    ReplyDelete
    Replies
    1. Syed Faizan AliAugust 12, 2013 at 11:14 PM

      Try Re-applying the whole tutorial. You have gone wrong, somewhere!

      Delete
  10. UnknownAugust 15, 2013 at 2:19 AM

    Hey this is not working.
    I tried it in my blog gsvipinnair.blogspot.in
    Im using simple template.
    just follow all steps.
    my fb app is gsvipinnair
    please help me to get out of the unknown trouble.
    i deserve this comment box.

    ReplyDelete
  11. UnknownAugust 16, 2013 at 7:38 PM

    Dear sir how to enable comments notification

    ReplyDelete
    Replies
    1. Syed Faizan AliAugust 20, 2013 at 5:49 AM

      Here's how you can enable comment notification

      http://www.mybloggerlab.com/2013/03/how-to-enable-comment-notifications-in-blogger.html

      Delete
  12. West Australian FishermanAugust 26, 2013 at 2:34 AM

    Hi,

    I cant find the body tag, only <body

    Please help

    ReplyDelete
  13. UnknownAugust 26, 2013 at 6:09 AM

    thanks man it works fine http://watchmovie4k.blogspot.com/

    ReplyDelete
  14. נטלי לוין מאפרת כלותAugust 28, 2013 at 2:05 AM

    Thank you, it works but only moderator can see all comments together, otherwise it shows only one (the last one) comment. Can you please help?
    Link for my Test blog
    http://0987blog.blogspot.co.il/

    ReplyDelete
  15. UnknownSeptember 1, 2013 at 1:25 AM

    Should the app ID go between the single inverteds? or should I get rid of it just put the app ID (a series of numbers)?

    ReplyDelete
    Replies
    1. Syed Faizan AliSeptember 8, 2013 at 11:39 AM

      Just Replace YOUR_APP_ID with your ID no need to remove anything elese. Hope that was simple! Cheers!

      Delete
  16. ahmedSeptember 1, 2013 at 4:19 AM

    it doesnt show fb comment on my blog ..i applied correctly html code but it cannot open facebook comment box ..what should i do

    ReplyDelete
    Replies
    1. Syed Faizan AliSeptember 8, 2013 at 11:40 AM

      Please makesure your FB APP is not in the sandbox! Thanks!

      Delete
    2. UnknownOctober 25, 2013 at 1:00 PM

      What is Sandbox? It is Enabled ...what should i do then...please describe it clearly

      Delete
    3. Syed Faizan AliOctober 27, 2013 at 4:30 PM

      Go here https://developers.facebook.com/apps/

      Select your APP >> Edit Setting

      You will see

      Sandbox Mode:
      Enabled Disabled

      Disable it and "Save"

      Delete
  17. AnonymousSeptember 3, 2013 at 7:29 PM

    Error parsing XML, line 5, column 4: Element type "head" must be followed by either attribute specifications, ">" or "/>"
    please what is the solution ?

    ReplyDelete
  18. Syed Faizan AliSeptember 4, 2013 at 4:32 AM

    That has something to do with your template not FB Comments

    ReplyDelete
  19. Alina Canura - AnghelSeptember 6, 2013 at 9:43 AM

    Hello,

    I followed the steps, but nothing happens. Can you tell me if this facebook comments box it`s in conflict with disqus, which is currenty installed on my blog?

    Thanks,

    Alina

    http://www.alina-anghel.com/

    ReplyDelete
    Replies
    1. Syed Faizan AliSeptember 8, 2013 at 11:18 AM

      Hi,

      Please make sure that your Facebook APP is not the the "StandBox"

      Thanks

      Delete
    2. KentaSeptember 16, 2013 at 1:56 AM

      Hi, i follow all the step but still the same nothing happen :(

      http://kentaxxx.blogspot.com/

      Delete
    3. Syed Faizan AliSeptember 20, 2013 at 12:21 AM

      Please makesure you have entered your Website URL in the APP Settings

      Delete
  20. AnonymousSeptember 16, 2013 at 10:05 AM

    Hello, first lof all this is really I was looking for. Well, I followed the step and checked if my app in sandbox or not. Everything is okay but nothing appears on my blog :/

    Can you help me?
    http://boomersmag.blogspot.com/2013/09/yeni-alsveris-deneyimi-beacon.html

    ReplyDelete
    Replies
    1. Syed Faizan AliSeptember 20, 2013 at 12:20 AM

      Have you inserted your Website URL? in the APP. Please check

      Delete
    2. ndru1October 12, 2013 at 4:20 PM

      Can I clarify that we should include the blog name in the field "Website with Facebook Login"?

      Blogger sometimes shows the blogspot blogs with either .com or with country extension, does it matter which one we use?

      Delete
    3. Syed Faizan AliOctober 14, 2013 at 5:00 PM

      No, You just need to enter you BLOG URL one time. No need to add URL in that box.

      Delete
    4. ErikaOctober 26, 2013 at 3:07 PM

      Hi, I tried really hard, but it did not work. Sandbox mode is disabled, html codes are at the proper place and fine,but may I ask, where the URL should be put on Facebook Apps page?

      1.) To the Basic info at FB page Settings -> Basic tab? (App domains)
      2.) Or below that, to "Select how your app integrates with Facebook" -> after checking "Website with Facebook Login" or "App on Facebook"?

      Thanks in advance!

      Delete
    5. Syed Faizan AliOctober 27, 2013 at 4:19 PM

      I Think you are not pasting the code correctly in you template. Because in blogger template there are two <data:post.body/> tags so you need to paste the code mention in the step#2 below all the <data:post.body/> you found.

      Also provide your blog url

      Delete
    6. Syed Ather RizviNovember 3, 2013 at 11:07 PM

      Nothing Happened Admin No Error No Problem But On Blog Comments Didn't Appear :(

      http://syedather.blogspot.com/

      Delete
    7. Syed Faizan AliNovember 4, 2013 at 1:06 AM

      Its Appearing fine dude? Check the screenshot yourself

      http://4.bp.blogspot.com/-QsiAxjTvO1Q/UndjbIPyD8I/AAAAAAAADHI/ZSKnU7RCEg0/s1600/Untitled.png

      Delete
  21. Καλογερίδης ΓεώργιοςSeptember 21, 2013 at 4:35 PM

    I have the same problem with Hakan

    For some reason FB doesnt allow me to add website url in the app

    ReplyDelete
    Replies
    1. Syed Faizan AliSeptember 23, 2013 at 10:27 AM

      You can do that by editing your APP. If you need insturctions let me know

      Delete
  22. Frederico RogeiroOctober 23, 2013 at 12:16 PM

    No result for me. I see nothing.

    ReplyDelete
    Replies
    1. Syed Faizan AliOctober 27, 2013 at 4:40 PM

      Make sure, its not in Sandbox it should be disable

      Make sure you are pasting the code. Because in blogger template there are two <data:post.body/> tags so you need to paste the code mention in the step#2 below all the <data:post.body/> you found.

      Also provide your blog url

      Delete
  23. Syed Faizan AliOctober 27, 2013 at 4:28 PM

    You are applying it on Blogger? then you can follow our instructions mentioned above.

    ReplyDelete
  24. WelmaxNovember 1, 2013 at 11:13 AM

    i will try

    ReplyDelete
  25. UnknownNovember 1, 2013 at 4:45 PM

    Thank u for the easier steps..I followed it and saved, No error message but the COMMENT BOX is not appearing on my blog posts at all.

    Pls what do I do?

    http://takeastepent.blogspot.com/

    ReplyDelete
    Replies
    1. Syed Faizan AliNovember 3, 2013 at 4:10 AM

      Make sure, its not in Sandbox it should be disable

      Make sure you are pasting the code. Because in blogger template there are two <data:post.body/> tags so you need to paste the code mention in the step#2 below all the <data:post.body/> you found.

      Also provide your blog url

      Delete
  26. Syed Faizan AliNovember 3, 2013 at 4:17 AM

    Blog Not Found!

    ReplyDelete
  27. UnknownNovember 13, 2013 at 7:50 AM

    Very workly.....
    thanks a lot guys.....

    ReplyDelete
  28. UnknownNovember 13, 2013 at 4:22 PM

    very nice.....

    ReplyDelete
  29. Bon TalampasNovember 15, 2013 at 10:18 PM

    awesome! works like a charm! thanks!!

    ReplyDelete
  30. Bones RodriguezDecember 2, 2013 at 10:05 AM

    Does this still work? I used the same facebook app for 2 different blogs, does that matter?

    ReplyDelete
  31. AdminDecember 5, 2013 at 4:34 AM

    Thanks Bro Its Work Fine :)

    ReplyDelete
  32. RauuruDecember 23, 2013 at 12:35 AM

    So far everything is good! Great! Thanks again for a great tutorial! Had some problems at first (using simple template) but tried a few options you gave me and at the end it worked for the posts... now would like to know if it's possible to put fb comment box on pages too. Thanks in advance!

    ReplyDelete
  33. UnknownJanuary 9, 2014 at 1:09 AM

    I tried the code for my company website blogspot, www.expertassignmenthelp.com and it is showing this comment
    The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements.

    Please help..wat to do

    ReplyDelete
  34. RiteshJanuary 9, 2014 at 11:25 PM

    Hey! can you make blogger, Google+ and Facebook comments together like blogger and Google+ are together!

    ReplyDelete
  35. john siklisJanuary 11, 2014 at 5:08 AM

    at the last it worked with me
    thank you very much
    i fallowed a many instructions but no way
    thank you again

    ReplyDelete
  36. john siklisJanuary 11, 2014 at 5:09 AM

    my blogger is
    www.aoufas.blogspot.com

    ReplyDelete
  37. UnknownJanuary 14, 2014 at 7:59 AM

    Thank you...

    ReplyDelete
  38. MMTJanuary 14, 2014 at 2:53 PM

    Please help me! Facebook Comments only shows if there is no any comment using blogger! if someone comments using blogger, facebook comments system gets hidden!

    Pls help me: check my blog: http://mymobiletips.com

    ReplyDelete
  39. UnknownJanuary 16, 2014 at 8:36 AM

    please make a Video Tutorial, It always have an errors in my html, thanks :)

    ReplyDelete
  40. Ronamae JustineJanuary 16, 2014 at 6:02 PM

    The widget with id "Blog1" contains a b:includable element which has no id attribute. All b:includable elements should have a unique id for a given widget.

    what to do?

    ReplyDelete
  41. UnknownJanuary 21, 2014 at 7:52 AM

    not work for me

    http://www.techhooker.com/

    i cant find disable sandbox option in app settings

    ReplyDelete
    Replies
    1. Syed Faizan AliJanuary 22, 2014 at 6:18 AM

      You will get the option on Clicking on your APP Name.

      Delete
  42. KaitoJanuary 22, 2014 at 6:42 PM

    Hi Team,

    Thank you for sharing this tutorial, I'm using it for my blog and its working properly. Its easy to install less than 3 minutes only.

    ReplyDelete
  43. Momie AwaanJanuary 31, 2014 at 9:29 PM

    http://noveldairy.blogspot.com/
    Nothing would be happened :(

    ReplyDelete
  44. UnknownFebruary 24, 2014 at 7:58 AM

    Hei. I did everythink and it didn't work. There was no error...but i still don't have the facebook comment ...

    ReplyDelete
  45. UnknownMarch 1, 2014 at 1:04 AM

    But comment box is displaying only for some selected post, not for all.
    I can't understand why it is not displaying.
    Help....
    Blog URL = www.funwithtricks.bl.ee

    ReplyDelete
  46. sweet catastropheMarch 19, 2014 at 7:34 AM

    What about Tumblr?

    ReplyDelete
  47. UnknownMay 7, 2014 at 8:04 PM

    I applied your tutorial except that I want it place after the last paragraph of my post and I found a way to do it. But there seems to be a problem. My "Also post on Facebook" is NOT AUTO-CHECKED. Sometimes, it's ALREADY CHECKED and sometimes it is NOT. I also tried to comment in it using another Facebook account. After clicking "Comment", it will then display "This comment has not yet been published to Facebook. Publish comment" How do I make this automatic? I mean no confirmation required.

    Here's the link to my blog: www.effectivenetworkingtips.blogspot.com

    I hope you would reply as soon as possible. Thank you.

    ReplyDelete
  48. UnknownMay 7, 2014 at 9:25 PM

    How to fix "This comment has not yet been published to Facebook. Publish Comment" without clicking "Publish Comment"? What I mean after clicking "Comment", it should automatically be posted in their timelines?

    ReplyDelete
    Replies
    1. Syed Faizan AliMay 8, 2014 at 7:40 AM

      Yes it will post your comment on your Timeline.

      Delete
  49. UnknownJune 21, 2014 at 10:41 AM

    hello. i've tried it an it is working fine, However, i removed it because it's showing "like page icon on every post" in homepage. Can we possibly remove the like page? if so, pls let me know. Thanks! my blog is mahubya.blogspot.com

    ReplyDelete
  50. ChiaranimeJuly 10, 2014 at 12:49 AM

    It works on the first try, thanks :)

    ReplyDelete
  51. AnonymousOctober 10, 2014 at 5:01 PM

    Worked perfectly, thanks

    ReplyDelete
  52. Nived KannadaOctober 22, 2014 at 10:00 AM

    Nice

    ReplyDelete
  53. ShalikaOctober 30, 2014 at 3:57 AM

    I need to use only fb comments, instead of google and fb comments. when I post a fb comment, it doesn't count the comment. blogger says NO COMMENTS. can I fix this?

    ReplyDelete
  54. AnonymousJanuary 15, 2015 at 1:08 PM

    Worked perfectly, thanks

    ReplyDelete
  55. RKJune 2, 2015 at 10:16 AM

    Finally comment box is appearing on my site.. But how to get notifications of comments.

    www.techiezap.com

    ReplyDelete
  56. RainJune 18, 2015 at 8:54 PM

    It working. Thank you!

    ReplyDelete
  57. Online College DegreeJuly 1, 2015 at 3:01 PM

    It worked for me. Thanks.
    Life Experience Degrees

    ReplyDelete
  58. Kẻ Lưu ĐàyAugust 10, 2015 at 7:48 AM

    This comment has been removed by the author.

    ReplyDelete
  59. Sonct988May 11, 2016 at 11:12 AM

    Facebook comment activity. But I don't get notifications from it. Can you guide me to fix it

    ReplyDelete
  60. UnknownDecember 9, 2016 at 11:04 PM

    please i did not understand this statement:(Make sure you repeat the process because there are more than 1 tags on you theme)

    ReplyDelete
  61. Kẻ Lưu ĐàyJune 25, 2017 at 5:49 AM

    Thank you so much! Works perfect on my blogspot: http://top69games.blogspot.com/?m=1

    ReplyDelete

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.