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@":http://www.facebook.com/sharer.php?u=http://www.akahn.net/2009/11/06/pretty-feed-items-with-facebook-connect.textile and "Twitter's status parameter":http://twitter.com/home?status=http://www.akahn.net/2009/11/06/pretty-feed-items-with-facebook-connect.textile%20--%20Not%20too%20shabby. 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: # "Create a Facebook application":http://www.facebook.com/developers/ # "Create a file to allow cross-domain JavaScript communication":http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel # "Include Facebook's JavaScript library":http://wiki.developers.facebook.com/index.php/FeatureLoader.js.php # 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);
});