Home » Software & scripts

Official cut-and-paste Facebook Comments Box Widget

Facebook yesterday released the Comments Box, its first official social widget for Facebook Connect.

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.

connect-with-facebookAccording to the kind people at Facebook, it allows website owners to add social comments to any webpage, blog or photo gallery in just a few minutes. That’s why it’s a bit embarrassing to admit we failed epically to add it to this blog, which currently runs on WordPress 2.7.1. While it seemed to work in Internet Explorer 7, it never appeared in Firefox 3. According to this thread on the Developer Forum we’re not the only ones having problems, and Blogger.com users won’t be able to use it either because it requires you to upload an .htm file. Let’s see if Facebook addresses these issues soon with an update to the otherwise very useful widget.

[ UPDATE ] The Facebook Developer Team has already responded: “Thanks for this quick feedback. I’m calling in the RayWei team to have a look. We’ll update. “

Anyway, here are the “simple cut-n-paste instructions” to add a Comments Box to your website:

  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.
  3. 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.

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.

Here’s Facebook’s own tutorial video for adding the Comments Box:

Good luck!

Like Reface.me on Facebook

Side notes

Official cut-and-paste Facebook Comments Box Widget Posted by on February 20, 2009 at 5:13 PM. Use this trackback if you're linking this story.

Currently trending:
Facebook Timeline Hacks

Welcome to reface.me!

Recent comments

Write for us!

Who wants to become a reface.me blogger?

Check out our t-shirts!

*Pssst!* Just so you know, yes, we also do custom designs. Get in touch!
facebook t-shirts
reface.me featured on FOX News

What’s reface.me?


Receive e-mail updates from Reface.me:

Facebook Like Stamps