CODEWITHSUNDEEP
facebook
Peter
Peter

Reputation:

Can I use Facebook's fb:friend-selector in an iframe?

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 does anyone have any examples?

Upvotes: 21

Views: 25252

Answers (4)

zombat
zombat

Reputation: 94167

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://example.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.

Upvotes: 16

Christopher Johnson
Christopher Johnson

Reputation: 695

The question in this thread is still relevant but the answer is out of date. You should use the new javascript SDK. This should replace the second code snippet posted by zombat

<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript">
   FB.init({appId: 'your app id',
       status: true,
       cookie: true,
       xfbml: true});
   FB.Event.subscribe('auth.sessionChange', function(response) {
     if (response.session) {
       // A user has logged in, and a new cookie has been saved
     } else {
       // The user has logged out
     }
   });
</script>

more info here: http://www.clickonchris.com/2010/11/facebook-javascript-sdks/

Upvotes: 8

Bill Ortell
Bill Ortell

Reputation: 837

one MAJOR and IMPORTANT point that gets missed is that many of you (including me) stick in scripts just about anywhere... but the "FB" load.js file needs to be loaded IMMEDIATELY after the body tag.

at least this is what I found to make everything work and humm accordingly. I found it on a post on some other site (wasn't sure if I should post it here or not...) but it came after spending countless hours, doing the above aforementioned - as well as following every other 1,2, 3 step punch into getting the iframe to size properly...

and now i've gotten it to work :)

Upvotes: 0

andrehjr
andrehjr

Reputation: 56

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

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

Upvotes: 3

Related Questions