JQuery Facebook Multi-Friend Selector Plugin

August 10th, 2010 by Mike Leave a reply »

I created a new jQuery plugging that works with the new Facebook javascript SDK to present a users list of friends and allows them to select the friends they would like to do X with. That “X” is up to you; once the user has selected their friends, you call a function on the plugin that returns an array of the friends Facebook Ids. A few key points:

  • client-side, no server-side PHP blah blah blah dependencies like some of the other alternative friends selectors
  • depends on jQuery and the new Facebook Javascript API
  • only requires several lines of code to drop-in
  • Apache 2.0 license
  • Hosted at GitHub: source and demo

Quick disclaimer- as of this post, I haven’t done any testing on Windows or IE, just the latest of Chrome, Safari and Firefox on Mac. There are other features I want to include and probably a bug or two to work through, but for the most part it’s functional.

  • display all of a logged in users friends and lets you select zero to all of them
  • filter by those already selected
  • fast filter textbox that filters list quickly as you type
  • shift-select to select multiple friends at a time

To use the plugin, you need to include jQuery, the plugin javascript file, the plugin CSS (which you can change) and the Facebook javascript library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.facebook.multifriend.select.js"></script>
<link rel="stylesheet" href="jquery.facebook.multifriend.select.css" />
<script src="http://connect.facebook.net/en_US/all.js"></script>

You also need to initialized your app by calling FB.init with your appId and have logged the user in, then you can load the friend selector into a container:

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

This loads the friend selector into the jfmfs-container (can be whatever you want it to be). It calls the Facebook Graph API to fetch the list of friends of the logged in user and loads them into the scrollable region. Then after the user has selected their friends, you can call getSelectedIds() on the plugin to get an array of friends Ids that were selected.

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

A handle to the object is stored as data of the element, so you need to call data(‘jfmfs’) on the element you loaded the selector to get a handle to the plugin object to call getSelectedIds().

Here’s a screencast demo. Let me know what you think!

JQuery Facebook Multi-Friend Selector Plugin Demo from mbrevoort on Vimeo.

Leave a Reply