Recently, there has been much discussion about whether or not one should leave Disqus for Facebook Comments. In response, I decided to write a blog post entitled, "Disqus vs. Facebook Comments," which outlines my thoughts on the subject. As of this article, I still haven't decided on my preference, so if you're a reader that wants to share your thoughts, please do so on that article.
This how-to article is the result of a discussion I had with Stefan Svartling, who recently asked me how I installed the new Facebook Comments on Google's Blogger (Blogspot) platform. If you're interested in a step-by-step guide, this article is for you.
Step 1: Create A Facebook App
For the beginning step, my assumption is that you are starting off from scratch and have no Facebook Social Plugins installed. If this is not the case, feel free to jump to the appropriate step below.
Before one proceeds to add the neat Facebook features, one needs a Facebook App ID. To secure a Facebook App ID, simply follow this link and complete the required information.
Once the basic information has been added to the form, Facebook will provide you with an official Facebook App ID.
Step 2: Add JavaScript Software Developer Kit (SDK)
To make many of Facebook's Social Plugins work through XFBML, you will need to post the JavaScript SDK within Blogger. To complete this step, do the following:
- Go to http://draft.blogger.com
- Click on the Design tab
- Click on Edit HTML
- Click the check box for Expand Widget Templates
- On your keyboard, hold the Ctrl+F and type "
<body>" and hit Enter - Immediately following the open body tag, paste the following code. Remember: Replace my App ID with your App ID.
- Click Save Template
<!-- Facebook SDK script Code -->
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('comments.create', function(response) {
// do something with comments.create like notify me when new comment
});
FB.Event.subscribe('edge.create', function(response) {
// do something with edge.create like notify me when someone likes something
});
};
(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>
<!-- End SDK script Code -->
Step 3: Add Comment Code
Now that you have the JavaScript SDK installed, now its time to add the code for Facebook Comments. To complete this step, do the following:
- Go to http://draft.blogger.com
- Click on the Design tab
- Click on Edit HTML
- Click the check box for Expand Widget Templates
- On your keyboard, hold the Ctrl+F and type "
<b:includable id='comments'> - Immediately following <b:if cond='data:post.allowComments'>, paste the following code:
- Click Save Template
<fb:comments expr:href='data:post.url' num_posts='5' width='575'/>
Note: Upon completion of this step, Facebook Comments should show as expected. However, should you fail to see the comment box, review your source code for any other conflicting Facebook scripts. Personally, I had a few lingering scripts from previous Facebook Social Plugin attempts.
Closing Thoughts
Congratulations! If you've made it this far, then you should have a working comment box on your page that now sends notifications to Facebook with each comment. If you have any questions or additional requests for how-to articles, please feel free to ask in the comment section below.
Related Posts
0 comments:
Post a Comment