Facebook Cookbook

displaying a “friend selector” in FBConnect application – a custom component for you

ok, i have learned my lesson while integrating <fb:multi-friend-selector [condensed] /> and <fb:multi-friend-input /> in an iFrame app where i was rying to render it uwing <fb:serverfbml>. i was designing a page where users of your application can select an item, then some of their friends and finally submit the form to the handler script (might be javascript routine too!)

as <fb:serverfbml /> renders the <fb:request-form /> inside another iframe (thats right – iframe inside an iframe) so its quite tough job to pass external data to any of the DOM element inside those iframe. later, i tried to dynamically render the <fb:serverfbml /> with the help of AJAX and XFBML.parseDOMTree() but no luck. the surprising fact that everything out there was renedring properly but not the request form (when returned via ajax). so finally i did it with FQL and by building a custom friend selector component. so here it is


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Friend Selector</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<fb:login-button></fb:login-button><br/><br/>
Hello <span id="me" uid="503274632" useyou='false'></span> And here is your friend list<br/>

<div id="friends"></div>
</body>
</html>
<script type="text/javascript"> 

function loadFriends(uid) {

    FB.XFBML.Host.autoParseDomTree = false;
    FB.XFBML.Host.addElement(new FB.XFBML.Name(document.getElementById("me")));

    FB_RequireFeatures(["CanvasUtil"], function(){  FB.CanvasClient.startTimerToSizeToContent(); });
    var api = FB.Facebook.apiClient;
    api.fql_query("SELECT uid, first_name, last_name FROM user WHERE  uid IN (SELECT uid2 FROM friend WHERE uid1 = "+uid+") order by first_name", function(result, ex) {

        data = "<table>";
        for (i=0;i<result.length;i++)
        {
            data += "<tr><td><input type='checkbox' value='"+result[i].uid+"' name='friends[]' id = 'friend"+result[i].uid+"' /></td><td>"+ result[i].first_name + " " + result[i].last_name+"</td></tr>";
        }
        data +="</table>";
        $('#friends').css({"overflow-y":"scroll","height":"200px","width":"300px","border":"1px solid #ccc"});
        $('#friends').html( data);

    });
}

FB.init("api_key", "xd_receiver.php",{"ifUserConnected":loadFriends});

</script>

and here is how it looks,

you will find it useful in your FBConnect applications

Share and Enjoy:

10 Responses to “displaying a “friend selector” in FBConnect application – a custom component for you”

Ace_ov_Spade on March 1st, 2009

ami onek khon try korsilam nije.. pari nai..
thanks a lot for sharing it.
phpknight on August 1st, 2009

hello Hasin i have used your code it works fine on my app but i want a friend selector in which you don’t need to click on connect button. i want to show the friend selector on page load. i am new to facebook application and i have tried ways but not successful yet. so plz help me and tell me how can i do this
will on October 22nd, 2009

Hi Hasan

do you have constraints about people using this in their code? Like how do you want us to cite you?
Vincent Roman on November 17th, 2009

Hey Hasan. Thanks for the post, but you do not stipulate how you are using this code, is it in a web page or as part of a template bundle? Am trying to do something similar and want to try and keep the process within the series of overlays that FB produces. thanks Vincent =
arun.eee28 on November 25th, 2009

Hi Hasin,
Thanks for sharing the information. I have a requirement similar to this. After the friend selection, i want to send my application invites to them. For this, i was using fb:request form submit button but as you rightly pointed out, i dont have much control on that. When the fb:form submit is clicked , it opens up a confirm dalog box having the preview of the invite been sent. This confirmation box occupies some space in the page and if i click “cancel” , the white space created is not collapsing.How did u create the send invite interface. Did u create a button of your own ?
alifaziz on February 16th, 2010

thanks bro, it helped.
andres on February 16th, 2010

i keep getting :Invalid API key specified

The application you are trying to access does not exist or has been disabled.

how do i fix that?
cheers,
Andres
andres on February 16th, 2010

i have it working now, i am just wondering how you process the friedn once they are selected, let’s say you want to send them some kind of notification/email or something.
cheers.
zonathen on April 8th, 2010

Thank you so much kind person! You made my day!
amesh on July 7th, 2010

This is a great tutorial, thank you. One nagging question I have been searching for is, how can I dynamically send a request in an iframe application? Is this possible or does an fb:request-form always need to be pre-rendered?