Have You Lately Seen Facebook Commenting System Enabled on Blogs and you have wanted to add it too ? Then wait no more because it is definitely a good idea. It definitely needs some HTML and Programming Skills but what the heck , lets just get you started with it.
REMOVING THE DEFAULT COMMENTS:
First Things First. You have to remove the existing Blogger Default comment box because you two comment form is not a great idea. Go to your Blogger account, navigate to Settings >> Posts and Comments and next to comments field choose Hide, then scroll down and click
STEPS TO CREATE THE COMMENT BOX ON FACEBOOK FOR BLOGSPOT BLOG
- You will have to Create a New Facebook on Facebook developers Enter Your App Name ( you can type any name ) and Your Blog Address and check agree and click Create App
- Fill the following info
- Site 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:
ADDING CODE TO YOUR BLOGGER TEMPLATE
Now this step is really critical and important as well so be careful about it. 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 :
Firstly, Go to your blogger account and navigate to, “layout >edit html >” and you must check “Expand Widget Templates”
then find the following code:
<html
You’ll will be able to see this in the top of your template code. Second or Third line most probably, 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' >
- The SDK script Code :
Now You Have To Search for
<body>
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>
Do Not Forget to change YOUR APP ID to your app id ( you got it in the First Step )
STEPS TO IMPLEMENT THE COMMENT BOX ON BLOG
- The Open Graph protocol tags:
Copy the following Code and change the id’s with your ids.
<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'/>
The changes needed to be done will be replacing MY-SITE-NAME with the one you want to appear when a user likes a page. (Gil likes Helping on Facebook)
The Image URL http://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.
Replace The YOUR-APP-ID with your application ID number.
Replace YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
Once these changes are made add the above code just before
</head>
Final Step: ADDING THE FACEBOOK COMMENT FORM TO YOUR BLOG
Find The Following Code First:
<data:post.body/>After it please paste one of the following codes. For Light Color Scheme Comments box.<b:if cond='data:blog.pageType == "item"'> <p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' 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://images.techieshome.com/2011/11/techieshome-blogger-templa.gif' width='16'/><b><a href='http://techieshome/' target='_blank' title='blogger templates'>Techies Home Facebook comments for blogger</a> brought to you by <a href='http://techieshome.com/' target='_blank' title='blogger templates'>Techieshome.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.
You Can See The Demo On On Techieshome.com itself or You can See It On Our Blog here.
Do SIGN UP for the Newsletter and share Your Feedback Over Comments.
HELP BHAI…. KAL SE TRY KAR RAHA HU……………… DISPLAY NAHI HO RAHA FACEBOOK COMMENTING SYSTEM…..AND ALSO PLZ WRITE A POST GUIDING US..THAT WE CAN EDITING AOUR BLOGGER HTML ALONG WITH DESIGN..LIKE WE USE DREAMWEAVER BUT THERE UNABLE TO DISTINGUIH HOW TO EDIT HTML…SETTING BLOG DESIGN…………… http://WWW.NEWSPLUGIN.BLOGSPOT.COM