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