A few days ago Facebook introduced i-frames for page tabs and as previously announced will be slowly fading away FBML for good. This is great news for coders starting new applications but not for many who invested a lot of time and money learning how to use FBJS and create FBML apps. Personally I have not been developing Facebook apps for long and already knew this was coming when i started out a couple of months ago.
So I've decided to port my FBML apps (that i was just about to go live with) to i-frame apps. The first problem that I encountered was making my i-frames to not have scroll-bars. So I'm going to explain how to get it done so that your i-frames work smoothly.
First make sure that you have set in your application settings under the Facebook Integration tab the option "IFrame Size" to "Auto-resize".
Then you should make sure you set your body and html tags to overflow hidden. This is important because otherwise you will get a temporary scrollbar while the page is loading which is less than pretty.
Then after your FB.init add:
Ending up with:
So there you have it. You can basically use the above code as a starting template for all of of your i-frame apps and never worry about scrollbars again (hopefully).
So I've decided to port my FBML apps (that i was just about to go live with) to i-frame apps. The first problem that I encountered was making my i-frames to not have scroll-bars. So I'm going to explain how to get it done so that your i-frames work smoothly.
First make sure that you have set in your application settings under the Facebook Integration tab the option "IFrame Size" to "Auto-resize".
Then you should make sure you set your body and html tags to overflow hidden. This is important because otherwise you will get a temporary scrollbar while the page is loading which is less than pretty.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
<head>
<!-- Header stuff -->
</head>
<body style="overflow: hidden">
Then after your FB.init add:
FB.Canvas.setAutoResize(100);
Ending up with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
<head>
<!-- Header stuff -->
</head>
<body style="overflow: hidden">
<!-- Your Content Here -->
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'your_app_id',
status: true,
cookie: true,
xfbml: true
});
//this resizes the the i-frame
//on an interval of 100ms
FB.Canvas.setAutoResize(100);
};
(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>
</body>
</html>
So there you have it. You can basically use the above code as a starting template for all of of your i-frame apps and never worry about scrollbars again (hopefully).
