How to add Latest Facebook Comment Box in Blogger

Facebook has provided many plugins for websites and blogs. Recently the developers of Facebook have released the plugins “Facebook Comment Box”. This is an awesome plugin for Facebook. Using this Facebook comment box your blogger and websites user or viewers can comment on your posts and those comments will be automatically shared in their Facebook Comment Wall.

Facebook comment box makes your visitors catch you easily, so this can be very important for those people who want to directly interact with the admin and other visitors. I know there are various people who want to know the Facebook comment box on their blogger blog, WordPress blog, and many other sites. So this tutorial can be the best solution for them. So now we will suggest to you how to add a simple comment box of Facebook in the blogger blog. You should that everything has its merits and demerits. Likewise, this Facebook comment box also its some advantages and some disadvantages.

First of all, here we are discussing the advantages of the Facebook comment box.
We all know that Facebook is the most popular social media in the world. They always introduce new features to serve the people and to catch the visitors more on Facebook. So Facebook comment box is one of their popular features.
when some people like and reply to their comment. a notification has appeared to the user. And it also provides multiple commenting features.

The main disadvantage of the Facebook comment box in blogger is that Google spider never crawls Facebook comments, so this comment can not be useful in the view of optimization.

Read also: Facebook post share button in blogger posts

You just find here two methods to put this comment box in your blogger blog. Both are very useful but in some of the older blog templates Method 1 might not work. So I recommend you use the methods which work in your blog.
This is one of the most using techniques to make more visitors to your blogs and sites.

New app id

It is the beginning thing that you should do which you can do easily by the Facebook developer. First of all, you should log in to your Facebook then click on Facebook developers. After that click on Create New App
and there appears a pop of form. Fill out that form. Then fill that Captcha. Then copy the app id into your notepad, this is needed in further steps.
facebook apps

Step 2: Now let's install the Facebook comment in the blogger blog

It is necessary to login into your Facebook dashboard. Then go to the Template tab and click on edit HTML. After that find the following code.
<html......> This code is in the first row of every blogger, so you can find it easily.

Then, just paste the following xmlns:og='http://ogp.me/ns#' code just after the highlighted code which is shown above. When you add this code the HTML structure looks like
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now find the <body> tag and paste the given code just after that <body>

<div id='fb-root'/> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
      appId  : &#39;AppId&#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>

The one thing is that you just replace or add your AppId below AppId.  You put your blog name in All Blog Solution and your Facebook page URL in http://www.facebook.com/rakepoint.
Now there is needed to add meta tags. Just find the </head> and paste the following code replacing your app id
<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='AppId ' property='fb:app_id'/> 
<meta content='rakepoint' property='og:site_name'/> 
<meta content='http://www.facebook.com/rakepoint' property='fb:admins'/> 
<meta content='article' property='og:type'/>
Step 3: Comment box in blogger blog.

At last, you should put a comment box structure in the blog.
Go and just find this code <div class='post-footer-line post-footer-line-1'> and paste the following code just below the above code or anywhere you want to show the Facebook comment box.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='padding:2px 3px 2px 3px; margin:2px 3px 2px 3px;'><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='100%'/>
    </div>
  </div>
</b:if>
<div style="position:fixed; bottom:0px; left:0px; color:#898989; font-size:12px;"><a href="https://allblogsolution.com/2014/02/how-to-add-latest-facebook-comment-box.html">Get Widget</a></div> 

Now you have successfully added your Facebook comment box.

Note: Replace rakepoint with your Facebook URL. If you want to change the width of the comment, simply change the width. 

Watch and follow the below video

Post a Comment

60 Comments

  1. Yeppie! got it done, step two at the body, the appid needs to be change to the one gotten from facebook.

    ReplyDelete
  2. Thank you , great post much appreciated

    ReplyDelete
  3. Good one.. It works for me.. www.9jakeek.com

    ReplyDelete
  4. Wow
    This one works well.
    I set it on one my blogs.
    Trying to add it on mobile too
    www.wikeria.org

    ReplyDelete
    Replies
    1. how do i apply it to mobile version of my blog?

      Delete
  5. yah it's really work
    see my website: http://www.heroesislam.tk

    ReplyDelete
  6. Hello,
    Thanks for the valuable information. Finally gotta know How to Add Facebook Comment Box in Blogger and successfully installed comment plugin on my blog.

    ReplyDelete
  7. Added this to my marketing and stretch mark removal blogs, thanks for sharing

    ReplyDelete
  8. Helloo.. thanks for that great article. I just followed your steps but the and there was no error but the comment box is not showing up. Pleasa help

    my blog http://rawfeeds.blogspot.co.ke/

    ReplyDelete
    Replies
    1. Describe the errors clearly...

      Delete
    2. it does not show the comment box. I edited the code as per your instructions saved it but the comment box does not show up in my blog.

      Delete
  9. Works for me! Thank you!!!!

    ReplyDelete
  10. You wrote a very essential post. Most of the bloggers will find it helpful like me. Thanks i will use it on my site Symphony Mobile

    ReplyDelete
  11. Thanks for the info. Really helped.

    ReplyDelete
  12. thank you o much i just did it in my blog and its working fine check it out http://www.aznewsline.com/

    ReplyDelete
  13. its not working for me.my comment box is default

    ReplyDelete
  14. And i’m glad reading your article. But should remark on some general things,
    real fb likes

    ReplyDelete
  15. sir! <div class=’post-footer this point is not in my blogger theme plz help me

    ReplyDelete
    Replies
    1. Don't worry buddy. You can also add below <p class='comment-footer></p>

      Delete
    2. hello, i just followed everything here and also fixed the errors, but the comment box is not coming up on my site - beninspirationals.blogspot.com any assistance will be appreciated thanks

      Delete
  16. Thanks for the tutorial, but I have encounter some technical issues like FINDING THE CODE body I tried it to find, but I fail to find the said code body only I find is body which is far different from your instructions. Please I need assistance, about this matter.

    I am looking forward, to hear from you soon.


    ~Ronald
    Blogger

    ReplyDelete
  17. successful but there is a problem.
    a message is shown on upper left side of my blog that is following ..hot managae this.
    expr:class='"loading" + data:blog.mobileClass'>

    ReplyDelete
  18. kindly tell me where i will receive comment notification, because i have not received in email and facebook.

    ReplyDelete
    Replies
    1. https://developers.facebook.com/tools/comments/ Click on this link

      Delete
  19. Gravatar is a wonderful tool to comment on blogs and posts and get your avatar displayed

    ReplyDelete
  20. Error parsing XML, line 3, column 35: Element type "html" must be followed by either attribute specifications, ">" or "/>". please help me

    ReplyDelete
  21. <html> ends with </html>. So there is no need to add />

    ReplyDelete
  22. Ok. I finished adding,without errors but there is no comment box.
    I created an AP.I have an ID. Everything done right.
    Do i need to Submit my App for review to Facebook ? I set Visible Status: YES
    Do you have any idea why its not showing up ?

    ReplyDelete
    Replies
    1. Consider the below points:-
      1. Recheck whether you have done accordingly the above process.

      2. I hope, you have added your app id and your facebook url instead of allblogsolution

      3. You can also follow up the video tutorials.

      4. If you get any error message, just inform me.

      Thank you

      Delete
  23. Its work on my mobile price listing site www.bdpricelists.com

    ReplyDelete
  24. Thanks so much for this guide, I will set it up on my blog now: http://www.businessblogmoney.com

    ReplyDelete
  25. followed all the procedure on my blog, www.typearls.com.ng, but nothing happens

    ReplyDelete
    Replies
    1. This must work because it is working in many default blogger template and custom tempplate. Okay, perhaps, I could help you through teamviewer if you want.

      Delete
  26. Ok. I finished adding,without errors but there is no comment box.
    I created an AP.I have an ID. Everything done right.
    Do i need to Submit my App for review to Facebook ? I set Visible Status: YES
    Do you have any idea why its not showing up

    Log cabins

    ReplyDelete
  27. thanks for the tutorial, this is so helpfull for me and other blogger :)

    ReplyDelete
  28. Hi I have already fb comment plug in...and I all things done carefully. But its say failed again & again. Whot should I do now? My site is http://www.alorsondhani.ga

    ReplyDelete
    Replies
    1. Oh sorry for late reply. I was checking your site, but could not find and fb comment code. Once again do as instruction above and inform me via email. Then I will check what is exactly happening on your site.

      Delete
  29. Hi! Thanks for the post, I have a little problem with the comments plugin. I followed all the steps you providebut People comment on my shared blog links on facebook but comments don't appear on my page. What should I do to allow two way commenting?

    ReplyDelete
    Replies
    1. What is your blog url. May I check your blog manually ?

      Delete
  30. Hi ...
    Your blog is excellent and keep up the good work mate.
    I got the comment box on my site but the problem is, i am not getting any notification on my id for the comments and neither i am getting moderator view.

    ReplyDelete
  31. how can get this for web with php code i mean not on blogger

    ReplyDelete
    Replies
    1. It's so simple. just visit this official link of facebook.. https://developers.facebook.com/docs/plugins/comments/

      Delete
  32. I try 2 times and now work for me , thanks , guy
    here my blog
    http://lifecarepost.blogspot.com/2016/10/how-to-check-for-counterfeit-money.html

    ReplyDelete
  33. it make blog go slow, now I remove and keep the default.

    ReplyDelete
  34. Hi! i did all your instruction but failed, why Facebook comment box do not appear in my web site. Please give me some advice. My web www.necessaryvocabulary.com

    ReplyDelete
  35. not working on my blog shahabrarahmad.blogspot.in helppp

    ReplyDelete
  36. my site is www.stuwxytricks.ga facebook comment plugin not working my site

    ReplyDelete
  37. I tried it over and over gain but still can't make it to work on my site. Please, i really want to have this facebook comment box added on my site. Is there anything else that i can do? Would appreciate it a lot if you can help. Here's the link to my site: http://www.thetravelersluggage.com/ and also i only have one "...class='post-footer-line post-footer-line-1" line so i pasted the code just right after that line.

    ReplyDelete
  38. I have tried this method even before seeing it here, but the problem is that I have google comment box on the blog and after I tried addiing this, it doesn't show, should I remove the Google comment first, before adding the last code?

    Am perfectly sure I carried out the procedure perfectly

    ReplyDelete
  39. Wow! Thanks alot. It has worked for me. Sorry for the old comment I made when it didn't work.

    Anyone can check here to see how the stuff looks
    1COMPAREWEB

    ReplyDelete
  40. You are awesome! I made mine! thank you allblogsolution! this article is very useful! I appreciate your post! Check mine everyone: https://www.facebook.com/UsefulVideos-Created-254959358269333/

    Leave me your reactions. See you there!

    ReplyDelete
  41. why my blog can not use n can not show the Fb coment box please help sir.. agenda sbobet

    ReplyDelete
  42. I GOT THE FACEBOOK COMMENT BOX. and people are already commenting on it. BUT The problem is I am not receiving any comments on the modification tools. Please help me.

    ReplyDelete
  43. it's not showing on mobile

    ReplyDelete
  44. I want to make a comment box like youra

    ReplyDelete

Any comment will be appreciated, comment will be published according to our comment policy