Facebook – Friends selection custom component

For 1 of my facebook application, I was  needed a custom friends selector. The purpose was, I’ve a page from where I’ve to select multiple friends and then I’ll submit those selected friend ids using ajax call without refreshing the page.

Then I searched the documentation of fbml. In facebook component, there are 2 types of friends selector

  1. http://wiki.developers.facebook.com/index.php/Fb:multi-friend-selector
  2. http://wiki.developers.facebook.com/index.php/Fb:multi-friend-selector_(condensed)

face-1face-2But both of these are totally controlled by facebook and these components are used to send invitation or request to friends. I need a component like figure 2. The fbml code for the second component is below:


<fb:request-form method="post" action="http://yourdomain.com/submit.php" content="Select Friends" type="gifts" invite="true">
<div class="clearfix" style="padding-bottom: 10px;">
<fb:multi-friend-selector condensed="true" selected_rows="0" style="width: 220px;" />
</div>
<fb:request-form-submit />
</fb:request-form>

But I need a component that is fully controlled by me. So,  I developed a friends selection component and I’m sharing it. :)

Here is the outlook of my component:

custom-friends-selection-component

Download Custom Friends Selector for Facebook Application

There are 3 parts in this code:

  1. First part is CSS
  2. Second part is Javascript
  3. Third part is HTML + PHP
  4. So changed the file extension to .php

Here is the first part:

<style>

div.scroll {
height: 160px;
width: 200px;
overflow: auto;
border: 1px solid #666;
padding: 8px;
}

#listwords{
border: 1px solid #BDBABD;
margin-top: 5px;
margin-left: 10px;
}

#listwords ul{
list-style: none;
margin-top: -3px;
cursor: pointer;
}

#listwords span{
color: olive;
text-decoration: none;
}

.itemselect{
background-color: #e2dfaf;
color: #650202;
}

.itemmouseover{
background-color: #FFEEBB;
color: BLACK;
}

.itemnormal{
color: BLACK;
font-family: arial;
font-size: 12px;
}

This is the css code for the outlook of my component. Here in the top you’ll see a bold part. This is a very important code that creates scroll bar when list is overflow than it’s height.

Now the second part and 3rd part:

<script type="text/javascript">
//javascript part
/*------------------------- Friends selection -----------------*/
var friendsSelectedIds =   ''; //this is string
//send this variable to php and using php's array_unique function removes duplicate values

function toggleSelect(id){
var liBox   =   document.getElementById(‘li’ + id);
var chkBox  =   document.getElementById(‘chk’ + id);

liBox.toggleClassName(‘itemselect’);
if (chkBox.getChecked()){
friendsSelectedIds  =   friendsSelectedIds.replace(id + ‘,’, ”);
chkBox.setChecked(false);
}
else{
chkBox.setChecked(true);
friendsSelectedIds += id + ‘,’;
}

return false;
}
/*============== END ====================*/

function sendFriendIds(){
if (friendsSelectedIds.length == 0){
new Dialog().showMessage(‘Select friends’, ‘Please select friends!’);
return false;
}

//submit form using ajax call
var ajax                = new Ajax();
ajax.responseType       = Ajax.FBML;

ajax.ondone        = function(data){
//task u will do
}

ajax.onerror = function(){
new Dialog(Dialog.DIALOG_POP).showMessage(‘Error’, ‘Loading error! Please try again!’, button_confirm = ‘Okay’);
}

var queryParams = {“ids” : friendsSelectedIds};
ajax.post(‘http://yourdomain.com/submit.php&#8217; , queryParams);

}
</script>


<!-- HTML Part -->
<form name='ffriends' method="POST" action="" onsubmit="return false">
<div class="scroll" id="listwords">
<?php $i=0; ?>
<ul style='margin-left: -44px'>
<?php foreach($friends as $item){ ?>
<li id="li<?=$item['uid']?>" class='itemnormal' onclick="toggleSelect(<?=$item['uid']?>)">
<input id="chk<?=$item['uid']?>" type="checkbox" /> <fb:name uid="<?=$item['uid']?>" linked="false" />
</li>
<?php } ?>
</ul>
</div>
<input style="margin-left: 10px;" class="inputsubmit" type="Submit" value="Send Question" onclick="sendFriendIds()" />
</form>

It’s best you download the code and read my description. In html part, you will see a foreach loop where friends is an array of the friends you have. I retrieve the friends using FQL and assigned the result in $friends variable.  When a friend is selected, it’s id is saved in friendsSelectedIds variable in javascript. (Like friendsSelectedIds=12393939,45454545, ) A comma is added after id. When a friend is unselected its id and comma is removed from the variable. This variable is a string variable. After selecting one or more friends when user press the submit button sendFriendIds() method is called. In this method you’ve to redefine the ajax functionalities for your work. If no friend is selected a message is shown to the user. Remember var queryParams = {“ids” : friendsSelectedIds}; ids is the selected ids of friends and this will be catched from server side script. And ids containted comma separated id of friends. I think this is a very small lines of code and easily understandable for facebook application developer.


About these ads

25 Responses to “Facebook – Friends selection custom component”

  1. ranacse05 Says:

    nice tool . I was facing same problem when i developed my clients gift app . Then i did something like urs :D but urs is more cool ;)

  2. mahmudahsan Says:

    @ranacse05, if I got yours then would not develop this. :)

  3. ranacse05 Says:

    mine was simple , just some css code to get the effect and then i just use the checkbox . ;)

  4. Williams Says:

    Hello, I speak litle english but your aplication to give me error :( . This is Error: Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in C:\wamp\www\friendsselector-2009-01-01\FriendsSelector.php on line 126

    • mahmudahsan Says:

      @Williams,
      This component is developed for facebook application. so, you’ve to check this code in facebook application. And some variables need to change here.

  5. Zohaib Says:

    I`m a newbie. So the question is that how will the UID of the selected friends will be submited to the php in action(e.g if action=”add.php”) . Do we have to add something in sendFriendsIds() method.

  6. mahmudahsan Says:

    @Zohaib: look there in the code: var queryParams = {”ids” : friendsSelectedIds};
    and queryParams are sent by ajax call. So you you’ll get the friends ids as a comma separated string.

    add.php

  7. Todd Says:

    Hey there – I have a question for you but didn’t want to post it here ; ) Can you please shoot me an email?

    Thanks!

  8. Rick Says:

    Thanks for the nice code!

    Please excuse my “noobness” but I’m confused as to how to send the notification to the various friends.

    I was reviewing the Notifications.send information in the Facebook Developer Wiki, but I can’t understand how to get the “Javascript” string in a PHP variable, so that I can do the Notificatins.Send command.

    This may sound cheap, but could you provide the code that actually sends the notification to the comma-delimited friends list?

  9. Dustin Says:

    I’m creating a custom friend selector that includes profile photos and dynamic selection with FBJS (dfbml?) similar to the multi_friend_selector but able to be used anywhere in the application.

    I’m posting to fish for features I should implement (min/max selection, etc.). If anyone has ideas to offer or things they would personally like to see implemented, feel free to send an email.

    dustin at dustinfineout dot com

  10. coolface Says:

    Hello,
    I make also my own friend selector, and it’s working good.

    My problem is “how to send invitation to use my app to the id list????”

    In your exemple, you have : ajax.post(’http://yourdomain.com/submit.php’ , queryParams);

    The submit.php file, how it works?
    It is possible to send notification via the PHP API, but for inviting friends…. Any solution?

  11. amal Says:

    My doubt is

    How can i load the my facebook friends list to an application developed by me.

    thanks in advance.

    • mahmud ahsan Says:

      2amal, use $friends = $_REQUEST['fb_sig_friends']; //use in canvas page, you can also use facebook api to load friends, pls check facebook api documentation

  12. dheer Says:

    Hi,
    I want to show invitation request on my friends wall(news feed) as well. how can i do so. is any idea u have.

    thanks.

  13. StErMi Says:

    How can I do it without FBML? (i’m using iframe app ).

    How can I do <fb:name uid="” linked=”false” /> ?

  14. ghprod Says:

    great class!!

    thanks, i’m looking for it yesterday, and i found you :)

    regards

  15. Karthik Says:

    Hey Hi

    I am developing a facebook application, in which one of the options is to display the mutual friends. This mutual friends method has two parameters(both uids). First parameter is ur friend’s uid and the next parameter is ur uid.

    Now i want to display the friends list and when the user selects a friend and clicks submit, the corrosponding uid should be passed on to a php variable…

    Kindly help me on this….

  16. sinemalar Says:

    woov thank you

  17. Request Says:

    Hi,

    Nice solution, but:
    do yo know if there’s a way to integrate it with fb:request-form ?

  18. Noha Says:

    how can i have the same thing in asp.net plz

  19. sivakumar.s Says:

    Hi

    I want to select all friends in my list while the user click the selectall checkbox please help me . It will be so useful for me. Thanks in Advance.

  20. lalit Says:

    hey i am try to download code… but your download link show me an error…

  21. lalit Says:

    hey i need a script to select individual user to send individual message on facebook.. my mean is that i am happy with send dialogue box but i do not want multi user selection…thanks in advance

  22. Marcus Says:

    Your personal post, “Facebook – Friends selection custom component | Think Different” was
    in fact well worth writing a comment down here in the
    comment section! Merely needed to say you truly did a very good work.
    Thanks for your time ,Williemae

  23. Candace Says:

    I actually blog also and I’m crafting a thing alike to this article, “Facebook – Friends selection custom component |
    Think Different”. Do you care in the event that I reallyuse
    a number of your tips? Thanks ,Shoshana


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: