Reducing Bandwidth with FBJS Dialogs
October 22, 2007
Facebook provides a simple means for displaying dialogs via the fb:dialog element in FBML. Many times, application dialogs will be fairly repetitive, containing much of the same information with only minor changes representing application-specific data. Unfortunately, these dialogs must be hard-coded into any HTTP response from an application’s server. As a result, an fb:dialog element must be included in a single Web page for every potential situation that can occur, resulting in cumbersome data transfers. Fortunately, FBJS offers a solution to this through a combination of AJAX and the Facebook Dialog object.
The first step in resolving this is to create a simple function that requests the dialog content via AJAX, at which point the AJAX response must be displayed within a Dialog object. The following code provides an example implementation of an FBJS function to perform this.
function showChoice(url, title, ok, cancel) {
// Set the default pop-up dialog values for those not supplied.
if (title === undefined) { title = "Dialog"; }
if (ok === undefined) { ok = "Okay"; }
if (cancel === undefined) { cancel = "Cancel"; }
// Retrieve the dialog contents via 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('dialog_form').submit();
}
}
ajax.post(url);
}
The second step is to provide the output from the “url” parameter referenced in the above code. If, for example, the request URL includes an “id” parameter in the query string, the PHP code on the server can be used to look up an item in the application’s database. Once the item is found, the FBML can be rendered to be displayed within the dialog. The below example demonstrates an implementation of this code.
<?php
// Include the Facebook client library and app config.
require_once('../client/facebook.php');
require_once('inc/config.inc.php');
if ($_REQUEST['id']) {
// Look up an item using the provided ID.
$item = getItem(trim($_REQUEST['id']));
if ($item) { // Print success FBML.
?>
<form id="dialog_form" action="submit.php">
<input type="hidden" name="id" value="<?php echo $item->id;?>"/>
<input type="text" name="quantity"/>
</form>
<?php
} else { // Print error message FBML.
echo 'Sorry, the item you selected could not be found.';
}
}
?>
The final required step is to call the FBJS code from an onclick event from an anchor tag, submit button, or similar element. This code can be included within was a simple loop in the case where many items on an application’s canvas page might require a dialog. The following is an example loop in which the “showChoice” function defined earlier is made callable.
<?php foreach ($items as $item):?>
<a href="#" onclick="showChoice('ajax/add-dialog.php?id=<?php echo $item->id;?>', 'Add Item to Cart'); return false;">Add to Cart</a>
<?php endforeach;?>
As a result of these changes, the average response length for a canvas page can be reduced dramatically depending on the overall expected inclusion of dialogs. The trade-off is that, due to the additional request at the time the “onclick” event is fired, there is a moment during which the end user must wait for the dialog’s contents to display.
Comments
3 Responses to “Reducing Bandwidth with FBJS Dialogs”
Got something to say?
[…] Facebook Developer tutorials explains how to reduce bandwidth by replacing FBML fb:dialog tags with AJAX-enabled FBJS Dialog objects. However, while the tutorial demonstrates how to reduce response lengths, the code did not account […]
Thanks for this code, this it seems is the only way to pass a parameter to a dialog box from an url, at least that i can find. It’s way above my head otherwise.
Anyway this code does exactly what i need, so thanks.
Dan
Hello
Wasjust serfing on net and found this site…want to say thanks. Great site and content!