Facebook Friend Selector

Facebook Friend Selector is a friend selection assistant for your Facebook application or your website that is equipped with Facebook Connect. This tool returns you your friends ID’s only and you use them as you please. It was built using the jQuery library.

Demo & Download

Facebook Friend Selector Color BlueFacebook Friend Selector Search ResultsFacebook Friend Selector Show Count

This plugin is no longer maintained. Feel free to fork and update! Github repo

  • 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
  • Ability to select/deselect all friends
  • Ability to show selected friends
  • Ability to predefine selected friends
  • 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
  • Alex

    Hi 🙂
    I have simple question, when i select some facebook friends and click submit i want to call FB.ui({ method: ‘apprequests’ to: selected_ids ,}
    and selected ids i want to display in invite dialog “to: example selected ids, “. Can you help me with these please ?

    • As far as I understand, you want to open FB invite dialog box when you click submit button. Actually we will add this option in the short run. But you can do that like this for now:

      $(".bt-fs-dialog").fSelector({
        onSubmit: function(response){
          var friends = '';
          
          $.each( response, function(k, v){
          	friends += v + ',';
          });
          
          friends = friends.substr(0, friends.length - 1);
          
          FB.ui({method: 'apprequests',       	
              message: 'Heyyo',
              to: friends
            }, function(res){
          	  
          });
        }
      });
  • David

    I ask for help, whether it is possible that the friend selector throws random friends list ? Please if is possible, give mi some javascript code for this. Thank you.

    • I don’t understand what you mean. Do you want friend selector shows the random friends or you want it to send request to random friends?

      • David

        I want to friend selector shows random friends and i want to limited friends list for example to 5 friends. I tried many ways but I failed . . .

      • David

        Can you help me with these please ?

        • Facebook invite, max. friends count and random friends on list options were added to v.1.1. You can download from github.

          @david
          For your situation:

          $("#example").fSelector({
            maxFriendsCount: 5,
            showRandom: true,
            onSubmit: function(response){
              alert(response);
            }
          });
  • Gustavo86

    Hi admin 🙂
    – > about new version v.1.1
    Simple question, can you add toogle all checkbox, means select/deselect all friends ? I think it does not take much time for you 🙂 In any case, everything is done perfectly !
    Thanks in advance . . .

    • Yeah, admin is funny word 🙂
      ‘select/deselect all’ and ‘show selected’ options are added to the upcoming features list. You will see these options at the next version.

    • We added select/deselect option with version 1.2

  • Nicholas

    Can i call this dialog in function onload ?
    I tried everything possible but does not go . . .

    • If you have already added FFS (Facebook Friend Selector) then you can add the click method in the FBLogin code like this.

      FB.getLoginStatus(function(response) {
        if (response.authResponse) {
          ...
          
          $('.bt-fs-dialog').trigger('click');
          
          ...
        }
  • Gustavo86

    When will new version come out with select/deselect all ? 😀
    Thanks for reply.

    • We are working hard these days. But we’ll come out with the new version as soon as possible.

  • Michael Nielsen

    You should consider changing the #fs-dialog-box-wrap position to fixed, since this will make the friend selector appear in the center of the window all the time, instead of at the window.height/2-container.height/2 position in the document.

    Just a thought 🙂

    • Thanks for advice.

      But we had done that because we wanted to add cols and rows options to plugins further versions. Thats why we are calculating those measures.

  • Regis

    Hi Sevil!

    First want to thank you for providing this code. =)

    I’m trying everything, but the error when I try to log in…
    In the link below you can see the error.
    https://www.facebook.com/pages/Teste/261252147237653?sk=app_231202806967108

    Regis

  • adriano

    Hello, with the type of service I am providing I would need to retrieve a past friend selection.

    Example: one day the user selects 12 friends, and I store them in a sql table

    the day after, the user comes back in my app and as soon as your app selector is shown I would like to repopulate the selection with the 12 selected friends.

    Let me know if you did not understand my question!
    Thanks in advance and keep up the good work 😉

  • Jacky

    This friend selector is great, actually it is best custom selector what I have seen.
    One question: what would be best way to pass selected friends ID to image? Something like

  • Alton

    Ive used this plugin and it works fine on all browsers except, you guessed it internet explorer.
    It gives an error ‘You Must be logged in’.
    How do i resolve this issue.
    please help

  • Alton Pereira

    Problem With Internet explorer. doesn’t connect to Facebook.
    please help!!!!

  • sam matthews

    Excellent work.

    The only issue I have is that Groups are not part of the list. May I suggest adding this?

    • Hi Sam,

      Thanks for suggestion. But, we have no intention of doing that for now.

  • Ahmet

    Hello,

    Is it possible to insert the content in a predefined div? I do not want to use it as a modal dialog box. I want to have it permanently placed in a div.

    So something like,

    $(“.bt-fs-dialog”).fSelector({targetDiv: “friend-selector”});

    • Hi Ahmet,

      I was thinking that for a while. I think next version of this plugin you will see this feature. But for now there is no quick solution of this.

      • Ahmet

        When is the next release scheduled?

        Thanks

  • I can’t give any date. Because, I’m working hard these days. I hope it doesn’t last too long.

  • San Theingi

    Hello..
    I get “You must connect to Facebook to see this.” alert when I press “Click Here” link.
    I was already login to Facebook. What can I do? Please help!
    Thanks.

    • Hi San,
      Logging into Facebook is not enough to use this plugin. You should authorize your relevant FB App first. In other words you should connect your FB App that uses FFS.

  • Hi dear,
    great app!
    Simple question, when i select some facebook friends and click submit i want to post a messsage on their wall.
    Can you help me, please?
    Thx

  • Mohammad Hamaydeh

    Hello,
    nice work , but i have some inqueries in there is some help please .

    1- i noticed some bug , when you specify the max friends that should be select for example to be 3 .
    it is true it display the message that u reached the max , but it still let you check the “checkboxes” and it does return more that the max ,

    2- i wan to auto close the selector after reach the max , for example i have max 3 and i want to close the selector automatically when i selected 3 friends ,

    any help with these issues please ,
    thanks in advance

  • John

    Hello,
    Thanks for this great tool!
    I have one small question: there is an option ‘getStoredFriends’.
    Is there a way to pass the already choosen friends to this value?
    So: I choose friends and close the dialog box. Then I want to add some more friends. I cannot find a way to pass the friends IDs to the dialog box again…

    Thanks in advance!

    • John

      Solved! The value ‘response’ is a string, not an array. The function to start a dialog only accepts an array. So, basically you need to extract the string ‘response’ into a new array and pass it back to the function.

      var storedfriends = [];
      $(“.bt-fs-dialog”).fSelector({
      max: 25,
      excludeIds: [],
      getStoredFriends: storedfriends,
      closeOverlayClick: true,
      ……

      In the OnSubmit function, use:
      $.each( response, function(k, v){
      testresponse.push(v);
      });

      Hope this helps for some people 😉
      Good luck!

  • Mohammad

    How to set minimum for friend selection, so user have to select at least x friends?

    • Hi Mohammad,
      There is no minimum friend selection at this time.

  • raj

    hello
    sir
    i need facebook-friend-selector to send/throw names of selected friend/s to input box on html page ONSUBMIT. e.g. Name of FIRST SELECTED FRIEND send to INPUT BOX1 ,Name of SECOND SELECTED FRIEND send to INPUT BOX2 , and so on. Can you help me please.

  • Hi,
    The demo doesn’t work for me. The dialog closes immediately. Any idea why and how to fix it? I use Chrome on Windows 7.

  • Dimitri

    I can use the options fine, like showRandom and showSelectedCount, but I’m having trouble with the options starting with “lang”. See below what I’ve done. The default texts still show, not the ones I have defined. Can you tell me what I’m doing wrong here? Thanks!

    jQuery(document).ready(function($) {
    $(“.bt-fs-dialog”).fSelector({
    showRandom: false,
    ‘lang.buttonSubmit’: ‘Add’,
    showSelectedCount: true,
    ‘lang.selectedCountResult’: ‘Count: {0}’,
    onSubmit: function(response){
    alert(response);
    }
    });
    });

  • Luis Fernando Estrozi

    Fix for showing no users after emptying the search input after doing one search:

    _find function:

    – var elements = $(‘#fs-user-list .fs-fullname[value*=’+search_text+’]’);
    + var elements = $(‘#fs-user-list .fs-fullname’ + ((search_text === ”) ? ” : ‘[value*=’+search_text+’]’));

  • asia

    What’s the difference between Requests Dialog and this?
    https://developers.facebook.com/docs/reference/dialogs/requests/
    thanks

  • Naruto

    How do I attach click event to dynamically or to ajax return response href or link tag?
    i.e. $(“.bt-fs-dialog”).fSelector({

  • Saurabh

    How can we get selected IDS in php variable? Any help ?
    Demo codes pls!

    Thanks