What is the new facebook comments features.
- Threaded comments : reply to comments.
- User network : now it’s displaying the comment author not only name, but his profile info as well
- Permalink to specific comments : Permalinks have now been assigned to each comment so people can share links and be directed to specific comments.
- Notifications : sent to users will also go to the permalink, making it easier to respond. For example, clicking on the notification below will take you to the permalink of the original comment.
- 2 Color schemes, regular light, and the new dark colors.
now let’s do it, don’t worry, i know that must of you tried to add it to blogger blogs, with no result, but today you’ll see how to add it in really easy steps and it’s 100% working. but please be careful and pay attention for all the details.
This tutorial is updated.
Step 1. Disable Default Comments.
The first thing you should do it to disable blogger default comments. because you don’t want to have 2 comments forms.
go to your blogger account, navigate to
settings >> comments
and next to comments field choose
Hide, then scroll down and click
Save Settings
Step 2. Generate your Facebook App ID.
now you should generate your own facebook app id, it’s really easy and one step process,
just go to this page,
facebook developers
then click
+ Set Up New Application
enter your application name,
( you can type any name )
and check
agree and click
Create Application
then click on Connect tab
(on the left tabs-list) or see the next image.
and fill the following info.
Connect URL : Enter your blog url and you must enter it with an ending dash.
(for example: http://myblogname.blogspot.com/) .
Base Domain you must type
blogspot.com
then click strong>agree and click
Save Changes
on the next page facebook will generate you alot of info. you’ll need only one line, it’s
App ID:
just copy it and keep any where, we’ll need it in the next steps. please see the following image to see where you’ll find your facebook
App ID:.
Step 3. Codes To Add To Your Template.
you must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
and in this step we’ll add the following codes,
- xmlns attribute
- SDK script
- Open Graph protocol tags
- Adding the xmlns attribute :
please go to your blogger account again, and navigate to,
layout >> edit html >> and check
Expand Widget Templates
then find the following code,
<html
you’ll find it on the top of your code. second or third line, and after it add the following code,
xmlns:fb='http://www.facebook.com/2008/fbml'
you must type a space before it and after it,
here is an example.
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >
- Adding the SDK script Code :
search for
<body>
and after it add the following code,
<div id="fb-root"></div>
<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>but please don’t forget to change
YOUR APP ID to your app id ( you got it in the previous step ).
- Adding the Open Graph protocol tags:
copy the following code.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='MY-SITE-NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
and change the colored text to the following,
Change
MY-SITE-NAME with the one you want to appear when a user likes a page. (Gil likes Helping on Facebook)
Change
http://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.
Change
YOUR-APP-ID with your application ID number.
Change
YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
after making this changes add the above code just before
</head>
now we finished adding the facebook codes to your template, please don’t touch anything and continue to the next step.
Step 5. Adding the Comments Box to your blogger template.
please find the following code.
<data:post.body/>
and after it, please paste one of the following codes.
For Light Comments box
( like the one in the demo )
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxg1pwCI6LAik04-deVw0wc4-WEjoWzCnQkyDN4KTe0AFU_mj3nHmjkcQq0vYyD1GuLxxnUaCCa3UWUtDW44NYtptAwjfB6bnbs_RrY5nWijExIkeWkRdXRah_qUMZOOe5Q37TffECJ6c/' width='331'/></p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>
For Dark Comments box
( If you prefer to display the comments box in a dark colors. )
<data:post.body/>
and after it, please paste one of the following codes.
For Light Comments box
( like the one in the demo )
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxg1pwCI6LAik04-deVw0wc4-WEjoWzCnQkyDN4KTe0AFU_mj3nHmjkcQq0vYyD1GuLxxnUaCCa3UWUtDW44NYtptAwjfB6bnbs_RrY5nWijExIkeWkRdXRah_qUMZOOe5Q37TffECJ6c/' width='331'/></p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>
To change the width of your comments box, please change
450 to what ever you want, it’s in pixels,
and now please click
Save Template , then check your blog. i wish it looks great and works perfectly.
If you want to change the image then replace the url of the image with your own image or if you don’t need any read more button , then replace the code in final step to this one : 
