"Interesting stuff of the Technology, Products and Web 2.0..."

Sunday, February 22, 2009

Facebook Connect Got It’s First Social Widget, Comments Box

In last December, Facebook announced Facebook Connect, the next evolution of Facebook Platform. Facebook Connect lets users log in to a site using their Facebook account, bring their profile with them, easily find friends also using the website, and share information and experiences using the same features as they would on a Facebook application.

Since  the launched, over 6,000 developers make their sites more social using Facebook Connect.

Recently facebook launched first social widget for Facebook Connect, the Comments Box. The Comments Box is a great way for any website, blog or photo gallery to add social comments to their page in just a minute with a few lines of code.

With the Comments Box, Facebook users on your site can comment on your content, post those comments to their profiles, and share them with their friends on Facebook. The Comments Box allows non-Facebook users to make comments on your site as well. And via our APIs, you can access related comments made on Facebook as well to bring the conversation together.

To add the Comments Box to your site, follow these simple instructions:

  1. Set up a basic Connect application. Take note of the API key and specify a callback URL to your website.
  2. Download this cross-domain receiver file, and upload it to your website.

Add these snippets of code to each file where you want a Comments Box.

  • Within the <html> tag, add: xmlns:fb="http://www.facebook.com/2008/fbml"
  • Add the following code wherever you want a Comments Box to appear in your page. Replace '''YOUR_API_KEY_HERE''' with your API key, and include the path to the cross-domain receiver.

<script src= "http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <fb:comments></fb:comments> <script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "<path from web root>/xd_receiver.htm"); </script>

That's it, your Comments Box is ready! For more detailed instructions, go to Developer Wiki.

The Comments Box comes with additional social features:

  • Fully customizable: Specify background color, text color, and other attributes by providing your own custom CSS to incorporate this best into your site.
  • Access to raw data: Query all comments via the comments.get API method or the comment FQL table.
  • Administration and moderation: Manage the privacy and permissions of your comment boxes on an individual or global basis.
  • Integrates seamlessly regardless of whether you do or don't have Facebook Connect already on your site.

This new Comments Box is just one of many social widgets that can help you easily integrate social features into your website with Facebook Connect. There are many more plugins and widgets available in Facebook Connect Plugins Directory that may also fit your needs, including plugins for Movable Type, and commenting systems by Disqus and JS-Kit.

To learn more about using 4th party plugins and widgets, check out Facebook Connect Plugins Directory.


No comments: