How to Use Facebook Comment System on Blogspot/Google Blogger? – Advanced Installation

13

Facebook Comments system may be a reason for social media success for most of us. It is best among all Facebook plugins for blogging. On the internet, you may find many tutorials that may guide you but all those methods work perfectly on Blogger with the custom domain but when you use the Facebook Comments system on Blogger without custom domain due to many country-specific domains of a single blog become a problem. Today in this post we will cover how to rectify errors and problems which are due to Blogger’s country-specific domains.

Note: I suggest you take a backup of your Blogger template. Because after implementing this comments system your old comments will disappear from your blog.

Steps to Install Facebook Comment System on Blogspot Google Blogger

1. Go to Facebook Developer Page [https://developers.facebook.com/apps/]

2. Then click on + Create New App.

Facebook Comments

3. Now fill a valid App Name and click on Continue.

Facebook Comments

4. Fill Captcha Code and click on Submit Button.

Facebook Comments

5. Now you’ll get App ID.

Facebook Comment Configuration on Blogger

6. Below under Basic info opposite to App Domains fill 17 Blogger’s country-specific domains.

  • blogspot.com
  • blogspot.ae
  • blogspot.mx
  • blogspot.in
  • blogspot.pt
  • blogspot.jp
  • blogspot.ca
  • blogspot.de
  • blogspot.it
  • blogspot.fr
  • blogspot.se
  • blogspot.co.uk
  • blogspot.co.nz
  • blogspot.com.es
  • blogspot.com.br
  • blogspot.com.ar
  • blogspot.com.au

7. Now under ‘Select how your app integrates with Facebook‘ you’ll find ‘Website with Facebook Login‘ and ‘Site URL:‘ please fill your blog URL here.

8. At last click on the ‘Save Changes‘ button to save app settings.

9. Now prepare Application and Moderator Meta Tags.

<meta property='fb:admins' content='ADMIN-NAME'/>
<meta property='fb:app_id' content='APP-ID'/>

Example –

<meta property='fb:admins' content='ADMIN-NAME'/>
<meta property='fb:app_id' content='APP-ID'/>

10. Go to Blogger Dashboard ¬> Select Blog ¬> Go to Template tab ¬> Click on EDIT HTML
11. And under <head> paste above meta tag as following

<head>
<meta property='fb:admins' content='VPNazar'/>
<meta property='fb:app_id' content='348446671899960'/>

Note: Without using this meta tag you will not be able to moderate Facebook Comments. And MUST change ADMIN-NAME and APP-ID with correct values.

12. Now in your blog’s template try to find one of the following code

<div class='post-footer-line post-footer-line-3'
<p class='post-footer-line post-footer-line-3'

If unable to find both of the codes then search for the following code

<data:post.body/>

13. And Paste the following given code just below. Must change App-ID

Last Update: Tuesday, 18/06/2013
<b:if cond='data:blog.pageType == "item"'>
&lt;div id="fb-root"&gt;&lt;/div&gt;
&lt;script&gt;(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_GB/all.js#xfbml=1&amp;appId=App-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
&lt;div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-num-posts="10" data-width="470"&gt;&lt;/div&gt;
&lt;/b:if&gt;
</b:if>

14. In this code, variable “data-num-posts” is a number of comments and the default value is 10 and data-width with value 470 Comment form width. You may change both variables as per your blog design.

Disable the Blogger Comment System

If you want to disable Blogger default comment system then please following steps:

1. Go to Blogger Dashboard and select Blog
2. Switch to the Settings tab
3. Then click on Posts and Comments tab
4. And see opposite to Comment Location and select Hide option from DropDown
5. Finally, click on the Orange color Save Settings button given on the upper left side.

I believe you’ll be able to use this great comment system on your blog. If you still have any query please communicate with your comments.

13 COMMENTS

  1. Hai Tech Prévue,

    I have installed this application before in my blog The problem is, the same or all facebook comments appear below all the posts. So, I don’t know which comment on which post. Do you have any idea.?

  2. I’m having the same problem as Waazin, same comments show for all the post. Also, the color of my font makes it hard to read. Any ideas, suggestions? jamiecherish.blogspot.com

    • Hello Jamie, I have sent you 2 test comments on two different posts on your blog. I found no problem at all.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.