Add Facebook Comments System In Blogger ~ Tech Shadow

Blogger also providing their comment
system and in some templates have
threaded comments system in blogger.
But now a days social media is increasing
and most of traffic also come from social
media therefore adding Facebook comment
system is a good idea for get feedback
from social media king site Facebook.
In today’s tutorial we will discuss on
Facebook comment system and learn how to add this system in Blogger blog / site. So, Lets start our today’s tutorial.

How To Get Facebook App ID?

This tutorial divided in some steps you need just follow these steps giving below.

First Go to Facebook Developers Page
Give you app name as your site title name etc and click on continue button as showing below

Now fill security check captcha and then continue
Now you go on a new page here you can see your app id and we need it in next steps

How To Add Facebook Comments In Blogger?

First go to Blogger > Template > Edit HTML
Now search for <html and just after it give a space and paste the below code

xmlns:og='http://ogp.me/ns#

Now search for <body> tag and just below it paste the following code

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

Replace YOUR_APP_ID with your Facebook Application ID
Now search for </head> and just above it paste the below code

<meta property="fb:app_id" content="YOUR_APP_ID" />

Replace YOUR_APP_ID with your Facebook Application ID
Now search for <b:includable id='comment-form' var='post'> just after it paste the below code

<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 click on Save Template button and you are done !
Now you have successfully added Facebook Comments System in Blogger for result check preview of your site

If you like our tutorial then please share with your friends and give me your feedback via comments Take Care !

Socializer Widget By My Blogger Widgets

SOCIALIZE IT →

Tech Shadow

Friday, 18 October 2013