Facebook Cookbook

You Can Pick Your Friends

Problem

I need to give my users the ability to pick one of their friends. How can I give them a text field that will filter their friend list as they type?

Solution

Use the fb:friend-selector tag to render a predictive text field into your forms. The simplest form is:

<form name="some_form" action="http://apps.facebook.com
/myapp/handle.php" method="post">
    <fb:friend-selector />
    <input type="submit" value="Send it!"/>
</form>

which will give you a form field like the one in Figure 6-45.

Figure 6-45. The fb:friend-selector field before typing any text

When users start typing in the field, it will immediately show them potential matches, as in Figure 6-46, which can then be selected using the up/down arrow keys.

Figure 6-46. The fb:friend-selector field after text has been entered

Discussion

You can specify a uid for the selector if you’d like to give people the option of selecting from someone else’s friends. Facebook will take care of the potential privacy violation by not listing any friends if the loggedinuser shouldn’t see them (by default, the selector uses loggedinuser as the uid so that they’re picking from their own friends).

The control works by using JavaScript to set the value of a hidden field when your user makes a selection in the predictive list. Pass in ...