Menu
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.
690
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));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With