After including this plugin into your website or blog user can use facebook ID to post comments.
To use this plugin in blogger let start with following steps. Thanks to ABT and MBT for this super plugin
Start with Creating Facebook Application ID
Step 1. Create Facebook Application ID
Step 2. Fill All blog details and hip create the app button. Now you will get app Id. Save this Id with you.
Step 3. Go to setting and change domain name to blogspot.com and save the changes.
Now get started with Facebook comment box for blogger.
Note: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts.
Step 4. Open your template layout and search <html> in the template. Paste following code just after it.
xmlns:fb='http://www.facebook.com/2008/fbml'
Step 5. Now search for <body> in template. Now find following code in your template.
<body expr:class='"loading" + data:blog.mobileClass'>
Step 6. Paste following code just below the above code. Replace your Id marked in red below.
<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>
Step 7. Next search for </head> in your template. Make blog logo by 40x40 for best results.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='B Widgets 4 All' 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/bwidgets4all' property='fb:admins'/>
<meta content='article' property='og:type'/>
Step 8. Now search following in the template.
<b:includable id='comment-form' var='post'>
Step 9. Paste following code below above mentioned codes.
<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;'></div></div>
</b:if>
Step 10. You can change height and width according to your blog template size. Save your template and you are done. Enjoy the plugin.Pl consider sharing if you liked the trick.
Hi! I am K Ajay, currently live in Chandigarh, India. A young Web Designer, Pro Blogger, Graphic Designer & an addicted Web Developer. I love working on Blogger and WordPress using CSS Tricks,and Web Designing.
0 comments:
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).
Post a Comment