How to add a Facebook comments box for my blog...
To add above comments box for your blogger blog, Follow me.
- Go to Facebook developers page and click Create a application. Some time you have to register as a developer for this step.
- Fill your app name and name space to continue to next step.
- Now add your app domain, category and add your blog url below. Now save changes.
- This is your app ID.. Copy it to text document.
- Now go to blogger -->Design and download your template.
- Now click Edit HTML and search for <html and replace that with this code.
xmlns:fb='http://www.facebook.com/2008/fbml'
- Now search for <body> and just after <body> paste code given below. Replace YOUR_APP_ID with your app ID
<div id='fb-root'/>
<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 after it paste code given below.
- Replace Doctor Blog with your blog name.
- Replace YOUR_APP_ID with your facbook app ID.
- Replace BLOG-LOGO-IMAGE-LINK with your image link of your selection. (40px,40px,gif format)
- Replace http://www.facebook.com/doctorblog with your facebook profile link.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Doctor Blog' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/doctorblog' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Now find <b:includable id='comment-form' var='post'> and just after that code paste following code.
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 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='520'/></div>
Now save your template and you can see your FB comments box now.
.jpg)
.jpg)
0 comments:
Post a Comment