Header AD

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 awesome plugin of the 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 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 site. So this tutorial can be the best solution for them. So now we will suggest you how to add simple comment box of Facebook in the blogger blog. You should that everything have its merits and demerits. Likewise, this Facebook comment box also its some advantages and some disadvantages.

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

The main disadvantage of Facebook comment box in blogger is that Google spider never crawl Facebook comment, so these 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 older blog's templates Method 1 might not work. So I recommend you to use the methods which works in your blog.
This are one of the most using techniques to making more visitors on your blogs and sites.

New app id

It is the beginning thing that you should do which you can do easily by Facebook developer. First of all you should login into your Facebook then click on Facebook developers. After that click on Create New App
and their appears a pop of form. Fill 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 lets install the Facebook comment in blogger blog

It is necessary to login into your Facebook dashboard. Then go to 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 in above. When you add this code the html structure is look 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 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.blogspot.com/2014/02/how-to-add-latest-facebook-comment-box.html">Get Widget</a></div> 

Now you have successfully add your Facebook comment box.

Note: Replace rakepoint by your facebook url. If you want to change the width of comment, simply change the width. Thanks you did.

Watch and follow the below video

How to add Latest Facebook Comment Box in Blogger How to add Latest Facebook Comment Box in Blogger Reviewed by Rakeysh Aryal on September 13, 2016 Rating: 5

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. hello blogger,i really appreciate your highly thought about this matter through your post.Obviously your post is very informative.If you update your Social account, please visit buy facebook likes
    For facebook Service.

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

    ReplyDelete
  7. 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
  8. Added this to my marketing and stretch mark removal blogs, thanks for sharing

    ReplyDelete
  9. 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
  10. Works for me! Thank you!!!!

    ReplyDelete
  11. 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
  12. Thanks for the info. Really helped.

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

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

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

    ReplyDelete
  16. 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
  17. 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
  18. 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
  19. 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
  20. Gravatar is a wonderful tool to comment on blogs and posts and get your avatar displayed

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

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

    ReplyDelete
  23. 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
  24. Its work on my mobile price listing site www.bdpricelists.com

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

    ReplyDelete
  26. 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
  27. 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
  28. thanks for the tutorial, this is so helpfull for me and other blogger :)

    ReplyDelete
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. it make blog go slow, now I remove and keep the default.

    ReplyDelete
  35. 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
  36. thanks to share, I have already use that blogger widget.

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

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

    ReplyDelete
  39. 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
  40. 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
  41. 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
  42. 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
  43. why my blog can not use n can not show the Fb coment box please help sir.. agenda sbobet

    ReplyDelete

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

Post AD