- Ability to set a maximum number for friend selection
- Exclude as many people as you want from the list
- Ability to show random friends list
- Ability to set maximum friends on list
- Search
- Facebook invite option (sends apprequest)
- Ability to select/deselect all friends
- Ability to show selected friends
- Ability to predefine selected friends
- Ability to add user groups
- Overlay color selection
- Overlay opacity selection
- Ability to hide the overlay with a mouse click outside the box or a ESC key press
- Centers the box on window resize
- Ability to close the box onsubmit
- Ability to enable or disable to display the number of selected people in the box
- Seven color options (easily customizable)
- Adaptability of texts to any desired language
- Ability to decide what to do onstart
- Ability to decide what to do onclose
- Easy integration
jQuery 1.6.2 or above
Facebook Javascript SDK integration
http://facebook-friend-selector.codersgrave.com/
Note: The following statements don't include Facebook integration. As the basics of the application depend on Facebook API, we assume that you do the Facebook integration.
We seperate the Facebook stage not to interfere with the Facebook applications you own that are already online. If you haven't already done the Facebook integration, you can see Facebook Javascript SDK page or go check this example's source.
Add these lines into your web site's <head> part or depending on the difference of usage, up on the </body> tag.
Loading jQuery from CDN (Content Delivery Network) is recommended
<link type="text/css" href="/friend-selector/jquery.friend.selector-1.2.2.css" rel="stylesheet" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/friend-selector/jquery.friend.selector-1.2.2.js"></script>
This is the code block where you define the action for friend selector box. You can replace "bt-fs-dialog" name with anything you want. You have to change the class name in Step 3 with the same name.
See the Options and Events tabs for more options
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".bt-fs-dialog").fSelector({
onSubmit: function(response){
// example response usage
alert(response);
}
});
});
</script>
This code can be a button, image or a link. It would be adequate to add "bt-fs-dialog" to the class property definition.
<a href="javascript:{}" class="bt-fs-dialog">Click here</a>
If all of your definitions are correct, you can see the friend selector box when clicked on the example links.
Click here for basic example
Facebook Friend Selector is licensed under a Creative Commons Attribution 3.0 Unported License.