Commenting with Facebook Connect
Note: we have released an updated version of the comments plugin.
Since Facebook Connect launched, we've seen over 6,000 developers make their sites more social using Facebook Connect. One of the most common features we've seen sites add with Facebook Connect is the ability to allow users to log in with a single click and comment with their real name and profile photo from their Facebook account. Sites have seen as much as 40-50% more comments since they launched added these features.
Today, we're launching our 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. We want to help bring you social widgets that make it easier for users to communicate and share across your site and with their friends on Facebook.
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:
- Set up a basic Connect application. Take note of the API key and specify a callback URL to your website.
- 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 our Developer Wiki or watch the video below.
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 our 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 our Facebook Connect Plugins Directory. If you are building 4th party widgets for Facebook Connect, stay tuned for some exciting updates on the policies and implementation coming next week.
Here's to increasing the number of comments and conversations!
We're excited to see the various ways you'll incorporate the Comments Box in your websites. Please send us any feedback on the Developer Forum.
Introducing New Getting Started Guide and App Review Design
Notifying our Developer Ecosystem about a Photo API Bug
