One thing many blog and website owners don’t know is how important this feature is and so they keep neglecting it. Since almost all the world’s population are Facebook users, it means that you will be creating more awareness for your blog and its content. With this comment system, your blog will be getting less anonymous commentators as the Facebook comment displays the commentators Facebook profile name and picture.
Advantages of Using Facebook Comment System
- The most important is the reduction of spam and bot comments as every commentator must be a registered Facebook user and so you will be able to identify each and every individual commenting on your blog or website by their Facebook profile picture.
- For every comment a user leaves on your blog or website, he/she automatically shares the content of that page with their Facebook friends as it will appear on their timeline thus creating more awareness for your blog or website as i have mentioned above. Replies to such comments can be done on your blog or on the user’s Facebook page.
Disadvantage of Using Facebook Comment System
The major disadvantage of using the Facebook comment system is that if the Facebook server goes down (rarely happens), your blog or website comment system automatically goes down too. Besides that, implementing the Facebook comment system into your blog or website increases the blog’s loading time.
Mind you, the write ups made using the Facebook comment system will in no way add to your blog’s search engine value as the default blog commenting system does.
Well with that said, here is how to add and implement the Facebook comment system
Step 1: Creating the App on Facebook
- Create the App by visiting http://developers.facebook.com/apps/.
- Click on App on top blue navigational bar and select “Create a New App”.In the pop up page, enter the name you wish to call the comment system in the field for Display Name. Leave the Namespace blank since it is optional and then select Apps for Pages from the drop down list under Category before finally clicking on the Create App button.
- Immediately after you click on the Create App button, you
will be taken to a page where the details pertaining to the new
application you just created will be displayed. Locate and copy the App ID and paste in notepad as you will need it later when installing the comment system on blogger.
- As usual, before you perform any task on your blog, you will need to login to your Blogger dashboard.
- From the dashboard, navigate to Template >>> Edit HTML.
- Once the page opens, search for <html and add the line of code below right in front of it
xmlns:og='http://ogp.me/ns#
make sure there is a space between <html and the xmlns:og='http://ogp.me/ns# i.e. you should have something like <html xmlns:og='http://ogp.me/ns#
- Next, using CTRL + F search for <body>. Copy the code below and paste just below/after it
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Comment_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>
- Replace Comment_APP_ID with the one copied to notepad when you created the comment App on Facebook.
Step 3: Adding the Facebook Open Graph Meta Tags
Still on the Edit HTML page, search for the </head> tag and just above/before it, copy and paste the below given code.
<meta property="fb:app_id" content="Comment_APP_ID" />
Remember to replace Comment_APP_ID with the App ID you copied to notepad.
Final Step: Enabling the Facebook Comment
- Finally, still in the Edit HTML mode, search for
<b:includable id='comment-form' var='post'>
Or
<div class='post-footer-line post-footer-line-1'></div>
- If your blog template contains more than one of the above line code, simply copy the below code and paste just immediate below/after every of the <b:includable id='comment-form' var='post'> or <div class='post-footer-line post-footer-line-1'></div> you find.
<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>
- Now preview your template to see if the comment box is appearing. Once you are satisfied it is, then click on Save Template and you are done.
Further Customisation
By default, the comment box have a will have a width of 550. You can change that value by either increasing or reducing it to fit your blog’s looks.
No comments:
Post a Comment
Leave Your Comment