Custom FBML Dialogs in Facebook Apps

Custom FBML Dialogs in Facebook Apps

There are several examples around on doing custom Facebook dialogs, some which are satisfactory and some which are not. Here is some code that I use to create custom FB dialogs that I can position, color, style at will.

First, let’s look at the FBJS function to invoke a custom dialog. In this case, I have created a dialog that accepts Yes / No answers. By convention, I assume that I will define a dialog somewhere on my page named “question_dialog1”.

// Custom yes / no dialog that we can position
function showYesNoDialog(id, title, content, confirm, cancel) {
document.getElementById(id).setStyle("display", "inline");
if (confirm) {
document.getElementById('yes_button1').removeEventListener('click', confirm, false);
document.getElementById('yes_button1').addEventListener('click', confirm, false);
}
if (cancel) {
document.getElementById('no_button1').removeEventListener('click', cancel, false);
document.getElementById('no_button1').addEventListener('click', cancel, false);
}
document.getElementById("question_title1").setTextValue(title);
document.getElementById("question_content1").setTextValue(content);
}

The first thing I do is display my question dialog, which is initially styled {display: none;}.

Next, I attach a couple of click events – if present – to two buttons, yes and no, for confirmation and cancel (by convention, I use yes_button1 and no_button1, but you can certainly parameterize this or better yet encapsulate in a class).

Finally, I set Title Text and Content Text using the setTextValue method.

A typical call to this dialog might look like the following (I use the built-in FBJS Ajax object):

var yes = function() {
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) {
document.getElementById("delete_dialog1").setStyle("display", "none");
document.setLocation("http://apps.facebook.com/SomeApp/ThisPage.php");
}
ajax.onerror = function() {document.getElementById("delete_dialog1").setStyle("display", "none");}
newShowDialog("delete_dialog1");
ajax.post('http://apps.facebook.com/SomeApp/performDelete.php?fbid=' + <? echo $user; ?>;
}

showYesNoDialog("question_dialog1", "Delete Record?", "Delete \"" + argRecordDescription + "\"?", yes);

The actual FBML for the question_dialog1 looks something like the code below. You can style this anyway you want; I usually try to get my dialogs to look like the styling of the application to which the dialog belongs, but do whatever floats your boat here.

<div id="question_dialog1" style='display: none; position: absolute; top: 300px; left: 150px;'>
<table>
<tr>

<!-- Transparent border around dialog, like FB built in dialogs-->

<td style="background-image:url('http://app.facebook.com/SomeApp/Images/pop_dialog_border.png');">

<div style='border: 2px solid #8ec73c; background: white; font-size: 18pt; margin: 10px;'>
<div id='question_title1' style='background: white; padding: 2px; color: white; background: #8ec73c; font-weight: bold; font-size: small;'>Title Here...</div>
<div id='question_content1' style='font-weight: bold; font-size: 12pt; padding: 10px 30px 10px 30px; border-bottom: 1px solid #8ec73c;'>Dialog content will go here...</div>

<div style='background: white; text-align: right; padding: 10px; font-size: small; height: 20px;'>

<input id='yes_button1' type='button' value='Yes' onclick='document.getElementById("question_dialog1").setStyle("display", "none");' style='background: #8ec73c; color: white; width: 40px;' />

<input id='no_button1' type='button' value='No' onclick='document.getElementById("question_dialog1").setStyle("display", "none");' style='background: #8ec73c; color: white; width: 30px;' /></diV>
</div>

</td></tr>
</table>
</div>

Finally, a note to code nit-pickers: This example is meant to be illustrative and not a comprehensive way on how best to do Facebook dialogs or write FBJS.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s