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)

But 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:

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’ , 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