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 
