search

codersgrave / Facebook-Friend-Selector

This repo is no longer maintained. Feel free to fork and update!
http://facebook-friend-selector.codersgrave.com
64 stars 22 forks source link

readme

This repository is no longer maintained

Facebook Friend Selector v1.2.2

Features

Requirements

jQuery 1.6.2 or above

Facebook Javascript SDK integration

Demos And Examples

http://facebook-friend-selector.codersgrave.com/

How to use

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.

1. Include Necessary Files

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="https://github.com/codersgrave/Facebook-Friend-Selector/blob/master/friend-selector/jquery.friend.selector-1.2.2.css" rel="stylesheet" />
<script type="text/javascript" src="https://github.com/codersgrave/Facebook-Friend-Selector/raw/master//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/codersgrave/Facebook-Friend-Selector/raw/master/friend-selector/jquery.friend.selector-1.2.2.js"></script>

2. Insert the following code into <body> tag

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>

3. Add the following code to your page's <body>

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="https://github.com/codersgrave/Facebook-Friend-Selector/blob/master/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

License

Facebook Friend Selector is licensed under a Creative Commons Attribution 3.0 Unported License.