How to Add Facebook Comments to BlogSpot Blogs

IN Uncategorized

BlogSpotr and Facebook are two most widely used free service. Blogger provides you an opportunity to publish your content and earn from it and Facebook on the other hand helps you to stay connected to your friends 24*7.

If you are a BlogSpot user then you must be outraged by its comment system, so am I. Recently I came across Facebook Comment Plugin and found it really amazing and tried to integrate it with my blog. here in this tutorial you will get detailed tutorial on Adding Facebook Comment Plugin on Blogger.

Step 1: Goto Facebook developer page and enter your blog name, URL and click on Create application. Now copy the Application ID given to you.

Step 2:Open your Blogger dashboard and go to to Layout > Edit HTML and check on Expand Widget Templates. Search for and paste the code given below just after and save the template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: 'APPID', status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol  +
  '//connect.facebook.net/en_US/all.js';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
  }());
  </script>
  <fb:comments width='WIDTH' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/>
  </b:if>

Replace APPID and WIDTH given in the code with your Application ID (Step 1) and the desired width of comment box (as per the width of your content area) and then Save the template.

Step 3: Now all you need to do is hide the ugly default blogger commenting system. So navigate to Settings > Comments and select hide and save settings.

Facebook comment system is minimal and also helps in promotion of your blog. Do try this but before proceeding please make a backup of your design.

Subscribe on Youtube

Click to activate Offer & visit site Discount added automatically

Subscribe to SML Newsletter

Receive Blogging Tips & Strategies

Get WordPress Guide eBook for free in the 2nd newsletter

100% privacy. we will never spam you

  • Author Bio

  • Latest Post

Blog post by idinesh

Dinesh has written 1 articles.

Follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


    Testimonials
    Send Us Inquiry

    Comments

    1. Dinesh Verma says

      @zohaib Good guide but i tried to keep my guide simple and you can moderate your comments here.

    2. antodoms says

      @idinesh…. yaah that’s right but we can decide which all comments we would like to approve… if we don’t approve that comment then only they and their friends can see that comment , the external users who visit the site can’t see those comments…… So still its Good … :D

    3. Kavya Hari says

      Face book has an unlimited features with the good support in it. Thank you so much for sharing your blog post on here :)

    4. Zohaib Hassan says

      This gives error in some templates. I made a step to step guide here That is kinda different method than this however comes with Moderation option so that you could delete unwanted comments such as Spam comments etc

    5. idinesh says

      @antodoms displaying comment as status updates is helping bloggers to get more visitors and when someones replies to that updates his/her comment also gets displayed on blog.

    6. idinesh says

      @Nasif : Facebook comment system is new, that is why it lacks basic features. You could see some exciting new features coming soon.

    7. antodoms says

      Its better if we can integrate our site with facebook comment + facebook open graph….. :D Thus not only displaying the comment in the site we can make it display in our own profile page , at the same time… :D Thus our comment is displayed in our profile just like any usual status update…. :D

    8. Nasif says

      Facebook comment is great but the only it lacks is export import feature and moreover it is very slow !

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>