1/21/2011:
-
Added some performance optimizations especially with a large number of friends
-
Custom events for notification when friends are loaded or selections change
-
Progressive image loading when scrolling including the usage of Ben Alman's awesome throttle/debounce library for smoother scrolling
Plan to make some more enhancements are refactor code for to better enable unit tests
This is an client side alternative to the Facebook Multi-Friend Selector that relies on jQuery. No server side component necessary which makes it really easy to adapt and use.
Check out this blog post with more details and screencast: http://bit.ly/cHDkzm
To see a demo go here: http://mbrevoort.github.com/jquery-facebook-multi-friend-selector/# Click login and login to your facebook account and you should see the friend selector.
Much can be customized by CSS, for example if you want a stacked list type selector that's more stripped down: http://mbrevoort.github.com/jquery-facebook-multi-friend-selector/list.html
This plugin is depends on the new Facebook Javascript API
<script src="http://connect.facebook.net/en_US/all.js"></script>
There's a jquery plugin and accompanying CSS file
Assuming you have a container like:
And you have included the Facebook Javascript API And you have already logged the user in. (FB.init and FB.login)
You can load the friend selector in a container like this:
$("#jfmfs-container").jfmfs();
This should fetch the current users friends and give you the interface to select friends. Then when you're ready to move on, there's a function to call that returns an array of the Facebook Ids of the selected friends.
var friendSelector = $("#jfmfs-container").data('jfmfs'); var selectedFriends = friendSelector.getSelectedIds();
These options can be passed into the jfmfs function with a map of options like jfmfs({key1: val, key2: val})
max_selected: int (optional)- max number of items that can be selected max_selected_message: String (optional, but required if max_selected specified) - message to display showing how many items are already selected like: "{0} of {1} chosen"}
jfmfs.friendload.finished - triggered on the container when the list of friends is finished loading
$("#jfmfs-container").bind("jfmfs.friendload.finished", function() { alert("finished loaded!"); });
jfmfs.selection.changed - triggered on the container when a selection has changed with an array of selected friends each like { id: "123", name: "John Doe"}
$("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) { console.log("changed", data); });