If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

In developing my Facebook application, there has been much to learn about the specifics regarding the Facebook API structure. My most recent endeavor included creating dialog boxes (<fb:dialog> elements or DBJS Dialog objects for those in the know) that are used for updating user content within my application.

Part of the Facebook application I’m building includes setting up items with certain details as specified by the user. Specifically, the user can say if they own something, used something, or want something. In an effort to keep the page relatively uncluttered, the status of these items is set up to be changed within a dialog window, such as the one above.

Original Design

At first, the only means I found for displaying dialog boxes with varying content was to create an fb:dialog element in my FBML. Each of these tags included much more FBML — the title, content, and action buttons — resulting in lengthy HTTP responses. Specifically, the FBML for each item’s dialog was over 1,500 characters (or 1,500 bytes) varying slightly from item to item. With up to 40 items appearing on the busiest page, over 60,000 bytes of data will have to be sent to a single user for dialogs that will typically go unused in a single page load. This will undoubtedly result in slow responses to user requests when the application goes live, which will be unacceptable for a positive user experience.

Improved Design

After doing some searching, I found that there is a better method for dynamically generating Facebook Dialog objects via FBJS with a single function instead of numerous fb:dialog elements as described above. First, I created a simple function that requests the dialog content via Facebook’s Mock AJAX. The function is exactly 658 characters long, which could further be reduced by removing white space and utilizing an obfuscator if desired.

<script><!--
function showItemDialog(id, title, ok, cancel) {
// Set the default pop-up dialog values.
if (title === undefined) { title = "Add to My Items"; }
if (ok === undefined) { ok = "OK"; }
if (cancel === undefined) { cancel = "Cancel"; }
// Retrieve the dialog contents via Mock AJAX, and display the dialog.
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = true;
ajax.ondone = function(data) {
dialog = new Dialog().showChoice(title, data, ok, cancel);
dialog.onconfirm = function() {
document.getElementById('frm_additem').submit();
}
ajax.post("<?php echo AppCallbackUrl;?>ajax/add-dialog.php?id=" + id);
}
//--></script>

(Note that the AppCallbackUrl value in the code above is simply defined in an include file via PHP’s define function.)

The second step was to provide the output from the add-dialog.php file referenced in the JavaScript above. Basically, I looked up the item ID passed to the PHP file, and returned FBML based upon the item’s details. The resulting output from the code is about 950 characters long, varying slightly from item to item.

<?php
// Include the Facebook client library and app config.
require_once('../../client/facebook.php');
require_once('../inc/config.inc.php');
if ($_REQUEST['id']) {
$item = getItem(trim($_REQUEST['id']));
}
?>
<?php if ($_REQUEST['id'] && $item):?>
<form id=”frm_additem” action=”add.php”>
<input type=”hidden” name=”action” value=”add”/>
<input type=”hidden” name=”id” value=”<?php echo $item['id'];?>”/>
<p>Add <a href=”item.php?id=<?php echo $item['id'];?>”><?php echo $item['name'];?></a> to My Items?</p>
<table>
<tr valign=”top”>
<td><label for=”sel_status”>Status:</label></td>
<td><select name=”status” id=”sel_status”>
<option value=”O”>Own It</option>
<option value=”U”>Used It</option>
<option value=”W”>Want It</option>
</select></td>
</tr>
</table>
</form>
<?php else:?>
Sorry, the item you selected could not be found.
<?php endif;?>

(Note that, although I’ve edited the content of the file here for the sake of not wanting to reveal my personal coding efforts, the above code essentially performs the same task.)

Finally, I had to make a simple update to my anchor tags in the FBML for each item that needs to be associated with a Facebook dialog. This was a simple change within my items loop, coded as follows.

<a href="#" onclick="showItemDialog('<?php echo $item['id'];?>’); return false;”>Add Item</a>

Quantified Results

In all, I reduced the average response length for an individual dialog element by almost 37%. Additionally, assuming that a user loads a page with the maximum of 40 items, there is more than a 97% improvement in the amount of data sent as required for displaying dialogs. Furthermore, if the user doesn’t utilize any of the dialog boxes while visiting one of these pages, there is more than a 99% improvement in the HTTP response length! It doesn’t get much better than this, people.