Facebook Cookbook

You Can Pick Your Friends (in Batches)

Problem

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

Solution

Use the fb:multi-friend-input tag. The simplest form is:

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

It’s hard to get much simpler than that! This is a great example of FBML saving you a huge amount of work. That piece of code will give you a simple text box shown in Figure 6-47.

Figure 6-47. multi-friend-input box

When users put focus into the field, they’ll get some instructions, as shown in Figure 6-48.

Figure 6-48. multi-friend-input with instructions

As they start typing a name, Facebook will display a list of matching friends below the field (Figure 6-49).

Figure 6-49. multi-friend-input with prediction

So far, this looks a lot like the fb:friend-selector tag covered in You Can Pick Your Friends. The difference is in what happens after the user picks her first friend—in this case, she can keep adding more and more friends to the field, as you can see in Figure 6-50 ...