Introducing the missing Facebook interface component — the These Days Facebook Friend Selector.
A common problem we have as Facebook application developers is the need to provide users with a way to select one or more of their friends and then capture that selection. The Graph API can provide us with an array of the user’s friends but there’s no official way to convert that array into an interactive interface component. The These Days Facebook Friend Selector aims to fill that requirement.
We had a number of priorities when designing this plugin:
- User experience — The plugin should look and feel like an official interface component on facebook.com.
- Flexibility — You can customise the number of friends to select, the number of friends to display per page, toggle auto-deselection if the maximum number of friends is reached and have multiple instances of the plugin on the same page, each with separate settings. The CSS classnames are all editable, as is the CSS itself, which is provided in SCSS syntax for ease of authoring.
The plugin is tested (IE7+) and production ready. We’re using it in a couple of upcoming projects to allow users to select friends who they would like to invite to play a game. But of course a plugin like this is never finished. We will continue to work on it, and you’re also welcome to fork it and submit pull requests on GitHub. Some of our ideas are:
- Adding unit tests — we know we can’t realistically expect the community to contribute patches if there are no tests.
- Adding a button to toggle between ‘All Friends’ and ‘Selected Friends’.
- Adding alternate UI modes — such as a tile view as well as the list view, and an embedded display mode as well as the popup/overlay display mode.
To get started with the These Days Facebook Friend Selector, check out the readme and download the source on GitHub.