Alex Kahn

Pretty Feed Items with Facebook Connect

November 6, 2009

At Free Press, when a user signs a petition or shows support for our issues on one of our sites, we want them to spread the word. We want to make it easy for users to share the story they told, or the petition they signed, and to encourage others to do the same. We usually do this with links to Facebook’s sharer.php and Twitter’s status parameter.

But sharer.php left us frustrated with its awkward interface and lack of branding. What about the pretty updates that Facebook applications produce? We wanted a feed item that looked branded, looked good, and compelled a user’s friends to also take action. This is where Facebook Connect comes in.

Using Facebook Connect for this task turned out to be simple. Surprisingly simple. Here’s the routine:

  1. Create a Facebook application
  2. Create a file to allow cross-domain JavaScript communication
  3. Include Facebook’s JavaScript library
  4. Write some JavaScript

Steps 1-3 are fairly well documented in the links above. Step 4 is the interesting part. Take a look at the code below.

var AK = {
  apiKey:  "de24e7cfd602218871fc8e30b3dd8a5f",
  message: "Facebook Connect is easy!",
  attachment: {
    name: "Updating from akahn.net",
    href: "http://www.akahn.net",
    caption: "So cool!",
    media: [{
      type: "image",
      src:  "http://akahn.net/images/shoes.jpg",
      href: "http://www.akahn.net"
    }]
  },
}
FB.init(AK.apiKey, "/xd_comm.html");
FB.ensureInit(function() {
  FB.Connect.streamPublish(AK.message, AK.attachment);
});

What’s going on here? First, I’m creating an object, AK, to store the various pieces of data I need. This includes an API key, the default message that the user will be posting to their feed, along with some other bits of text, and an image.

I then get the API ready, using FB.init, specifying my API key and the location of my cross-domain communication file.

Then I make sure that the API has finished loading, using FB.ensureInit. I pass in a function, to be executed once the API has finished loading.

In the function, I call FB.Connect.streamPublish. I pass in the message and the attachment object that I defined earlier. If the user is logged in on Facebook, they’re presented with a modal popup inviting them to post to their feed. If not, they’re prompted to log in before they are invited to create a feed item. Try it out below:

Post to my Facebook wall!

And that’s it! It takes a lot of setup just to make one little call to FB.Connect.streamPublish. But the smooth user experience and the customized, pretty feed item make it all worthwhile.