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

Question

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!

Answer 1

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.

Answer 2

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... :)