Scroll bars in Facebook iframe app... again - facebook

Question

I'll do the same thing twice with two different results!!!
I set up a store here and it works fine
link to app: https://www.facebook.com/stlocarina/app_365351356883221
And the code to loose scroll bars:
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '365351356xxxxxx', //Your facebook APP here
cookie : true // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
After trying the same code here, I have scroll bars.
link to app in FB: https://www.facebook.com/AshevilleAleTrail/app_420678397982002
Here's the code I'm using (thats not quite working) to try and auto resize:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '420678397xxxxxx', // App ID
channelUrl : '//www.publicityresultshosting.com//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
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '420678397xxxxxx', status: true, cookie: true, xfbml: true});
FB_RequireFeatures(["CanvasUtil"], function(){ FB.XdComm.Server.init("xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent(); });
FB.Canvas.setAutoResize(true,500);
};
(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>
Any ideas on how to address this?

Answer 1

You have to set the size, and after page load you can run the setAutoGrow() inside the callback.
FB.Canvas.setSize({ width: 810, height: 950 });
FB.Canvas.setDoneLoading( function(response) {
FB.Canvas.setAutoGrow();
});