Show random friends demo

This is the demo shows how to set the minimum of friends user has to select.

First of all you need to set up a Facebook Application to get your APP ID Create it on this link https://developers.facebook.com/apps

Then you need to initialize the facebook Javascript api on your page. And after the Javascirpt api is initialized you can call the Custom Friend Chooser function on an <div> element.


Inline Chooser Demo with custom submit button

function loadInlineChooser(){
    $('#inline-chooser').friendChooser({ 
        max: 0,
        min: 3,
        display: "inline",
        showSubmit: true,
        returnData: "all",
        showSelectAll: true,
        showRandom: 10,
        onSubmit: function(users) { 
            if(users.length) {
                var friends = $("<div />");
                for(i in users) {
                    var img = $("<img />").attr("src", "https://graph.facebook.com/" + users[i].id + "/picture?type=square");
                    var name = users[i].name;
                    var div = $("<div />").css({ "float": "left", "text-align": "center", "margin": 10 }).append(img).append("<br />").append(name);
                    $(friends).append(div);
                }
                $(friends).append("<br style=\"clear:both\" />");
                $("#inline-chooser-output").html("<h4>Inline chooser output</h4>").append(friends);
                Cufon.refresh();
            } else {
                $("#inline-chooser-output").html("<h4>Inline chooser output</h4><p>No friends selected</p>");
                Cufon.refresh();
            }    
        }
    });    
}

Inline chooser output


Popup Chooser Demo

function loadPopupChooser(){
    $('#popup-chooser').friendChooser({
        display: "popup",
        max: 3,             //max selected friends
        min: 3,             
        returnData: "name",   //data to return (id, name, all)
        showRandom: 7,
        showSelectAll: true,
        onSubmit: function(users) { 
            if(users.length) {
                var text = "You selected following friends: \n";
                for(i in users) text += users[i] + "\n";
                alert(text);
            } else {
                alert("No friends selected");    
            }
        }
    });    
}





Premium jQuery plugins, PHP scripts, Wordpress themes