Timeline page app height stuck at 800px

Question

I'm developing an app for a Facebook page with the 'timeline' layout, and I want the height of the app to scale with the content, but the height of the app is fixed at 800px.

The current app settings show that the height is set to 'fluid,' but I have also tried fixing the height to random values and witnessed no change.

How to I get the height of my app to scale to it's content? Thanks for any responses.

Update: So appending this to my body tag worked.

<body onload="FB.Canvas.setSize({width: 810, height: 910})">
<div id="fb-root"></div>
<script>
(function () {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID;
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
} ());
</script>

But I have zero idea why it worked, so I guess I'll change my question to 'what does the above code do?' so I can actually understand what steps to take next time. I'll put this as an answer for now to close off the question though.

score 8 · Accepted Answer · edited Mar 13 '12 at 21:02

8

This is the proper way to set things up, I just had to stare at it for a while and read the documentation way too many times. Putting the following below the fb-root div worked like a champ.

window.fbAsyncInit = function () {
    FB.init({
        appId: 'YOURAPPID', // App ID
        channelUrl: '/channel.html', // Channel File
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true  // parse XFBML
    });
    FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content
};
// Load the SDK Asynchronously
(function (d) {
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
} (document));

edited Mar 13 '12 at 21:02

Duru Can Celasun

1,621
1
16
28

answered Mar 09 '12 at 15:52

Tuck

482
1
8
15

1

`setAutoResize` is deprecates as mentioned [here](https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/). You should use `setAutoGrow`. – Duru Can Celasun Mar 13 '12 at 19:42
How can this work with an iFramed app? I get cross site scripting problems that stop this from working. Any ideas? Thanks! – Sébastien Richer Mar 29 '12 at 21:35
This should work with a canvas app or a page tab on facebook, that's how I'm using it now. What are the cross site scripting problems that you're having? – Tuck Mar 29 '12 at 21:55
Ohh neverming a bad manipulation on my part rendered it a cross site scripting issue. All good now, works very well, thanks! Ohh, what is that "channelUrl" ? – Sébastien Richer Mar 29 '12 at 21:57
It is a page linking to the facebook js sdk in order to sort out cross-domain communication issue. Check out this page, it goes into more detail about it. http://developers.facebook.com/docs/reference/javascript/ – Tuck Mar 29 '12 at 22:02

score 0 · Answer 2 · answered Mar 14 '12 at 11:38

Embed javascript code to increase height of iframe

<script type="text/javascript">
    window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize( 100 );
    }

    function sizeChangeCallback() {
    FB.Canvas.setSize({ width: 810, height:1300 });
    }
    </script>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status : true,
cookie : true,
xfbml : true
});
</script>

score 0 · Answer 3 · answered Mar 29 '12 at 18:50

0

The response by Ashish worked well for me.

I also included a body style to prevent the scrollbars from appearing for a second while the page loads:

body {overflow:hidden;}

answered Mar 29 '12 at 18:50

BOOST Design and Marketing

1

Timeline page app height stuck at 800px

3 Answers3

Linked