Facebook-app: how can I change the height of the resizable iframe application?

Question

I created a facebook application and I configured the following:

IFrame size: resize canvas width: 760px (without using fbml)

It seems that no matter how I set up my html page, the iframe height is 800 pixels. my application requires more than that, how can I configure the iframe of a facebook application to a greater height?

thanks!

Answer 1

Setting the Canvas Size parameter for the Resizable Iframe alone does not allow you to automatically resize the canvas to fit your content. There are a few more things you need to do. Check out the Resizable IFrame page for complete instructions.

You basically need to create an HTML page known as a "cross-domain listener" (this is as simple as copying and pasting their sample file), and then copy the Javascript code snippet at the bottom of all your application pages, Javascript will do an iframe resize after loading the content.

The wiki page has improved since its last use, so hopefully it's pretty simple. If you have problems with its operation, make sure that you verify that you have correctly edited the javascript fragment to point to your cross-domain recipient page.

Jan 2011 update . Some comments are coming in, so I decided to update. I believe this answer is still more or less correct, although the documentation has changed. Facebook has moved away from FBML and updated its Javascript SDK. The current method for loading the Javascript SDK is on the main page of the Javascript SDK , and below are the methods you can use to resize canvas, FB.Canvas.setAutoResize () and FB.Canvas. SetSize () . You still need to set your canvas as changeable in the application settings. It looks like they replaced the need for a cross-domain file with a new SDK, but I haven't tested it myself yet.

Answer 2

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

<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 the APPID there ... :)

Answer 3

FB.Canvas.setAutoGrow ()

Note. This method is only allowed if the Height canvas is set to "Fixed at (800) px" in the application panel.

Starts or stops the timer that your iframe will grow to match the contents every few milliseconds. The default timeout is 100 ms.

Used to denote FB.Canvas.setAutoResize .

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

Answer 4

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

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

Answer 5

Facebook recently introduced a new “fluid” setting for the width and height of the canvas, which made it possible to increase the size of the canvas in excess of the standard width of 760 pixels http://developers.facebook.com/blog/post/538/ (August 12, 2011).

To change the setting:

1) Go to the settings page of the Facebook application.

2) Select "Advanced."

3) In the "Canvas Settings" section, set the canvas width to liquid. This allows the application to occupy almost the entire width of the screen.

The same can be done for 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