There are few steps to use Facebook Comment box to your blog.With the help of this comment box your blog visitors can post comment more quickly & when they post any comment it will show on their Facebook wall,from there you will got more traffic to your blog.So follow the below steps to insert this comment box to your blog.
STEP-1
DISABLE DEFAULT COMMENT OPTION
Go to your Blogger account and then go to comment option,now chose Hide option here & save settings.
STEP-2
CREATE YOUR FACEBOOK APP ID
To create Facebook App ID first go to Facebook Developers.Then Create a new application by click on Create Application.Then put connect url & Base domain.
Example
Connect Url: http://technosk.net
Base Domain:blogger.com
then save it to create an App ID.Now save the APP ID in a text file.
STEP-3
INSERT HTML & JAVASCRIPT CODES TO YOUR BLOG TEMPLATE
First go to Blogger account & then click on Layout & click on edit HTML & check on Expand Widget Template.
Now find for
;html
After the above code add the following code
xmlns:fb=’http://www.facebook.com/2008/fbml’
Leave space after & before the above code.
STEP-4
INSERT YOUR FACEBOOK APP ID
Find
<body>
After the above code put the below 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>
In the place of YOUR APP ID put your app id which you got before.
STEP-5
ADD OPEN GRAPH PROTOCOL TAG
copy the below code & paste just before
</head>
code is
<b:if cond=’data:blog.pageType == "item"’>
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<b:else/>
<meta expr:content=’data:blog.title’ property=’og:title’/>
<meta expr:content=’data:blog.homepageUrl’ property=’og:url’/>
</b:if>
<meta content=‘MY-SITE-NAME‘ property=’og:site_name’/>
<meta content=’http://google.com/help/hc/images/logos/blogger_logo.gif‘ property=’og:image’/>
<meta content=’YOUR-APP-ID‘ property=’fb:app_id’/>
<meta content=’YOUR-FACEBOOK-PROFILE-ID‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>
and change the colored text to the following,
Change : MY-SITE-NAME with the one you want to appear when a user likes a page.
Change: http://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.
Change: YOUR-APP-ID with your application ID number.
Change :YOUR-FACEBOOK-PROFILE-ID with your own Facebook user profile ID.
STEP-6
ADD COMMENT BOX STYLE TO BLOGGER TEMPLATE
Find the below code
<data:post.body/>
Now after the above code place the below code.
<b:if cond=’data:blog.pageType == "item"’>
<p align=’left’><img alt=” class=’icon-action’ height=’51’ src=’http://4.bp.blogspot.com/-hhAlR-5351A/TmmttogahPI/AAAAAAAAAGU/w6BhftYRazA/s1600/comment-here.JPG’ width=’331’/></p>
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/>
<div><fb:comments width=’450′ expr:title=’data:post.title’ expr:href=’data:post.url’ expr:xid=’data:post.id’/></div>
<div style=’background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;’> <img alt=” class=’icon-action’ height=’16’ src=’http://2.bp.blogspot.com/-JMihbE2oXzI/TlnQrniakeI/AAAAAAAAAFY/fNwmJI9Adts/s1600/TECHNO.jpg’ width=’16’/> <b><a href=’http://www.technosk.net/’ target=’_blank’ title=’Another Technology Blog’></a> </b></div>
</b:if>
Change width here in position of
width='450'
Save all settings & enjoy it.
