Tutorial :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. using the example from facebook developer docs ( see http://developers.facebook.com/docs/reference/javascript/ ). the autoresize fails once you enter a page which is higher than 800px - so to say, it just works as long as the canvas gets bigger, not when it gets smaller. anyone has a clue or maybe a workaround?

here is the resizing code piece

<div id="fb-root" style="width:1px;height:1px;position:absolute;"></div>   <script type="text/javascript">     window.fbAsyncInit = function() {      FB.init({appId: '126342024064822', status: true, cookie: true, xfbml: true});      FB.Canvas.setAutoResize(true,100);    };    (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>  

i am very thankful for any comments or hints, since i am twisting my head around this one for more than a day now.


Solution:1

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>  


Solution:2

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!!


Solution:3

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

<div id="fb-root">  

for this to work.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »