Creating a facebook bookmark button without a session
Last night we put up a “Coming Soon” page for Super + Fun’s new Facebook app, BlitzPick Baseball which will be launching later this month. We wanted to start letting people bookmark the app and sign up as fans. The idea was to point the app to the placeholder we put up on blitzpick.com.
However, <fb:bookmark> tag doesn’t work without an active session. An active session would require bumping people over to a login page before they can view the coming soon page. We didn’t want that. The javascript option, FB.Connect.showBookmarkDialog, works fine in a connect page because it opens a login popup showing the bookmark dialog. Neither solution works out of the box for an iframe app that doesn’t require the user to authorize the app first.
Instead, I used a custom button and javascript so that the ‘Add Bookmark’ button always appears, regardless of whether the user is logged into facebook, viewing the app page, or viewing the connect site on blitzpick.com directly. As a bonus, the button gets replaced with text if the user is connected and has already bookmarked the app.
When the page loads, I try to get a session and determine if the user is viewing the app from an iframe canvas.
// Called shortly after page loads, after FB.Facebook.init
function init() {
session = FB.Facebook.apiClient.get_session();
canvas = FB.Facebook.get_isInCanvas();
updateBookmarkPrompt();
// If the user was redirected to a login page after clicking
// the bookmark button, automatically prompt them on return
if (window.location.search.indexOf('addBookmark') >= 0) {
addBookmark();
}
}
When the user clicks the ‘Add Bookmark’ button, I call FB.Connect.showBookmarkDialog if the user is in a connect page or if the user has authorized app. If the user is viewing the iframe app but hasn’t authorized the app, I redirect them to the login page. The next url has an ‘addBookmark’ parameter appended to it, so upon return I can automatically open the bookmark dialog, as shown in the init function above..
// Called when user clicks the 'Add Bookmark' button. Redirect to
// login first if user is in an iframe app but hasn't authorized
// the app yet.
function addBookmark() {
// In an iframe, but we don't have a session yet. Redirect
// to login page and open bookmark dialog upon return.
if (canvas && !session) {
redirect = 'http://www.facebook.com/login.php?api_key=' + api_key
+ '&extern=1&fbconnect=1&v=1.0'
+ '&next=' + canvas_page + escape("?addBookmark")
+ '&cancel_url=' + canvas_page;
self.parent.location = redirect;
}
// If the user is in a connect page or has a session already
// in an iframe app, show the bookmark dialog with javascript.
// If user is on a connect page, this call will open an
// iframe to prompt a login first if necessary.
else {
FB.Connect.showBookmarkDialog(updateBookmarkPrompt);
}
}
To top it all off, I check if the user has bookmarked the app after they close the dialog and replace the button with text if they have.
// Replace the 'Add Bookmark' button with thank-you text if we
// see the user has already bookmarked the app
function updateBookmarkPrompt() {
if (session != null) {
FB.Facebook.apiClient.fql_query(
"SELECT bookmarked FROM permissions WHERE uid=" + session.uid,
function(rows) {
if (rows[0].bookmarked == 1) {
document.getElementById("bookmark").innerHTML
= "Thanks for bookmarking this app.";
}
}
);
}
}
View the full source on github.
See it in action at http://becarella.github.com/facebook/bookmark and http://apps.facebook.com/becarella/bookmark.
Mock time for tests »