Facebook Goes Live with Bookmark Prompt

A couple of months ago, Facebook announced some ambitious changes to their API. We’re now starting to see some of the first of the newly announced features be released into the wild. A couple of weeks ago, Facebook added the ability for developers to ask prompt to bookmark their application. Previously, users were only able to add bookmarks using the “Add Bookmark” in Facebook’s taskbar.

Facebook’s Developer Wiki says that applications should only launch the prompt after a user clicks on a link, but it’s likely that those guidelines will be abused.

Here’s what the prompt looks like for the “Spay Day Online Pet Photo Contest” application that Factor 360 developed for the Humane Society of the United States:

:

Here’s how to load the prompt on an Facebook Application (Iframe) using XFBML:

First, you’ll want to make sure that you have the prerequisites ready so that you can use XFBML.

Then, make a hyperlink that calls an “AddBookmark” function that we’ll write. You could also do a submit button or anything else that would call a JavaScript function.

Remember to <a href=”#” onclick=”AddBookmark(); return false;”>Bookmark this Application!</a>

Then, use the following JavaScript to define the AddBookmark function.

<script type=”text/javascript”>
function AddBookmark() {
FB_RequireFeatures([“Connect”], function() {
FB.Facebook.init(‘APIKEY’, ‘xd_receiver.htm’);
FB.ensureInit(function() {
FB.Connect.showBookmarkDialog(callback);
});
});
}
function callback(post_id, exception) {
alert(‘bookmarked’);
}
</script>

Make sure to replace “API Key” with your application’s API Key. The “FB.ensureinit” function makes sure that the library has fully loaded before trying to execute it. The reference to “FB.Connect.showBookmarkDialog(callback);” is where the magic happens. the callback function occurs after the user has closed the dialog box. You could put just about anything you want in here. For this demonstration, I’ve just included a basic JavaScript alert.

In the next couple of months, Facebook will be launching a number of additional API changes, including the removal of classic application invites and the addition of sending messages Facebook’s Inbox from within Applications. Developers will also soon be able to get access to their user’s email address if they give permission. You can see other changes coming on Facebook’s Developer Roadmap.