When I first attempting to code up a pure PHP Facebook app, one of the first problem’s I encountered was I wanted to create a friend selector using as little FBML or FBJS code as possible. This proved slightly difficult as any external PHP file I would create to query Facebook using FQL via Ajax to return my friend’s array also required authentication (something that isn’t as much of a problem using Flash or Flex, but is using PHP or Grails) because it requires persistance across multiple files without having to ask the user to login to facebook again (if you’ve tried this you’ll know what I mean). Having searched online for a solution that didn’t require me to use a hacked up version of FBML..I decided to come up with a simple solution myself.

One way to work around this is by using JSON and the jQuery AutoComplete plugin.  The AutoComplete component allows you to bind a data object to any input control to allow you to use autoComplete features on it. An example of how to enable this can seen below. 

var data = "".split("John James Tom Cat Luke");

$("#friendSelectionInputBox").autocomplete(data);

If you would like to test out the capabilities of the plugin a little further, why not take a look at the demos page :). You might have already guessed that what we are going to do is bind an array of data we get from the Facebook API directly to the autocomplete component.  The first thing you’ll need to to is populate a PHP array with data from your friend’s list. Once you’re familiar with setting up Facebook API Objects, this is as simple as saying:

$query = "SELECT name, sex, pic_square FROM user  WHERE uid
IN ( SELECT uid2 FROM friend WHERE uid1= '$fb_user') ";
$friends = $facebook->api_client->fql_query($query);

Now that we have an arary of our friend information, the next thing we need to do is convert this to a format the autoComplete plugin can understand – namely JSON. 

$function generate_friend_array($facebook, $friends) {

	if (count($friends) > 0 ) {
	$list_array = $facebook->api_client->users_getInfo($friends,
array('uid', 'last_name','first_name')); 

	// array sorting (friend list alphabetically)
	usort($list_array, 'cmpi');

	$return = "var friend_array = []; ";

	foreach ($list_array as $list_array_line) {
	$uid = $list_array_line['uid'];
	// insert slashes to escape potential ' in names
	$first_name = addslashes($list_array_line['first_name']);
	$last_name = addslashes($list_array_line['last_name']);
	$name = $first_name ." ". $last_name;
	$return .= "

		friend_array.push(['".$uid."', '".$name."']);

	";	

	}

	return $return;
	} else {
	return "var friend_array = 'none'";
	}
}

The array returned by this function should be valid JSON. For the purposes of this demo our array will only consist of your friend’s name and their UID. The last thing we need to do is adjust our autoComplete component to understand the row format being output by the function.

$("#friendSelectionInboxBox").autoComplete(emails, {
           minChars:0,
           width:310,
           matchContains:true,
           autoFill: false,
           formatItem: function (row, i, max) {
              return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
           },
           formatMatch: function(row, i, max) {
              return row.name + " " + row.to;
          },
          formatResult:function (row){
              return row.to;
         }});

And that’s it. You should now have a working friend selector :)

Related posts:

1. Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails developers.  If you’re a web developer and you haven’t explored the...
2. Creating a Facebook Application – a guide for PHP, JavaScript, Flex and Grails developers If you’re a web developer and you haven’t explored...
3. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...
4. jQuery Colour Selector plug-in with support for graceful degradation Hey guys. Here’s another entry on jQuery that someone...
5. How to Add Facebook Connect To Your Website in just 3 Steps     Many Social Networking sites allow users to authenticate...

Related posts brought to you by Yet Another Related Posts Plugin.