The missing Facebook interface component for friend selection

By

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.

Here’s what it looks like:

You can view an example in the These Days Playground or check out the source code on GitHub.

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.
  • Ease of implementation — You can get the example up and running on your own server simply by adding your application’s API key to example.js. The plugin loads the user’s friends automatically via the Facebook JavaScript SDK.
  • 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.
  • Adding support for other JavaScript libraries — currently we rely on jQuery for selectors, event binding and style changes. It might be nice if the core of the plugin was library independent and there were different adapters for jQuery, MooTools, YUI, etc.

To get started with the These Days Facebook Friend Selector, check out the readme and download the source on GitHub.

This entry was tagged with Facebook, Javascript. Bookmark the permalink.

Comments

  1. Mind blown! I can't wait to try this out. Particularly useful now that Facebook are ditching FBML... http://developers.facebook.com/docs/reference/fbml/friend-selector/

    I already have a project I will need to use this in ^_^

    Seriously, thank you!

  2. This plugin is really awesome. Thanks a zillion for sharing this.

    But how can I position the dialog with respect to the link which popped the dialog?

    Thanks again for this lovely plugin.

  3. Awesome!
    Just tried it. GREAT!
    What about license? Is it free to use? Couldn't find any info on that.

  4. By Bram Verdyck

    @Divkis You can change the CSS file to whatever CSS you want. This is just a 'skin'. The #TDFriendSelector is positioned absolute, but this is not necessary. You can also change the location of the plugin's HTML if you want.

    @:] Yes, it's absolutely free to use! :)

  5. Thank for the plugin. Useful.
    Friends in app missing (or I can't find it).
    I add a thing like this :
    /me/friends?fields=id,name,installed
    and check if installed is true in setFriends

  6. Hi,

    I'm not able to get it to work and I think I've tried everything. Do I have to make som kind of server configuration?

  7. Hi,
    Plugin is awesome but is it possible to display the TDFriendSelector when my html page is loaded and direct in my html page, not in a "pop-up" ?

    Thanks :)

  8. Is it still working after? I tried demo on github and I wasn't able to make it work on my server..

  9. Hi there, I see there hasn't been a lot of activity on this recently but I've made quite a few modifications to your interface (take a look here: http://fbfs.craig-saunders.co.uk/)

    Also forked the repository (didn't see you had it in git so commits aren't really incremental but the source is there: https://github.com/Mrman/Facebook-friend-selector)

    Hope you like.

  10. How to populate friend data from server? I have try:

    TDFriendSelector.setFriends({{ listOfFriend.data|json_encode|raw }});

    im using symfony2 + twig, but still not working. Any idea how the correct way?

  11. Fantastic. Can't believe facebook hasn't implemented this after all this time. Kudos on mimicking the facebook popup design!

  12. I check them out and both of them seems to work.

    However i don't see the need for this...
    Since FB is offering its own friend app requests.

    So what is/are the pros vs the Facebook plug???

  13. Is all this info copyright or can we quote you in my essay?

    I came across your games site using web search engines.

    I find this information amazingly well written. I will
    be sure to add it to my bookmarks as well as return to find out more.
    Many thanks for the posts!

Leave a Reply