So I've been scouring the internet for solutions to remove the scroll bar from my custom tab page on my company's facebook 开发者_C百科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.
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>
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
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.
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.
精彩评论