2009 was a big year for Facebook Developers as they introduced their best social plugin to the Largest Community, to the World. They were succeeded in that attempt and you will see now in most websites there are Facebook Comment box apart from normal comment box. Adding an fb comment box will also boost your traffic that flows from the fb to your Site. So Are you ready for little Blog Customization ?
Step 1: Disable Default Comments
Let's start with disabling blogger default comments because you might not want to have 2 comments forms. Now to do this,
- Log into Blogger account and go to settings > posts and comments
Next choose Hide "Show Comments" field and hit Save Settings
Step 2. Generate your Facebook App ID
To get a facebook comments box in your blogger blog you should generate your own Facebook APP ID/API KEY,
Log into your Facebook and go to https://developers.facebook.com/apps/
Then click + Create New App at the top right corner of the page.
Enter an application name, check "I agree to the Facebook Terms" and click "Continue".
After passing a capcha you will get a new form
App Namespace: Enter anything but if you use more than one word use "-" as a seperator not space.
App Domain: You must type blogspot.com but if your using blogger custom domain you should enter your domain name.
In the end select "Website" to integrate with facebook. and enter your Blog URL and hit Save Changes.
On the next page Facebook will give you the App ID
Copy Down your App Id from Summary
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.
- xmlns attribute
- Javascript SDK
- Open Graph Protocol tags
Adding the xmlns attribute:
Now go to your Blogger account once again and navigate to,
- Template > Edit HTML, hit Proceed and check Expand Widget Templates
- Using Ctrl+F Search for <html> tag, and before the tag's ">" greater than mark you should put this below code to inside it.
xmlns:fb='http://www.facebook.com/2008/fbml'
Adding the Javascript SDK Code:
- Search for <body> tag and below/after it paste the following code
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId : 'YOUR APP ID',
status : true,
cookie : true,
xfbml : true
});
};
(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 the area highlighted in Green Your App ID with your App Id found in Second Step
Adding the Open Graph protocol tags:
Copy the Following code and paste it just before or above </head>
<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='YOUR-BLOG-NAME' property='og:site_name'/>
<meta content='LOGO-URL' property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Change your Blog name with the Highlighted Maroon Part
Change your blog Logo Url with the highlighted Purple Part
Change your App Id with the Green Part
Change your FB Profile Id with the Blue Part
Step 4. Adding the Comments Box to your Blogger template
Search for the <data : post . body> in your Template,
when you do that remember to Expand your Widgets by ticking the top-left Corner box.
If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:
<div class='post-footer-line post-footer-line-1'>
Paste the below code just after/below it
<b:if cond='data:blog.pageType == "item"'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='https://bloggingindustries.googlecode.com/svn/trunk/BI comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div><div align='right'><a href='http://www.bloggingindustries.blogspot.com/2012/12/customized-facebook-comment-box-for.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div></div></p></b:if>
Finally Put your Cursor to Save Template to Finish the Job
If you want to change your comment box at anytime log on to http://developers.facebook.com/tools/comments and click the settings at the rignt.
A Window will pop after it just like this
Hope this article was Helpful to you and it Was bit longer, my Apologies for It
Warning : Don't Copy from this Post Without Linking Back to the Post
Hi! I am Dulshan, a Pro Blogger, an E-money Guider for the those who need. I have created Blogrithm and currently runs it. Helping to the People who struggle to make money from the Internet is the cause which motivate me in creating the Site. 
Hello,
ReplyDeleteI have been trying to put Facebook Comment box on my blog from the last two days. Tried 3 different methods… BUT, it doesn’t just show up!!! My template is a pinterest themed template (magazine template).. my blog’s link – http://www.healthnwellness365.blogspot.com
So, I have 3
Please help me out!! I want it badly and that too, ASAP..!!!
This is one of my Testing zones look at the Facebook comment area,
Deletehttp://mywidgettesting.blogspot.com/2013/01/each-is-unique.html
I will modify the codes to other templates, you will be able to use it on Before Sunday.
Sorry, I had been away from the computer for quite a long time. Did you figure out why I can't add the facebook comment box to my blog? My blog's link is www.healthnwellness365.blogspot.com and the template i have used is called Pinfinity (by SoraTemplates)
DeleteThanks for replying.
Mr. B
I have solved the Problem and I will edit this post by adding few options and it will work on yours then, wait until 3/2/2013 and come and see the post.
DeleteProblem Fixed: Go through gain in the post and Try it, It will certainly Work.
DeleteGreat post. I just located your blog and wished to let you know that I have certainly loved reading your blogs. At any rate I’m going to be subscribing to your feed and I really hope you are writing again soon.
ReplyDeleteYes I hope to write again in this March, I was tied up with my exams and I'll update this blog for My Loyal Readers every Time. :)
DeleteHey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.
ReplyDeleteIn kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results just remove the div tags and give the object some width/height parameters. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)
<!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='' type='text/html' width=''>
</object></div>
<!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...
Thank You for your Kindness and Hope you'll enjoy the other Posts also :)
Delete