jQuery Facebook Multi-Friend Selector is a jQuery plugin created by Mike Brevoort that stands as an alternative for Facebook Multi-Friend Selection user interface that uses the Facebook Graph API. No server side component is necessary which makes it really easy to adapt and use.

Customization

This plugin depends on the new Facebook Javascript API, and inside the project there’s a jQuery plugin and accompanying CSS file to get you started.

You should be able to customize the look of this plugin quite a bit via CSS. For example, check out this stripped down demo to see a stacked list type selector vs the later demo we’ll mention.

Usage

Add this selector #jfmfs-container to your document and include the Facebook JavaScript API. Log in your user (FB.init and FB.login) and you will be able to load the friend selector. Check out the video below for a word from Mike on how things work.

For example:

$("#jfmfs-container").jfmfs();

This will pull back the current user’s friends and create the interface to select friends. When you’re ready to move on, there is a function you’ll need to call to return an array of the Facebook IDs of the selected friends.

var friendSelector = $("#jfmfs-container").data('jfmfs');
var selectedFriends = friendSelector.getSelectedIds();

Demo

If you want to get right to it and see a live demo, check out this demo of the jQuery Facebook Multi-Friend Selector plugin. Click “login” and then login to your Facebook account. You will then be able to see your list of friends in the friend selector.

jquery-facebook-multi-friend-selector-screenshot.png

For more details, check out this blog post and screencast.

[Source on GitHub] [Demo] [Discuss on Hacker News]


Have comments? Send a tweet to @TheChangelog on Twitter.

Subscribe to The Changelog Weekly – our weekly email covering everything that hits our open source radar.