How to Get FaceBook Comments Box to Your Blogger Site. Its soo easy and Simple Steps.
1 Step : Just go this page Facebook Developers
2 Step : Click Create new App
3 Step : enter your application name (you can type any name)
4 Step : Click website tab and Enter Your Site URL
Step 5 : and click save changes button
Step 6 : Copy your app ID and keep anyware (eg: notepad)
Step 7 : Then go your site and log in and go Template tab and Click EDIT HTML
Step 8 : Tick the Expand Widget Template
Step 9 : Then find the following code (get search box ctrl + f )
<html
Step 10 : and after it add following code
xmlns:fb='http://www.facebook.com/2008/fbml'
You must type a Space before it and after it, hear is an example
(<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >)
Step 11 : click save template and check any error found or not. if not go step 12.
Step 12 : Search for <body> tag.
Step 13 : and after adding 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>
Step 14 : please dont forget to change YOUR APP ID to your app ID (you got in the previous step),
Step 15 : Copy the following code and edit
<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='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.
Change YOUR-APP-ID with your application ID number.
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
After changing and Add befor the this code </head>
Final step
Please find the Following Code
<data:post.body/>
Paste the Following Code
<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%;'> <b><a href='http://www.dtlakmal.blogspot.com/' target='_blank' title='blogger tricks'>Facebook comments for blogger</a> Brought To You By <a href='http://www.dtlakmal.blogspot.com/' target='_blank' title='blogger tricks'>dtlakmal.blogspot.com , Get Yours?</a></b></div>
</b:if>
you can change 450 to what ever you want. it's in pixel.
And now Click The Save Template Button and Enjoy..................
No comments:
Post a Comment