views:

8480

answers:

5

I'm trying to use facebook's fb:friend-selector fbml tag, but my application is running in an iframe. Is it possible to use this tag in an iframe, if so anyone have any examples?

+13  A: 

Yes, this is definitely possible, but you have to use Facebook Connect and XFBML. Specifically, you want to use the fb:serverfbml tag to get fb:friend-selector working. I have an iframe app whereby I use all of this and the fb:friend-selector in the standard "invite friends to your app" context, and it works great.

Here is the body of my template file, which gets output inside the body of my iframe:

<fb:serverfbml style="width: 650px;"> 
<script type="text/fbml">
    <fb:fbml> 
     <fb:request-form
      action="http://your-site.com/invite/sent"
      method="POST"
      invite="true"
      type="My App"
      content="Try out my app!
       <fb:req-choice url='http://your-facebook-canvas-url'
       label='<?php echo htmlspecialchars("Accept button text",ENT_QUOTES); ?>'
       /> 
      " > 
      <fb:multi-friend-selector
       showborder="false"
       actiontext="Invite your friends to try My App."
       exclude_ids="<?php echo $excludeIds; ?>"
       rows="3"
      /> 
     </fb:request-form> 
    </fb:fbml>
</script> 
</fb:serverfbml>

In the footer of the page, I have the standard Facebook Connect code, which will load and render the fb:serverfbml contents:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
    FB_RequireFeatures(
     ["CanvasUtil"],
     function(){
       FB.XdComm.Server.init('/xd_receiver.html');
       FB.CanvasClient.startTimerToSizeToContent();
     }
    );
</script>

<script type="text/javascript">
    FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); }); 
</script>

That should be all you need (fill in your own options where applicable, of course). You'll have to set up Facebook Connect to work with a cross-domain receiver file. I suggest following the rendering XFBML steps.

zombat
You say you have to used Facebook Connect. From the documentation there appears to be two links to FeatureLoader.js one with Connect and one without Connect in the url. I am not sure what to make of this and very confused.
f4hy
While the answer suggested by Zombat works, you should use the new [JS SDK](http://developers.facebook.com/docs/reference/javascript/) instead of the older JS SDK his code sample uses. The XFBML will remain the same, but the JS code will look different. Here's a live example: http://apps.facebook.com/fbrelll/xfbml/fb:server-fbml-multi-friend-selector.
daaku
@daaku - yes, this question was asked/answered more than a year ago, so it is out of date now.
zombat
Oops. Sorry about that, I think I noticed May, but not the 09 part when I saw the date. The new SDK didn't even exist then :)
daaku
+1  A: 

Since that are a lot of questions about the friend-selector within an iframe.

Guys the correct sintax now is <fb:serverfbml width="650px">

andrehjr
A: 

i have maked all you said and i get the rest but whene i pushed cancel or the invitations are sent it shows me anther facebook in my canvas

A: 

I've set up Facebook Connect with a xd_receiver but it displays nothing.

Jojo
A: 

yes this example, including the linked to example, does not work hit cancel o nthe friend sign up and you get a page within a page that says not found

Lee

related questions