From Facebook Developer Wiki

Contents 1 IE7 and Safari 2 Slow Iframes 3 setting fb:iframe size dynamically 4 sending get parameters to your iframe 5 smartsize 6 Appending? 7 smartsize issues 8 GET Parameters not appended correctly? 9 Why is the src a required attribute? 10 Content under iframe.... 10.1 That is as it should be 11 Does this work in FBML boxes on Facebook Pages or Facebook Profiles? 12 Equivalent for pages? 13 Formatting the fan button for FB Apps 14 Sending Session info when dynamically creating an Iframe with FBJS

[edit] IE7 and Safari

When targeting my iframe from a link, it works in firefox. Although, IE7 and Safari it reloads the pageand displays the content that should be loading in my iframe. Whatsup?

Attention facebook devs, need an answer on this. Hook it up homies.

Answer: If you use fb:iframe in your fbml app, AJAX calls made from the iframe will fail silently in IE and Safari would be even less fluid in its flow. Here are two things you will absolutely want to do in your fb:iframed page.

1. for IE: in the page that shows up in the iframe, in the very beginning of the page, do send out a header string like this: PHP Code: header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');
2. for Safari: Don't load the target page in iframe rightaway. Instead have a intermediate page which just has a link to the page you want to load in the iframe. Cookies aren't set in Safari unless a user lands on a page due to en explicit click.

556172101 09:38, 13 May 2009 (PDT)

[edit] Slow Iframes

Is fb:iframe insanely slow for anyone else? It takes at least 10 seconds to load pages < 10k when hitting the page directly loads it instantly on a fresh browser. What gives?

I noticed that TopFriends uses an iframe and it is quite fast -- how did they get the speeds up?

-- 2009-01-26 : Not sure when the above comment was placed, but our iframe apps are seeing slow rendering times as well. 3-4 seconds extra compared to loading the iframe outside of the facebook canvas. Anyone else see this?

[edit] setting fb:iframe size dynamically

Is it possible to change the height of fb:iframe based on it's content's size?

[edit] sending get parameters to your iframe

I don't know why it's not described here, but if you need to pass get params to your iframe, list them as args within the <fb:iframe /> tag. Don't try to append them to the src tag.

So don't do this:

<fb:iframe src="http://yoururl.com/your_file.jsp?x=1" />

Do this instead:

<fb:iframe src="http://yoururl.com/your_file.jsp" x="1" />

Would it be so hard for someone at Facebook to take the time to explain this?

Added- jul 1 08 by john o'donovan Strange. I tried this with my PHP facebook application. The value passed successfully with this syntax: <fb:iframe src="http://yoururl.com/your_file.php?x=1" />

but did not work when I used: <fb:iframe src="http://yoururl.com/your_file.php" x="1" />

It would be good if facebook could explain why this behaves differently.

[edit] smartsize

What I don't get it and cannot seem to find out is what form the syntax for coding the attributes should take e.g. should smartsize be something like

smartsize="100%"

Which would be similar to height and width in HTML.

Anyone any idea if I am heading in the right direction, I can't seem to get it working??

Well I figured it out, so I have added the solution to the wiki mainpage on fd:iframe

[edit] Appending?

Could someone help me with what i have to do to a page in order to get it to show up in the fb:iframe? I am confused...

[edit] smartsize issues

If you use the smartsize="true" tag, it resizes the iframe properly, which is great. But if you put content below the iframe, it doesn't account for that height when resizing, so the page is for example 35 pixels too long if there is a div below the iframe with a height of 35 pixels. This puts vertical scrollbars on the very right edge of the page when they're not needed if the iframe is smaller than a page anyway.

There's a workaround I found - if you create another iframe underneath any content you add (so that the very last thing in your canvas page an <fb:iframe> tag with smartsize="true" set, then the smartsize code works fine - it's only if there is some spacing under the last <fb:iframe> tag that it breaks.

It would be nice if we were able to call the smartSizingFrameAdded() javascript function from the canvas, but it gets prefixed with our app id, which makes it a little useless.

[edit] GET Parameters not appended correctly?

It says that all the pertinent params (all the fb_sig stuff) are appended to the src="" string, but the string I get back are appended with "&amp;" instead of just "&". This renders the variables useless. Smooth move Facebook.

Me, too: I'm seeing this problem, as well. The iframe is being loaded as callBack.php?var1=1&var2=2&var3=3 27205106 16:44, 23 April 2009 (PDT)

[edit] Why is the src a required attribute?

There are some cases where you just want to add an empty iframe - if you're creating a pipe to submit a form through later or if you're using an iframe as a blocking element to keep scrollbars and dropdown menus from bleeding through absolutely positioned elements...

[edit] Content under iframe....

I found that unclosed tag <fb:iframe> clears any content under it. I.g. in this case "asdfgh" will never output.

<fb:iframe src="xxx" > asdfgh

I had to close tag to see content under iframe:

<fb:iframe src="xxx" /> asdfgh

[edit] That is as it should be

Leaving an unclosed iframe tag generally will have this effect

[edit] Does this work in FBML boxes on Facebook Pages or Facebook Profiles?

No. The <fb:iframe> tag can only be used in an Application Canvas Page -- nowhere else with no exceptions.

[edit] Equivalent for pages?

Is there another method, like an include or js, that could be used to embed external html from an external source?

<iframe src="http://www.falehafez.org/showfal.php?bgrepeat=&bgimg=&bgcolor=ffffff&fontsize=2&fontcolor=000000" frameborder="0" height="400" width="600" scrolling="auto"></iframe>

[edit] Formatting the fan button for FB Apps

I'm trying to implement a fan button iframe on an app page and I was thinking, as far as formatting, it's a little redundant to have a icon for the fan page right next to the logo for the app and the name of the fan page right next to the name of the app.

I can understand why you'd have these on any other site. It's more secure. It tells the user exactly what they're getting in to. It becomes its own little miniature application. etc.

On an app, though, it seems like you'd only need the button, itself. Similar to [[1]]

I want the same functionality without it taking so much space.

Thanks for the feedback, Mike. Could you file this in Bugzilla as a feature request so we can track this? Thanks, Pete (563683308 13:39, 20 July 2009 (PDT))

[edit] Sending Session info when dynamically creating an Iframe with FBJS

I am creating a dynamic iframe in FBJS, but it is not passing session info to it, so it redirects trying to log me in.

Is there a way to pass the session info along without doing it manually?

Thanks

548871286 05:15, 5 August 2009 (PDT)