Adding a Facebook Comment Box on your blogger blogs is a great idea. Visitors will have an option to use the common blogger comment box or use the Facebook Comment Box in the case that they are online in Facebook. This is really a great plugin created by Facebook and was launched last 2009.
So lets get going!
Adding A Facebook Comment Box On Your Blog
I. Get a Facebook Application ID
2. Type your "Blog Title" on the App Name and click continue.
3. Now your finish making your application. The digits inside the red rectangle is your Application ID.
II. Adding The Facebook Comment Box On Blog
1. Go to Dashboard >> Design >> Edit HTML.
2. Click on "Expand Widget Templates".
3. Search for <html and just after it give a space and add this code,
xmlns:fb='http://www.facebook.com/2008/fbml'
4. Next search for <body> and after it add this code,
<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>
IMPORTANT: Replace "YOUR_APP_ID" with you Application ID that you made earlier.
5. Next search for </head> and just above it paste the following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Smashing Notes' 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/jai.cuizon' property='fb:admins'/>
<meta content='article' property='og:type'/>
IMPORTANT: You have to make the changes below:
Smashing Notes - your blog title.
BLOG-LOGO-IMAGE-LINK - your blog logo image link.
YOUR_APP_ID - your Application ID.
http://www.facebook.com/jai.cuizon - your Facebook user profile link.
6. Now search for the code below,
<b:includable id='comment-form' var='post'>
7. Add this next code after the code in step 6,
<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.smashingnotes.blogspot.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://smashingnotes.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>smashingnotes.blogspot.com</a></b></div></div>
</b:if>
IMPORTANT:
- If you want to use the dark scheme then simply replace light with dark
- To change the Comments box size, change this value width='520'
- To change the footer credits size, change this value width:510px
- Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='480' then set footer-size to width:470px
0 comments:
Post a Comment