Add facebook comment form to blogger
Facebook provides many developers tools which help the developers to make their site more compatible to facebook and more easy to share for its readers.
Its really easy to integrate with blogger. But to use it you need to disable the blogger comment form otherwise there will be two comment forms for one post and that will be a little confusing for readers why you have installed two comment forms. So let’s get started. Save you template before editing the template.
Screenshot
Step 1. Disable Default Comments.
To disable the blogger comment login to your blogger account and Go to to settings >> comments and next to comments field choose Hide, then scroll down and click Save SettingsStep 2. Generating your Facebook Application ID.
Before installing the form another thing you need to do is get your facebook application id. For this Go to facebook developers page and click + Set Up New Application.You need to have a verified account before doing the above. If not you will be guided on how to verify your account when you login to facebook developers
Enter your application name, ( type any name like your blog’s title ) ,check agree and click Create Application. Now click the Connect tab and fill the information.
Base Domain : blogSpot.com ( if you have custom domain then .custom domain name example .com)
Now agree, save the changes and copy the Application ID generated.
Step 3. Codes To Add To Your Template.
Now there are a bit of settings need to be done with blogger template. Save it before editing.1. Login to your blogger account and Go to layout >> edit html >>Check Expand Widget Templates and then find
<htmlType space and add the code below after it.
xmlns:fb='http://www.facebook.com/2008/fbml'It should look like this
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >2. Now find <body> and after it add the following code,
<div id="fb-root"></div>Change code in blue with your Application ID.
<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>
3. Now copy the code below and add it before </head> tag.
<b:if cond='data:blog.pageType == "item"'>Change the code in blue to the following,
<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'/>
MY-SITE-NAME - with the one you want to appear when a user likes a page
http://google.com/…/blogger_logo.gif - with your blog logo, or remove the all tag if you don’t want it.
YOUR-APP-ID - with your application ID number.
YOUR-FACEBOOK-PROFILE-ID - with your own facebook user profile ID.
Step 5. Adding the Comments Box.
Now find<data:post.body/>and after it, please paste the following code.
<b:if cond='data:blog.pageType == "item"'>You can change the width. Here its 450px. Save Template then check your blog.
<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>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div>
</b:if>
Post a Comment
For any inquiry leave a comment
Blog powered with Do-Follow,so comment to get backlinks