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
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" width="450"> </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.
No comments:
Post a Comment