domdomrung

Replace blogger comments with Facebook Comments

Facebook Comments

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

type your app name
Click next button, it will ask you to type captcha as Facebook requires that to prevent spamming.
captcha
Your app will be created and you will be taken  to a new page where you can see basic settings of your app.

settings


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://bloggertricksure.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/

Get code for Facebook

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.Now You don't worry about spam link on your blogger(read more).Feel free to ask if you are experiencing any problem with the process. your comments are always welcome :)
Labels: ,