Adding facebook comment box to your blogger
Few days ago I wrote about adding facebook comment box to your website. To add similar comment box to your blogger a few more steps are required. Adding this box helps users to comment to your posts easily in one click without having the blogger account. Let us see how we can embed it.
1. Create a Facebook application. (Click here to follow the steps).
2. Go to your Blogger->Design->Edit HTML.
3. Proceed to edit HTML and check Expand Widget Templates check-box (Back up your code before editing anything).
4. Search for <html and enter the following code just after it leaving a space.
xmlns: fb='http://www.facebook.com/2008/fbml'
5. Search for <body expr:class='"loading" + data:blog.mobileClass'> and copy the following code just below it.
Replace APP_ID with your facebook application ID.
6. Search for </head> and copy paste the following code just above it.
Replace YOUR BLOG TITLE, IMAGE-URL, APP_ID and http://www.facebook.com/manishgubaju with your facebook profile link.
7. Search for <b:includable id='comment-form' var='post'> and just below it copy the following code.
You can choose your colorscheme as light or dark and also vary the width of the comment box as shown above.
8. Save your template and you are done.
1. Create a Facebook application. (Click here to follow the steps).
2. Go to your Blogger->Design->Edit HTML.
3. Proceed to edit HTML and check Expand Widget Templates check-box (Back up your code before editing anything).
4. Search for <html and enter the following code just after it leaving a space.
xmlns: fb='http://www.facebook.com/2008/fbml'
5. Search for <body expr:class='"loading" + data:blog.mobileClass'> and copy the following code just below it.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '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>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '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 APP_ID with your facebook application ID.
6. Search for </head> and copy paste the following code just above it.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='YOUR BLOG TITLE' property='og:site_name'/>
<meta content='IMAGE-URL' property='og:image'/>
<meta content='APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/manishgubaju' property='fb:admins'/>
<meta content='article' property='og:type'/>
Replace YOUR BLOG TITLE, IMAGE-URL, APP_ID and http://www.facebook.com/manishgubaju with your facebook profile link.
7. Search for <b:includable id='comment-form' var='post'> and just below it copy the 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>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
You can choose your colorscheme as light or dark and also vary the width of the comment box as shown above.
8. Save your template and you are done.
Comments
Post a Comment