Monday, 1 August 2011

How to Add Facebook Comments to Blogger



Instructions

Log in to Facebook with the account that you want to administrate the comments for your blog. Browse to Developers.Facebook.com/setup to create the comment application for your blog.
Enter the name of your blog in the first box, and then enter the URL of your blog in the second box. Ensure that you enter the full URL with the "/" character at the end; otherwise, the application won't create. Choose a language from the drop-down menu, and then click "Create Application."
Copy or write down the application number generated by Facebook.
Copy the following HTML Code:
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APPLICATIONID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.URL + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Log in to your Blogger account at Blogger.com. Select the blog you want to edit, and then click on the "Design" tab. Click the "Edit HTML" link followed by "Expand Widget Templates." Find "<data:post.body/>" and paste the HTML code below it. Change "APPLICATIONID" in the HTML code to the Facebook Developer Application ID number you were given. Click "Save Template."
Click "Settings" followed by "Comments." Choose to "Hide" the Blogger comments. Scroll down to the bottom of the page, and then click "Save Settings."
Click the "View Blog" link to see your blog, and then click the title of a post. Scroll to the bottom of the post, and the Facebook comment box will be there. Click the "Administer Comments" link under the box to adjust the settings for your blog.


No comments:

Post a Comment

Twitter Bird Gadget