iframe-based facebook app gets unwanted scroll bars with a smaller windows size

StackOverflow https://stackoverflow.com/questions/4150459

Question

I have this Facebook application profile page:

http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566

which is associated with my iframe-based Facebook application, Gem Spinner:

http://apps.facebook.com/gemspinner/

What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.

Was it helpful?

Solution

Well, I did a few things to get it to work.

(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.

(2) I loaded the Facebook connect API (see code below).

(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.

  <body>
    <div id="fb-root">
    </div>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script type="text/javascript">
      FB.init({
        appId  : 'your app id here',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : false  // parse XFBML
      });
      FB.Canvas.setAutoResize( 100 );
    </script>

    ... the rest of the page body goes here ...

    <script type="text/javascript">
      FB.Canvas.setAutoResize( 100 );
    </script>
  </body>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top