Facebook Cookbook

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

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:

first part is css
second part is javascript
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>

it's best that 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.



Share and Enjoy:


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	


					
					





	11 Responses to “friends selection custom component”

	
	

    
		    
    
        Vish  on March 28th, 2009 
        You did not tell us how to send invitation/notification to selected users. You only showed how to select friends!!

How will i send Invitation to my friends?
        
          
    
 



    
		    
    
        maurizio  on April 18th, 2009 
        This code is a total waste of time, you must check what you put on web before putting it, totally a waste of time, maybe it’s better for you to stop coding
        
          
    
 



    
		    
    
        Baz  on June 6th, 2009 
        some of your pages gave me some very good tips, you really helped me sort something out, but for the life of me i cannot get this to display properly, have you tested your download yourself? i made a few corrections, but i can’t believe i had to do that. maybe it worked on a previous version of facebook, let me know i’ll try and help, i was bored wanted to try other stuff out, many thanks  
        
          
    
 



    
		    
    
        Baz  on June 6th, 2009 
        require_once ‘../facebook_php4.php’;
 $appapikey = ‘wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww’;

 $appsecret = ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’;

 $facebook = new Facebook($appapikey, $appsecret);

 $user_id = $facebook->require_login();
 $friends = $facebook->api_client->friends_get();
That’s what i expected to add to the front of the script, i hope i’m right.
        
          
    
 



    
		    
    
        Baz  on June 6th, 2009 
        ok, now i’ve managed to get the html to work, the php-side will be easy, the main problem with the html is the check boxes don’t work properly, so as i think is the case in your script you moved them out of view, also you stor the friends ids as xxxxxxxx,yyyyyyyy, etc that will create a boo-boo some time if fb id numbers become an extra digit longer, or if fb ids of shorter values already exist, so when adding to the string i add as “xxxxxxxx”,”yyyyyyyy”, with quotes, so only an exact match will ever be replaced, it’s a very unlikely scenario, but it will defo possible to have a corrupt string of friends ids, thanks for the challenge   good luck.
        
          
    
 



    
		    
    
        bushrafatima  on July 15th, 2009 
        jhfgjto  jjgfggbk gfjtjhbg jfdgvdfk fjhgd nfgvjftn gkh  gfjt gftjn jgkhj  jgkb   ngv dfjg df dfvjm gb jvnfg vmndfg dfgmnb gfkvm nvkdm nvkdf nvd
        
          
    
 



    
		    
    
        Girish  on September 12th, 2009 
        I Need a asp.net version of Multifriend selector> Can you please give the code for me.. Thanks in advance
        
          
    
 



    
		    
    
        Vincent Roman  on November 19th, 2009 
        Have to agree with Maurizio!
        
          
    
 



    
		    
    
        gregtampa  on February 24th, 2010 
        you guys can combine this with how to send notifications and emails post.. to send it.. why you guys expect everyone todo ur work for u! atleast this guy posts something i dont see a post from u.

anywho… alos there is php to asp converters online go use one.
        
          
    
 



    
		    
    
        kanyal  on April 8th, 2010 
        HI Guys, thanks for posting your findings,

i am working on a facebook flash app. i want to show friends invite form like in this app http://apps.facebook.com/wordchallenge/?pf_ref=sb

i mean there is an invite button in flash app, when user will click that button a popup dialog window like above app will open on flash client and user will send invite to his friends without refreshing page (using some ajax) can any body refer some helping stuff. i am searching on google but no success.

thanks in adavance

Regards
        
          
    
 



    
		    
    
        Fernando P.  on July 15th, 2010 
        Sorry, my english sucks.
This code works! i make a little change.
in the php part instead of

$item['uid']

you should use only

$item
In order to obtain the array of friends you should use:

$friends = $facebook->api_client->friends_get();
And download the code! The code in the page is wrong.
Thanks a lot for this script!
        
          
    
 

	    

	
    
	
		
		
		
	
 

 




Leave a Reply

	Click here to cancel reply.




Username (required) :

 



Email (required) :

 



Web Site :

 






Comment :