Using jQuery and CSS To Create a Facebook Multi-friend Selector

By Arpan Dhandhania

Introduction

In this day and age, whether you are building a website, a web application or anything that you want to make popular, you have to take into consideration how it is going to integrate with the social networking sites. The first such site that comes to everyone's mind today is Facebook. In the last few years, Facebook has provided various tools and functionality, such as the LIKE button, publishing on your wall etc, for us developers to integrate our websites with Facebook and leverage the social network.

One of the useful features Facebook provided was the multi-friend selector with which we could select multiple friends by clicking on their profile picture and then either sending them a message or inviting them to and event or website. If you are familiar with FBML tags, this line should not be new to you:

<fb:multi-friend-selector actiontext="Select the friends you want to invite. (All of them.)" rows="3"/>

Last year, for reasons unknown to me, Facebook decided to leave FBML tags behind and published a JavaScript API with which you can rebuild the same functionality, except that now we have to do most of the heavy lifting as opposed to simply using the above tag.

The FBML tag however had a few short comings. The lack of options to be able to style the controller, to be able to add hooks to events like selecting a friend, unselecting a friend etc., annoyed several JavaScript developers. When the Facebook team announced that they are coming out with the JavaScript SDK, it brought a smile on all our faces. Mike Brevoort built a brilliant jQuery plugin that renders the Facebook Multi-Friend Selector in your website using the JavaScript SDK. Its not like it is the first of its kind plugin, but the best part of this solution is that it doesn't require any server-side code.

Introducing JQuery Facebook Multi-Friend Selector Plugin

Mike Brevoort's solution only requires jQuery and the new Facebook JavaScript API. Below is an example of how you can use it on your site. Click here to download the source code. Now let's see how it works.

First, in the head section, you need to add the following lines of script and stylesheet includes:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.facebook.multifriend.select.js"></script>
<link rel="stylesheet" href="jquery.facebook.multifriend.select.css" />

Note: You may need to add the path to the second two files if you have put then placed them in a different location.

Once that is done, copy and paste the following code in the body section of the page.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({appId: '194478650562619', cookie: true});

    FB.getLoginStatus(function(response) {
        if (response.session) {
         init();
        } else {
         // no user session available, someone you dont know
        }
    });

    function login() {
        FB.login(function(response) {
            if (response.session) {
                init();
            } else {
                alert('Login Failed!');
            }
        });
    }

    function init() {
     FB.api('/me', function(response) {
         $("#username").html("<img src='https://graph.facebook.com/" + response.id + "/picture'/><div>" + response.name + "</div>");

         $("#jfmfs-container").jfmfs({
     max_selected: 15,
max_selected_message: "{0} of {1} selected",
friend_fields: "id,name,last_name",
pre_selected_friends: [1014025367],
exclude_friends: [1211122344, 610526078],
sorter: function(a, b) {
                var x = a.last_name.toLowerCase();
                var y = b.last_name.toLowerCase();
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
         });
         $("#jfmfs-container").bind("jfmfs.friendload.finished", function() {
             window.console && console.log("finished loading!");
         });
         $("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) {
             window.console && console.log("changed", data);
         });                    
        
         $("#logged-out-status").hide();
         $("#show-friends").show();

     });
    }            

    $("#show-friends").live("click", function() {
        var friendSelector = $("#jfmfs-container").data('jfmfs');            
        $("#selected-friends").html(friendSelector.getSelectedIds().join(', '));
    });                
</script>

<div id="logged-out-status" style="">
     <a href="javascript:login()">Login</a>
</div>
<div>
     <div id="username"></div>
     <a href="#" id="show-friends" style="display:none;">Show Selected Friends</a>
     <div id="selected-friends" style="height:30px"></div>
     <div id="jfmfs-container"></div>
</div>

Save and load the page in the browser and if things are set up correctly, the multi-friend selector should show up on the screen. In case you are not logged into to Facebook, you will need to do so. Click on a few friends and then finally click on the 'show selected friends' link below your name. It will display a list of user IDs of the friends that you have selected. The plugin does only so much for you; which is a good thing. Now you can do whatever you like with this list.

There are a few options that the plugin offers and to alter them, you have to modify the following function:

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

Here are the options that are bundled with the plugin:

  • max_selected: specify how many friends the user can select
  • max_selected_message: string that indicates how many friends have been selected
  • friend_fields: specify which attributes of the friend should be passed
  • pre_selected_friends: in case you want to pre select any friends
  • exclude_friends: in case you don't want the user to be able to select certain friends
  • sorter: function to sort friends in the list

Conclusion

That is all it takes to use the jQuery Facebook Multi-Friend Selector Plugin on your site. Tweak the CSS to suit your requirements and do whatever you need with the list of friends the user has selected. In case you require additional functionality like a callback function when the user clicks on a friend, it is quite easy to add it. With a good understanding of JavaScript, it won't take you any time to augment the functionality offered by this plugin.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •