Can't get Resizable IFrame to work (in iframe mode)

Take a look at http://apps.facebook.com/drupalforfacebook. View source.

It's a two-part problem. First there is a setting on the facebook site. Make sure your app is set to have resizable iframe canvas pages.

Second, you need some javascript on each page. I chose to just add this to page.tpl.php, right before the closure.

  <script type="text/javascript">
  DFF_Canvas = function(){};
  DFF_Canvas.init = function() {
    FB.Canvas.setAutoResize();
  };
  jQuery(document).bind('fb_init', DFF_Canvas.init);
  </script>

This works in conjunction with the 'fb_init' pseudo-event fired in fb.js.

There is a thread explaining this somewhere in this queue or on drupalforfacebook.org. I can't seem to find it right now. This should be documented under applications recipes here on d.o. Any volunteers?

If using "new sdks", you probably see the correct theme when you have authorized the app, but the default theme when you are not logged in or not authorized.

The trick is that using the "old sdks" facebook sends parameters indicating which application is requesting the canvas page. Using "new sdks" it stupidly does not send any clue in the request as to whether it is a normal web page or a canvas page. In order for modules/fb to determine that in this case a canvas page is requested, you must enable url alters. To do this, include fb_url_rewrite in your settings.php. The bottom of your settings.php should look something like

/**
 * Enable Drupal for Facebook
 */
$conf['session_inc'] = "profiles/custom/modules/fb/fb_session.inc";
include "profiles/custom/modules/fb/fb_url_rewrite.inc";
include "profiles/custom/modules/fb/fb_settings.inc";

Replace "profiles/custom/modules/fb" with the path to your modules/fb.

I would say make a new page in the documentation for the canvas resizing. I'm not sure what "add to fb node check box" means.

It was never clear to me why the wiki recommended this markup at the bottom of the iframe. You could try it and see if it matters.

  <!-- Note: Include this div markup as a workaround for a known bug in this release on IE where you may get a "operation aborted" error -->
  <div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>

Do you notice these problems on http://apps.facebook.com/drupalforfacebook ???

I can confirm that this works. Couldn't find documentation about it, so added the following page under Troubleshooting:

http://drupal.org/node/952984

Don't know if it's the correct place...

We're working on complete documentation. Admittedly we haven't gotten around to it all.

I've updated http://drupal.org/node/952984 to describe a newer and now recommended method, the one used on apps.facebook.com/drupalforfacebook.

The solutions named at http://drupal.org/node/952984 & in this issue didn't work for me, chrome still showed scrollbars.

Needed to add style="overflow:hidden" to my page.tpl.php to make the extra scrollbars disappear.

If your content is too wide, the resize feature wont help. You may want to hide the overflow on wide content.

If the canvas resizes its height, the feature is working.

Hi Dave, you are absolutely right. I was convinced my theme was 600px wide, but that proved not to be the case. My app is fitting in just fine now!