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.
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:
- Create a Facebook application
Steps 1-3 are fairly well documented in the links above. Step 4 is the interesting part. Take a look at the code below.
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:
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.