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 was needed a component that would be 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

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
</code></code>

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>