Pages

Saturday, January 29, 2011

How to use FB.Canvas.setAutoResize

FB.Canvas.setAutoResize() function from Facebook Javascript SDK can be used to start or stops a timer which resizes your iframe every few milliseconds.

This function is useful when we know our page will resize but don't know when it will happen. A possible scenario is a Canvas application where every page has different height due to variable size of content.

It is very easy to use this function as per facebook documentation. But I faced some issues when I used it in Visual Force pages.

Here is Visual Force Page code to use this feature:


<apex:page>
 <body style="overflow: hidden">
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
   FB.Canvas.setAutoResize();
    };
    (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>
 
  <div style="height:2000px; width:500px; background:blue;">
   test page
  </div> 
 </body>
</apex:page>


The main hack is body style="overflow: hidden" which is not documented anywhere but it is required to get a consistent working page in all browser.
Posted by Unknown at 12:48 AM

6 comments:

  1. UnknownApril 15, 2011 at 7:29 AM

    You Rock Bro

    This is the most useful solution i found so far on scrollbar removal.

    Thanks a Lot

    Monit

    ReplyDelete
  2. testApril 23, 2011 at 4:26 AM

    You are the man :-) Thank you very much !

    ReplyDelete
  3. farrelldocMay 22, 2011 at 8:00 AM

    Thank you! I've been hunting around for an hour trying to get this to work!

    ReplyDelete
  4. fabSMay 26, 2011 at 6:26 AM

    thanks you save my day - This works perfectly for me...

    ReplyDelete
  5. UnknownJune 10, 2011 at 1:15 AM

    GRACIASS LO BUSQUE POR TODO LADOOO !!! EN ESPAÑOL NO HAY UNA EXPLICACION COMO ESTA

    ReplyDelete
  6. ran alush 3d multimediaJuly 5, 2011 at 6:11 AM

    hello

    you are all here (as i see) know where to put this code in order that autoresize will work on your facebook app, but i have a facebook app i just created (a minisite iframed in facebook)
    and i want that feathure, how and where i do this code???
    and how i change aplication url to be under my page as tab??
    can someone help please?
    thanks

    ran
    info@ibr.co.il
    https://apps.facebook.com/sfghfsdg/

    ReplyDelete

Subscribe to: Post Comments (Atom)