Previously we had shared about to add Google plus commenting system in blogger as Google plus is also heading towards becoming a popular social network. But what about already number one social media sites which is Facebook? Being number one social network, it has largest number if users, so it is quite beneficial if you add Facebook comments system in blogger. So today we are going to discuss about how to add Facebook comments system in blogger easily.
Advantages of using Facebook Comment System:
Facebook being most viral and used social network, it is one of the reason why you should opt for its comment system. Apart from this there are many other reason for you to choose it which are discussed below.
- When someone will reply to comments or like a comment, then Facebook sends notification which makes user to participate more in conversation and thus building a greater community around your blog.
- If a visitor is not on Facebook, or not logged in and wants to comment, he can easily do so by using his other Id including yahoo etc which was not there in Google plus commenting system.
- Well you might be thinking about spammers, well for that Facebook automatically treat that spammers with captcha code without affecting any other comments.
Disadvantage of using Facebook Comment System:
- One of the big disadvantage of using Facebook comments system in blogger is that the content in comment would not add an additional value to search engine and will not be indexed.
- Therefore if you got large number of comments, then I would not recommend you to use it as it might get in loss as comment content will not be index, but if your blog doesn't get comments then it would be beneficial as more number of uses can participate easily.
- Other disadvantage is that the Facebook scripting may not load sometimes due to server errors or connectivity errors which may be inconvenient for your readers who wants to comments.
How to Add Facebook Comments in Blogger:
1. Creating Application on Facebook:
Initially you need to do is to create an App ID on Facebook and that can be done easily by Facebook Developer.- Login to your Facebook account
- And go toFacebook Developers website
- Click on Create New App button.
- A Small pop out will appear which would ask you to insert little information about your application.
- Write the App name and press the continue button.
- Now you in next page it would provide you your application details like App ID, App name and etc.
- You need to copy these keys and enter them later.
2: Installing Facebook Comments in Blogger:
This part contains adding code to blogger.
- Login into your Blogger account.
- From dashboard go to Template >> Edit HTML and search for the following HTML. Make sure to backup your template first.This code is usually present at the first lines of your template’s code.
<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#'.
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
- Now search for the <body> Tag.
- 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 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" />
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.
- Make sure you repeat the process because there are more than 1 tags on you them.
<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>
That’s it You have successfully added Facebook Comments in blogger blog. You can also preview your posts to see everything is working in an order or not. Please share your views if you are using Facebook comments in your blog in the comments below and if you face any problem while implementing above code you can ask for the help in the comments below.
Post a Comment
Thank you