Facebook Development – Quick and Easy Dialogs

At my work, whenever we have a link to delete records, we always have a simple Javascript confirm dialog pop-up.  The confirm dialog just does the standard, “Are you sure you wish to delete this record?” with an OK and Cancel button.  If the user clicks cancel, the record is not deleted, if they click OK, the record will be deleted.

If you’ve done some Facebook development, you will notice quickly that the alert() and confirm() functions do not work.  I’ve found this slightly annoying, so I’ve written a very simple Javascript function that let’s me use the nifty dialogs that Facebook provides us.

Let’s start by looking at a standard delete link:

<a href=”delete.php?id=1” onclick=”return confirm(‘Are you sure you wish to delete this record?’)”>Delete</a>

Outside of Facebook, this will display the standard confirm dialog.  Inside of Facebook, nothing happens.  Until now that is!  I’ve created my own confirm function, that works much in the same way as the regular confirm() function:

[code]function confirm(text,context) {

var dialog = new Dialog(Dialog.DIALOG_CONTEXTUAL);
dialog.setContext(context).showChoice(‘Confirm’, text, ‘OK’, ‘Cancel’);
dialog.onconfirm = function() {
return true;
};
return false;
}
[/code]

To use this function, we’ll need to slightly alter our previous link:

<a href=”delete.php?id=1” onclick=”return confirm(‘Are you sure you wish to delete this record?’, this)”>Delete</a>

All we’ve done is added “, this” after the confirm message.  Let’s now analyze the new confirm() function.

The first thing we do is create a new contextual dialog.  A contextual dialog in Facebook means that it will have that cool little arrow bubble beside the link you pressed.  If you haven’t seen it, it’s kind of like a speech bubble.

The next thing we do is set the content to our link, AKA “this”.  We then set the title of the dialog to “Confirm”.  Set the text with what was passed in and finally we set the buttons to be OK and Cancel, just like our standard confirm box.

We now create an inline function for the “onconfirm” action of our dialog.  Inside this function we return true.  This will allow our standard link to work.  If the user clicks cancel we return false and don’t go to the link clicked.

If you have existing code that needs to be updated, it’s not too complicated; you just need to add the context for the dialog.

If you are looking for more information on Facebook development, visit my Facebook category on my blog!  It has several useful articles.  I plan to release more in the future as I’ve spending a lot of time again doing Facebook development.

If you are just looking to get started with Facebook development, I would suggest visiting this site:
http://developers.facebook.com/

From here, you can follow the step-by-step guide on the anatomy of a Facebook application.  You can also download the API libraries in the several different languages they offer.  Once you’re done here, you will need to add the Facebook Developer Application.  This allows you to create applications.

Until next time!