Everyone knows that Facebook comment box is one of the useful tool for bloggers to increase conversations. To have a facebook comment box you must have a facebook application if not then go to Facebook Developers. and create application on facebook and keep the application id along with you.
So now I am going to teach you that how to add/integrate Facebook comment box to your blogger in some simple steps. Before getting into the process I recommend you to back up your template and previous comments in blogger wont be visible if you use Facebook commenting system.
Follow the below steps
1: Disable blog’s default comment box.
- Login to your blog –> Dashboard->Settings->Comments – >
- Choose Hide option then click to Save Settings button.
2: Find xmlns:fb='http://www.facebook.com/2008/fbml' line.
3: after the tag put the following code
<div id="fb-root">div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId:'Your FaceBook APPID',
status : true, // check login status
cookie : true, // enable cookies
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>
4: Before ending of the tag add following code
if cond='data:blog.pageType == "item"'>
'data:blog.pageTitle' property='og:title'/>
'data:blog.url' property='og:url'/>else/>
'data:blog.title' property='og:title'/>
'data:blog.homepageUrl' property='og:url'/>if>
'MY-SITE-NAME' property='og:site_name'/>
'http://google.com/help/hc/images/logos/blogger_logo.gif'
property='og:image'/>
'YOUR-APP-ID' property='fb:app_id'/>
/* This is different then application id, every facebook user
has their own unique id, 16: you can get it from the
address bar as soon as you login to facebook it will looks like
http://www.facebook.com/?ref=home#!/profile.php?id=numbers */
'YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
'article' property='og:type'/>
5: Find the following Code
<data:post.body/>
6: Add the following Code
<b:if cond='data:blog.pageType == "item"'>
<div>
<fb:comments expr:title='data:post.title'
expr:url='data:post.url'
expr:xid='data:post.id' width='450'/>
div>
b:if>
This video also helpful to you:
This video also helpful to you:
0 comments:
Post a Comment