Lets code...
Below is a tutorial to integrate Facebook Comment Plugin to your blogspot blog.
Follow these simple steps and let Facebook Comment Plugin dance on your finger tips.
Step 1: Create a facebook application first.
Dont worry, you need not to code for this. Just go to this page Create Facebook Application.
Verify your facebook account by credit card or mobile phone.
(Though this whole verification thing has a bug. But hope, facebook will recover from it soon )
Then click + Set Up New Application
Enter your application name (type your blog name or anything you want)
Check I agree and click Create Application
Congratulations, you have just created a facebook application.
After creating application, go to 'Edit Settings' .
Go for 'Website' tab at left tabs-list.
In Site URL, Enter url of your blog ( as lets-code.blogspot.com)
Click on SAVE CHANGES.
Copy the app-id (circled in the picture below)
Step 2: Integrate Facebook Comment Plugin to your blogspot
Login to your blogger account.
Navigate to layout >> edit html >> and check Expand Widget Templates
Add facebook xmlns attribute:
Search for: <html tag and add facebook xmlns attribute at the last of html tag as given below:
<html expr:dir='data:blog..............2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' >
Add Open Graph protocol meta tags:
Search for <head> section and after it, put following code:
<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'/>
Change MY-SITE-NAME with the one you want to appear when a user likes a page.(Your Blog's name )
Change http://google.../blogger_logo.gif with your blog logo, or remove the all tag if you don't want it.
Change YOUR-APP-ID with your appplication id (app-id).
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
Add Facebook javascript sdk:
Search for <body> tag and after it add the following code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId : 'Your App Id',//the one you've copied from facebook application page
status : true, // check login status
cookie : true,
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 3: Place facebook comment box in your blog
Now, find <data:post.body/> and after it post following code.
<b:if cond="data:blog.pageType == 'item' > <b:if cond="data:blog.pageType != 'static_page' > <fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid="data:post.id" > </fb:comments> </b:if> </b:if>Click Save Template , and start commenting in facebook style...
Note:
- As two comment boxes seems quite odd, if you want to disable default commenting system, Navigate to settings >> comments and next to comments field choose Hide, then scroll downand then click Save Settings
- You can also add other facebook plugins (like button, acitivity feed,recommedations etc) from Facebook Plugins.
2 comments:
Few questions Jashwant...
1) how do you put a scroll bar in your post? Is it automatic?
Very nicely explained Jashwant...
But i guess, i had sent you a page link where it has a better look and feel..
I guess, i had sent it to you either on facbook or in your comments...
Do explore if you can spend some time on it..
It would look more attractive.
How did you make this post look so good?
The white boxes that contains the code.
Please tell me, it'll be very help ful for me.
I also have a technical blog, where i collect problems and their solutions.
But i want it to look good just like this post of yours..
http://javakafunda.blogspot.com