facebook-app: how can i change the height of a resizeable iframe application?

I created a facebook app and i configured the following:

IFrame Size: Resizable Canvas Width开发者_高级运维: 760px (not using fbml)

it seems that no matter how i configure my html page, the iframe height is 800px. my application needs more then that, how can i configure the iframe of the facebook application to have a larger height ?

thanks!

Setting your Canvas Size option to Resizable Iframe does not in itself make the canvas automatically resize to conform to your content. There's a couple of other things you have to do. Check out the Resizable IFrame wiki page for the full instructions.

You basically have to create an HTML page known as a "cross-domain receiver" (which is as simple as copying and pasting their example file), and then copy a snippet of Javascript code on the bottom of all your application pages. The Javascript will perform a resize of the iframe once the content has loaded.

The wiki page has improved since the last time I used it, so hopefully it's fairly straightforward. If you run into problems getting it working, make sure you check that you've modified the javascript snippet appropriately so that it points to your cross-domain receiver page.

Update Jan 2011 - Some comments coming in, so I thought I'd update. I believe this answer is still more or less correct, although the documentation has changed. Facebook has moved away from FBML, and updated their Javascript SDKs. The current method to load the Javascript SDK is found on the main Javascript SDK page, and at the bottom are the methods you can use for resizing the canvas, FB.Canvas.setAutoResize() and FB.Canvas.setSize(). You still need to set your canvas as resizable in the app's Developer settings. It looks like they may have replaced the need for a cross-domain file with the new SDK, but I haven't tested it yet myself.

I stuck this code on the end of my HTML iFrame content file just before the closing tag and it works great now.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'YOUR_APP_ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    oauth  : true // enable OAuth 2.0
  });
  FB.Canvas.setAutoResize();
</script>

Obviously, put your APPID in there... :)

FB.Canvas.setAutoGrow()

Note: this method is only enabled when Canvas Height is set to "Fixed at (800)px" in the App Dashboard.

Starts or stops a timer which will grow your iframe to fit the content every few milliseconds. Default timeout is 100ms.

Used to be known as FB.Canvas.setAutoResize.

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/

While the wiki no longer exists, I've discovered this page and I think it might be what Zombat was talking about.

http://apps.facebook.com/wzhu_public_resize/

Facebook have recently introduced a new "fluid" setting for canvas width and height, thus enabling canvas dimensions that exceed the normal 760px width http://developers.facebook.com/blog/post/538/ (12th August 2011).

To change the setting:

1) Go to the Facebook application settings page.

2) Choose Advanced.

3) Under Canvas Settings, set Canvas Width to fluid. This allows the application to take up almost the full width of the screen.

The same can be performed for the height.

Extra: There is speculation that this was in response to Google's own efforts in the gaming arena http://tutorial-on.blogspot.com/2011/08/facebook-features-new-gaming-canvas-and.html