The Facebook comment box is looking very beautiful and one can comment very easily. The Blogger is giving you an default comment system that can't give you direct link to Facebook.Many bloggers are websites are added this comment system after adding the comment system they have getting huge no of comments for her all contents. Now visitors feedback is much more important if you working hard in your blog because visitors feedback is one of the best trick for bloggers. Many times many bloggers visitors are not comment your article because of your unprofessional blogger comment system. This Facebook comment box has been introduced in 2009 by Facebook. The Facebook comment box is fully developed now you can use in your blog and enjoy your self. In our previous post i will post that Add the Facebook like box in below blogger post. Our previous trick helping the new created bloggers. In this comment comment box all can use their Facebook ID, AOL, Hotmail to leave her comment.
Now take a look the below image that how the Facebook comment box will looking.
The comment image is showing light scheme of the Facebook comment box if you are interested to using dark scheme then you can.
If you are really interested to adding the Facebook comment system in your blog then follow my below easy steps to get started.
1. First Get Facebook Application Id
1. Go To Facebook Developers Page.
2. Then select create a app then enter your App name as your Blog name and then click continue like below image.
3. Then hit the continue button.
4. Then an security page comes enter their captcha word and click submit like below image.
5. After submitting your check code you will see a below like page.
In the above image like you will get your app ID and APP secret. If you are interested to changing your app icon then you can change by clicking edit icon link.
6. Now copy the app id and paste in your computer notepad.
Then below you fill the App display name, App name space, contact email, app domain and choose a category like below image:
7. Then proceed to below select how your app integrates with Facebook. Then hit the website and enter your blog URL. Then hit the Save changes button below like image:
8. Now proceed how to add the Facebook comment box in your Blog.
2. Adding the Facebook comment Box in your Blog
1. Go To Blogger > Design > Edit HTML > Expand Widget Templates
2. Backup your template
3. Search the below code using Ctrl + F
<html
4. Just after it paste the below code
xmlns:fb='http://www.facebook.com/2008/fbml'
5. Then search the below code using Ctrl + F
<body expr:class='"loading" + data:blog.mobileClass'>
6. Just after paste the below 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>
7. Replace the your App ID with your Facebook registered App ID.
8. Then search the below code using Ctrl + F
</head>
9. Just above it paste the below code
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='MY Blogger Club' 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/mybloggerclub' property='fb:admins'/>
<meta content='article' property='og:type'/>
Make some customization:
Replace MY Blogger Club with your blog title/Name.
Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo.
Replace YOUR_APP_ID with the your Facebook Application ID
Replace http://www.facebook.com/mybloggerclub with your Facebook user profile link
10. Then search the below code using Ctrl + F
<b:includable id='comment-form' var='post'>
11. Just after it paste the below 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 widgets' href='http://www.mybloggerclub.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>www.mybloggerclub.com</a></b></div></div>
</b:if>
Make some customization:
If you are interested to change the color scheme light or dark that your choice.
To changing the comment box size change the value width='520'.
12. Save your template.
Visit your Blog post and enjoy with new comment system.
Respect copyright
This above comment code and images are fully Created by My Blogger Club. If any one interested to posting the above code in her blog then try to give a backlink, If you don't give a link then i will give you a DMCA complain.
Need Help?
If you have any problem to adding the Facebook comment box in your blog feel free to ask me here to leave comment i will try i soon as possible to solve your problem.
This comment has been removed by a blog administrator.
ReplyDeleteI am getting this massage when you post a comment, very one can see it how can I stop it.
ReplyDeleteWarning: http://thewrestlingfansreview.blogspot.com/2012/03/divas-picture-of-week-march-1-2012.html is unreachable.
@cocktaildresses thanks.
ReplyDelete@Hbayas this is Facebook comment is working perfectly i have visited your site. If you have getting problem then you can ask me here.
Thanks for the Great Tips. . .
ReplyDeleteThank You So much
ReplyDeletetnx you are the best
ReplyDeleteTerrific work! This is the kind of information that are meant to be shared across the internet. Disgrace on the seek engines for now not positioning this publish upper! Come on over and visit my web site . Thanks =)
ReplyDeleteCool! this worked great. I am so happy to have a facebook comment on my blog.
ReplyDelete