Really stuggling with Removing Vertical Scroll bar from custom fan page tab - facebook

Question

So I've been scouring the internet for solutions to remove the scroll bar from my custom tab page on my company's facebook page. Granted, I'm not programmer and figured out how to build this thing yesterday, but would really like fix to this. It seems like there are a ton of solutions to the old format the FB app developer but nothing with the new version.\
I've been attempted to implement a bunch of the canvas size scripts that I have found but either they don't or my page refuses to load.

Answer 1

jsteid
Here is a sample of how i resize my tabs using OAuth 2.0 and new javascript sdk.
http://www.facebook.com/anotherfeed?sk=app_135669679827333
If you are using % to set with they need to be under 100% at about 98% - 96% because of a margin in the frame.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '135669679827333',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
//FB.Canvas.setAutoResize(); depreceated
FB.Canvas.setAutoGrow(1000);
};
(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>

Answer 2

to fix the height issue, load the js sdk and set the canvas size
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '123456789',
status : false, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setSize({ width: 500, height: 1000 });
</script>
test and see what values fit your need

Answer 3

I think there is a bug with FB.Canvas's size methods on iframe tabs. Height is set properly but scrolls are still there. Only workaround in my case is combination of FB.Canvas.SetAutoResize() + styling 'body' with overflow: hidden.

Answer 4

You need to do this:
Go to your app (https://developers.facebook.com/apps/)
Click 'Edit Settings' on the app in question.
Go to: Settings -> Advanced -> Canvas Settings -> Canvas Height -> select 'Auto-Resize'.
If you still get problems the other suggestions here should help by doing something like...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '12345', status: true, cookie: true, xfbml: true});
window.setTimeout(function() {
FB.Canvas.setAutoResize();
}, 1000);
};
(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>
Here I set your page height to 1000 -> change this to your page height and I set your app ID to 12345 -> change this to your app id.
I hope this works for you.