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:
- Canvas Settings -> Render Method = iFrame
- Canvas Settings -> iFrame Size = Resizable
- 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
EmoticonEmoticon