ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How to Add Facebook Comments to BlogSpot Blogs

CW
How to Add Facebook Comments to BlogSpot Blogs

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.

Facebook commenting System 550x237

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.

  • Author Bio

  • Latest Post

Article by idinesh

Dinesh has written 1 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


    { 8 comments… add one }

    • Dinesh Verma

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

      Reply
    • antodoms

      @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

      Reply
    • Kavya Hari

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

      Reply
    • Zohaib Hassan

      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

      Reply
    • idinesh

      @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.

      Reply
    • idinesh

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

      Reply
    • antodoms

      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

      Reply
    • Nasif

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

      Reply

    Leave a Comment