How to replace Blogger Comments with facebook Comment plugin In blog/website

Published

Here is how you can replace blogger comments with Facebook Comments in blogger blogspot.


Before Proceed further, please note that
If you use Facebook comments instead of blogger comments,
  • You will not get email notifications when someone comment on your post.
  • You will not be able to track spam messages in comments with blogger service.
  • Comments you will receive, will not be added to your blog's comments section, but only in Facebook's iframe.

Still,If you want to use this, here we go.

First Step:

First step is to make an app in Facebook.
You should be an app developer to use Facebook comments in your website or blog or wherever you want.

To create a facebook app,
Go to below address.
https://developers.facebook.com/apps
If you are not yet a developer, register for a developer account.

Click on the button named "Create New app"

It will pop up a box. type your app name there. whatever it is. you can also name it as your blogs name.


Click next button, it will ask you to type captcha as Facebook requires that to prevent spamming.

Your app will be created and you will be taken  to a new page where you can see basic settings of your app.




Display name will be the same name you typed.
Now , type blogspot.com,blogspot.[your country specified domain extension.  example:if you are in India it will be blogspot.in].
You can complete the domain name list with country specified domain  extensions as possible.

Next, you can see a field named sandbox mode.

If Sandbox mode enabled, only developers can use the app. so disable sandbox mode. for that check the radio button named "disabled"

Now, come down and click on website with Facebook login, and fill it with http://yourblogname.blogspot.com

Mine will be http://aslamise.blogspot.com

Now click on save

You have just made your Facebook app to use Facebook's plugins.

Second Step:

Get code for Facebook Comments

Go to
http://developers.facebook.com/docs/reference/plugins/comments/



Grab your code from there.

<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&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

You have to XML encode code between script blocks to get it work on blogger,else it will show an error.
After XML encoded ,It will look like below.


<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=YOUR_APP_ID&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

(You can just copy paste this to your template just after the <body> tag and replace YOUR_APP_ID with your app id of the app you created.)

Save your template for now.
Now click Ctrl+F and search <b:includable id='postQuickEdit' var='post'>
Just before that you can see </b:includable>.
Now lets call our comment plugin here.

So Copy paste this just before that </b:includable>.


        <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='20' data-width='610px' expr:data-href='data:blog.canonicalUrl'/>
        </b:if>

Change the width of comment box as per your template's width.

Add <meta content='YOUR-FACEBOOK-ID' property='fb:admins'/> between your  <head></head> tags. So we can moderate comments in our blog.
We have just enabled Facebook comments plugin in your blog.

Now, the last step. 
we have to hide the real blogger comments plugin from our blog.

for that, go to your blog's dashboard.

Settings -> Posts and comments ->

Under Comments Section, you can see an option named Comments Location

Select Hide.

Note: Selecting Hide does not delete existing comments.

Then click save settings.


You have just replaced  your blog's default comment system with Facebook's comment system.
Feel free to ask if you are experiencing any problem with the process. your comments are always welcome :)


Comments

  1. MovieKangzFriday, May 17, 2013

    Hey... how did you change this mobile template and remove powered by blogger at the end??????

    ReplyDelete
    Replies
    1. AslamFriday, June 14, 2013

      Hi jaye Loxmiff.

      You can enable custom template for mobile and remove "Powered by blogger" from your blogger mobile version.
      here is a simple but detailed article on how to do this.
      >> http://goo.gl/hbwPx

      Delete
  2. DoOMsDaY MusicSaturday, June 01, 2013

    Gracias

    ReplyDelete
  3. AnonymousFriday, June 07, 2013

    Thanks so much for the tip! I have seen several similar to this and so far this has been the most help! However, during one of your last steps when I go to my Comment settings and choose Hide, it hides both Blogger and Facebook comment box :( Is there anyway you could help me figure this one out!?

    ReplyDelete
    Replies
    1. AslamFriday, June 07, 2013

      You are always welcome and i would be always reay for help if i could. :)

      Now,coming to the issue, There is nothing to wory about. Note that you can apply below code anywhere in your template once after you passed the steps before that.

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='fb-comments' data-num-posts='20' data-width='610px' expr:data-href='data:blog.canonicalUrl'/>
      </b:if>

      I mean anywhere in your template , but comments should be after the article contents right? . First, you hide blogger comments, open template editor, and paste the above code at the bottom of the page, reload page and see where it appear, again go to editor and move it to top,save. repeat the process until you see comments appearing just after your post.
      Hope this helps, please let know if solved :)

      Delete
    2. AnonymousSaturday, June 08, 2013

      Excellent! Perfect fix! Thank you so much!

      Oh! And thanks for the kind words in comment you left on our blog! :)

      Delete
  4. C.J.Friday, June 07, 2013

    Hey Bro, I'm getting an error msg, saying
    "Error parsing XML, line 1008, column 63: The entity "appId" was referenced, but not declared."
    After adding the appiD, I got this:
    "Error parsing XML, line 1008, column 61: The reference to entity "appId" must end with the ';' delimiter.

    This is the line of code with the problem:
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=612580202092935";

    ReplyDelete
    Replies
    1. AslamFriday, June 07, 2013

      Hi CJ.. Welcome to Aslamise.. :)


      The line you mentioned is NOT XML ENCODED. That might be the problem.


      in your case,Lets see how that line will look like, after xml encoding.


      js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=612580202092935&quot;;


      What you have to do is just replace that line with the xml encoded one.


      Please let us know if it helps or not.

      Delete
  5. UnknownFriday, June 14, 2013

    I had problem finding the <body&gt to insert the code on the my new html blogger editor. Can you please help me.

    ReplyDelete
    Replies
    1. AslamFriday, June 14, 2013

      Hi kurt francis, Don't worry, if you are using blogger's new template editor, you could click anywhere INSIDE the template editor (NOT OUTSIDE the template editor) , press Ctrl+F and start searching your word.
      if you couldn't see <body> there, try searching for "body" only. hope this helps. please let us know whether this helped or not :)

      Delete
    2. AslamFriday, June 14, 2013

      here is an article that shows how to search inside new blogger template editor. >> http://goo.gl/0tzyd

      Delete
  6. XhuziTuesday, June 18, 2013

    thanks...........

    ReplyDelete
  7. UnknownWednesday, June 26, 2013

    How do you get notifications for these?

    ReplyDelete
    Replies
    1. AslamMonday, July 08, 2013

      Hi bro. you could add yourself as a moderator in the plugin settings:)

      Delete
  8. UnknownMonday, July 01, 2013

    thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks

    ReplyDelete
  9. AmandaSunday, July 07, 2013

    Does having a custom domain for your blogspot blog affect this in any way? I can't seem to get it to work. Thank you so much for your time/help!

    ReplyDelete
  10. Besplatne KnjigeFriday, July 12, 2013

    THAANK YOU SO MUCH!! WOOW!!! :D

    ReplyDelete
  11. sanopatiSaturday, October 19, 2013

    Dear brother, I am not getting it
    I am using custom template. I did all what you said but not getting any changes// is there anything to do more,please let meknow

    ReplyDelete
  12. UnknownFriday, November 01, 2013

    Dear Aslamise,
    I followed your directives, saved and got this message: The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements

    What do I do pls?

    ReplyDelete
  13. UnknownWednesday, December 25, 2013

    thaks frn its working in my temp

    ReplyDelete
  14. Trường TrầnSunday, April 06, 2014

    You're just genius. Thanks so much.
    Had to do a lot of search to find the right way you are instructing people.

    P.S: As for me, I paste original code of facebook before in order to make the facebook comment plugin appear.

    ReplyDelete

Subscribe to: Post Comments ( Atom )