How to Add Facebook Comments System in Blogger
In the past, we have already covered How to Add Google+ Comments, Disqus Commenting system and LiveFyre Commenting system in Blogger. Recently, one of our users asked us how to add Facebook Comments in Blogger? Today in this article, we will show you How to Add Facebook Comments System in Blogger. We will also discuss the Pros and cons of using Facebook Comments on your website, so that you can make an ingenious decision whether to for it or not.
Advantages of Facebook Comments in Blogger
Facebook is the most viral social networking site, so it might be the reason why one should always think about making use of all the features that it provides to the publishers and developers. However, I would not push anyone to start using Facebook comments without knowing its advantage. Every site has their own priorities and concerns but for the sake of an ongoing argument, let us first take a look at the following pros of adding Facebook Comments in Blogger.Whenever someone likes or reply to their comment, Facebook sent an automatic notification to user. The author or other users might also receive the same notification if they are following the topic.
Unlike Google+ and others, it provides multiple commenting options. For example, if someone is not a Facebook user then he can use his Yahoo, AOL or Outlook id to comment on your website, so your visitor never gets locked out.
Whenever a registered user is caught spamming, Facebook automatically treats him with a security code while the rest of the loyal visitors keep on commenting without any worry. If that spammer didn’t even stop then, Facebook holds the authority to disable him from commenting.
Disadvantages of Facebook Comments in Blogger:
You are totally depending upon Facebook. Though it is a reliable brand, but sometime minor glitches happen. What would you do if Facebook suffers some down time. Since, all the scripts you are using is hosted on Facebook, so you never know when the comments get disappear.Nonetheless, it is unlikely to happen because Facebook is a well-known site with quality backup server. However, you never know what would be the next thing to come.
How to Add Facebook Comments in Blogger:
Step#1: Creating a New Application:
The First thing you need to do is to create a separate App ID for your
application and that can be done easily through Facebook Developer.
Login to your Facebook account and go to Facebook Developers website. This places allow Developers to manage their apps hosted at Facebook, click on Create New App button.
A Small pop out will appear which would ask you to insert little
information about your application. There are two fields, write the App
name and press the continue button.
Now you will land of a new page which would provide you your application
details like App ID, App name and etc. You need to copy these keys and
enter them later.
The First thing you need to do is to create a separate App ID for your application and that can be done easily through Facebook Developer. Login to your Facebook account and go to Facebook Developers website. This places allow Developers to manage their apps hosted at Facebook, click on Create New App button.
Step#2: Installing Facebook Comments in Blogger:
The First thing you need to do is to Login into your Blogger account.
Now from the dashboard go to Template >> Edit HTML and search for
the following highlighted HTML attribution. (Quick Tip: This code is
usually present at the first lines of your template’s coding).
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now just next to the highlighted code (as shown above) add xmlns:og='http://ogp.me/ns#'. Once everything is down, it would somewhat look like this. (Quick Tip: Make sure you leave a space between these two codes).
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now you need to search for the <body> Tag. After finding it, just below it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Now you need to add Facebook Open graph Meta Tags, We have written a
detail tutorial on it that can be viewed from here. However, search for </head> and just above it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id.
<meta property="fb:app_id" content="YOUR_APP_ID" />
Step#3: Adding Facebook Comments in Blogger:
Last step is to implement Facebook Comments using the HTML Code. In the template, search for <b:includable id='comment-form' var='post'> and
just below it paste the following HTML Coding. Incase, you are unable
to find <b:includable id='comment-form' var='post'> then you can
paste it just below <div class='post-footer-line post-footer-line-1'></div> (Make sure you repeat the process because there are more than 1 tags on you theme).
<b:if
cond='data:blog.pageType == "item"'>
<div
style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>
<script
src='http://connect.facebook.net/en_US/all.js#xfbml=1'
/>
<div>
<fb:comments
colorscheme='light'
expr:href='data:post.url'
expr:title='data:post.title'
expr:xid='data:post.id'
width='550'
/>
</div>
</div>
</b:if>
Note: You can also customize the widget of the comment box by adjusting 550 the numbers in the below code.
Congratulations: You have successfully learned how to
add Facebook Comments in blogger blog. You can also preview your posts
to see everything is working in an order or not.
We hope this tutorial has helped you in adding Facebook comments in
blogger. Are you using Facebook comments in your blog? If yes, then
please take few minutes to tell us about your experience in the comments
below.
Step#2: Installing Facebook Comments in Blogger:
The First thing you need to do is to Login into your Blogger account.
Now from the dashboard go to Template >> Edit HTML and search for
the following highlighted HTML attribution. (Quick Tip: This code is
usually present at the first lines of your template’s coding).
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now just next to the highlighted code (as shown above) add xmlns:og='http://ogp.me/ns#'. Once everything is down, it would somewhat look like this. (Quick Tip: Make sure you leave a space between these two codes).
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now you need to search for the <body> Tag. After finding it, just below it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id.
<div id="fb-root"></div><script>window.fbAsyncInit = function() {FB.init({appId : 'YOUR_APP_ID',status : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : true // parse XFBML});};(function() {var e = document.createElement('script');e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script>
Now you need to add Facebook Open graph Meta Tags, We have written a
detail tutorial on it that can be viewed from here. However, search for </head> and just above it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id.
<meta property="fb:app_id" content="YOUR_APP_ID" />
Step#3: Adding Facebook Comments in Blogger:
Last step is to implement Facebook Comments using the HTML Code. In the template, search for <b:includable id='comment-form' var='post'> and
just below it paste the following HTML Coding. Incase, you are unable
to find <b:includable id='comment-form' var='post'> then you can
paste it just below <div class='post-footer-line post-footer-line-1'></div> (Make sure you repeat the process because there are more than 1 tags on you theme).
<b:ifcond='data:blog.pageType == "item"'><divstyle='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><scriptsrc='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div><fb:commentscolorscheme='light'expr:href='data:post.url'expr:title='data:post.title'expr:xid='data:post.id'width='550'/></div></div></b:if>
Note: You can also customize the widget of the comment box by adjusting 550 the numbers in the below code.
Congratulations: You have successfully learned how to
add Facebook Comments in blogger blog. You can also preview your posts
to see everything is working in an order or not.
We hope this tutorial has helped you in adding Facebook comments in
blogger. Are you using Facebook comments in your blog? If yes, then
please take few minutes to tell us about your experience in the comments
below.
