Maintain Facebook UI Compatibility with fBoxes
December 27, 2007
idleStudios just unveiled an open source PHP class that is sure to help Facebook application developers easily create Facebook-like user interface components. Similar to the standard Facebook profile, fBoxes v0.1 enables developers to display various components of their canvas pages within movable boxes. The demo can be seen here.
Implementing fBoxes extremely easy. After including the fBoxes class into your project, simply create an fBoxes object for each collection of boxes you wish to include, and append as many boxes as desired within the object. The following demonstrates how easily a region containing two boxes (one in each column) can be attained.
require_once('fboxes.php');
$b = new fBoxes('example'); // 'example' is the ID of the fBox region.
// create the boxes -- one in the wide column, one in the narrow column.
$b->add('messages', 'My Messages', 'wide', '12 Messages | Inbox', 'You have no new messages.');
$b->add('info', 'Welcome back, <fb:name uid="'.$uid.'" useyou="false" firstnameonly="true"/>!', 'narrow', '', '<fb:profile-pic uid="'.$uid.'"/>', true, false, false, true);
// load the user's box position preference from any prior use.
$b->loadPosition($uid);
// output the various pieces of FBML to display to the user.
echo $b->renderInit(); // required CSS and FBJS code.
echo $b->renderWide(); // the wide column.
echo $b->renderNarrow(); // the narrow column.
echo $b->renderFinal(); // any required final FBML.
It is important to note that an additional PHP script is required to reside on the server, which is called via AJAX in order to save user’s box display preferences for later use. Fortunately, included with the download is an implementation demonstrating how this can be achieved.
While this class is very well polished, it is important to note that it is only version 0.1, and as such does still have a few kinks to be ironed out. One such kink observed in the demo page is that after some time interacting with the boxes, a setting stored in the FBJS seemed to have changed when it shouldn’t, which allowed “unmovable” boxes to be repositioned. Regardless, this is certainly something that is worth keeping an eye out and trying out within your own projects!
Comments
3 Responses to “Maintain Facebook UI Compatibility with fBoxes”
Got something to say?
[…] example on how to use fBoxes is provided in the example_fboxes.php file.comments1. Facebook Developer » Maintain Facebook UI Compatibility with fBoxesthursday, december 27, 2007 - 01.29 am[…] idleStudios just unveiled an open source PHP class that […]
We have found a problem with this script. When we decrease the height of div and make the aoverflow as auto, the scrollbars appear and now if we drag and drop the boxes and now if we move the scrollbars the dragged box remains at its position. Please help me with this.
I have the same problem in IE 6 & IE 7.