How to Add Facebook Comment Box on Blogger
Cara nak masukkan Facebook Comment dalam Blogspot
Review
Facebook has announced a new milestone for its Comments Box plugin: more than 300,000 websites have implemented it so far. That’s an impressive number for a product that has been available for about four months: the Comments Box was released on March 1, 2011. By April 12, 2011, it was being used on more than 50,000 sites. We can thus surmise that adoption has recently accelerated and the plugin is being accepted as a viable comments solution.
In response to partner feedback, Facebook has added two new features to make it easier for moderators and users to control how comments are displayed: boosting comments and chronological sort.
Boosting comments allows moderators to ensure that high-quality comments appear at the top of the Comments Box. This feature is particularly useful for website owners that want to highlight one or more particularly interesting comments in response to an article or editorial to help spark an interesting conversation.
Let's begin,
1) Go to Facebook Developers Page to create a new app.
2) Create New App with your blog details as shown below. Make sure it will mark as Valid & Available.
3) Write down Security Check Requirement and click Submit.
4) Copy your Facebook App ID and paste it on Note Pad for being using later.
5) Login Blogger > Design > Page Elements > Edit HTML > Expand Widget Templates
6) Press Ctrl+F and find this <html
7) Copy code below and replace with <html
<html xmlns:fb='http://www.facebook.com/2008/fbml'
8) Now find <body> or if you can't find body tag, you can try find the code below.
<body expr:class='"loading" + data:blog.mobileClass'>
9) Then, copy the code below and paste it below the line that you found.
<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>
* Change YOUR_APP_ID with your App ID that you copied before.
10) Now find this </head>
11) Copy code below and paste it above Head tag.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='BloggerkiniTestBlog' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/>
<meta content='YOUR_APP_ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/Bloggerkini' property='fb:admins'/>
<meta content='article' property='og:type'/>
* Replace BloggerkiniTestBlog with your blog name.
* Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
* Replace YOUR_APP_ID with your App ID.
* Replace http://www.facebook.com/Bloggerkini with your Facebook page url.
12) Now search for this code.
<b:includable id='comment-form' var='post'>
13) Copy code below and paste it below the line.
<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='500'/></div></div> </b:if>
* You can change the width of widget by replacing 500 with your desired width.
* As you all know you can change the color scheme to light or dark.
14) Save your Template. Done!
IF you want to hide your Blogger comment box, simply edit this setting.
* At Blogger > Settings > Posts and comments > make sure Comment is set to Hide.
Save your Setting. Done!
* At Blogger > Settings > Posts and comments > make sure Comment is set to Hide.
Have a nice day!
.
OR
Pick a 
20 comments:
free facebook comment box for blogger tutorial
tengkiu dood
THANK YOU IT WORKS
Wow! This is the FB-comment-box-to-blogger tutorial that worked! Thanks, great post =)
how you you confirm if it worked? and does this work for FB fan pages? In other words, can my facebook url listed in the html in step !! be my fan page or does it have to be my personal page?
nothing happens on my page :/
Works great, but one problem... when i tried to hide the comment box provided by blogger, it also hid the FB comment box. How do I show ONLY the FB comment box? Thanks
Hello brother pls help .
nothing happens dude
i can't find out below, so please help me how to find below
Please follow my tutorial step by step and do not miss any step.. then, you will get a result like my sample blog here - http://bloggerkini-testblog.blogspot.com/2012/06/facebook-comment-box-on-blogger.html
great...
it works for my blog...
look my blog http://gpzaman.blogspot.com
Hi! I did all the steps but then it didnt work...now my my comment box is missing. pleaso help me...?
Me do not mean nothing.
its work...
tq...
:)
visit my blog http://portalkini.blogspot.com/
@nazerin, nice one.. good luck..
it works~ thanks, but for several copied from other blog posts dont appear.
Hi -- Thanks for your post -- I wanted to put in my comments plugin UNDER the blogger comments....so I had moved the part that goes under x< div class = 'post - header-line-1'/>....to be under comments/ and also I tried comment-thread/ ....it comes up on some pages, but isn't there on others...and seems to disappear altogether when a blogger comment is published. Thoughts??
Thank you so much!
My blog is http://makeprofitsonlinegr.blogspot.gr/
I did all the steps then it work thanks :)
www.imadeonline.com
Post a Comment