facebook javascript SDK: FB.Canvas.setAutoResize iFrame not working?

Question

we built a facebook application with ruby/rails and facebooker (iframe application) and are currently stuck with the FB.Canvas.setAutoResize which seems to fail in some cases. u

Answer 1

the solution is easy! besides putting FB.Canvas.setAutoResize()
you have to change ur body to body style="overflow:hidden"

it works for me! now ie8 is ok!!

Answer 2

I'd also like to point out, that you do indeed need your

<div id="fb-root">

for this to work.

Answer 3

Some key things to make sure are set in the application settings:

1. Canvas Settings -> Render Method = iFrame
   
2. Canvas Settings -> iFrame Size = Resizable
   
3. Migrations -> new SDK = Enabled

Next adjust your code by adding a timeout (250 seems to work best, but you may want to experiment futther). I've tested this in FF3.6 and IE7+. In IE there is a momentary flash of the vertical scrollbar which I'm still trying to fix.

<div id="fb-root"></div> 
<script type="text/javascript"> 
  window.fbAsyncInit = function() {
    FB.init({appId: '12345678910', status: true, cookie: true, xfbml: true});
  window.setTimeout(function() {
    FB.Canvas.setAutoResize();
  }, 250);
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>