I know. You have learned about Facebook’s new iFrame support on Page tabs and you’re excited. You’ve designed a beautiful Web page that you’re anxious to embed into your Facebook Page’s tab.
You’ve triple-checked your HTML markup and your CSS, making sure to adjust for any added padding and borders. You’ve Created an iFrame Application for your Fan Page and added the application to your Page.
Upon refresh, you see … the dreaded scrollbars!
Facebook’s default height for iFramed pages
The default maximum height for an iFrame tab is 800 pixels. Facebook has no problem with you using methods it provides to override this limit, but that’s the limit if you don’t do anything about it. But you can do something about it!
I don’t mind the vertical scrollbar, but why am I getting a horizontal scrollbar?
If you explicitly set the width parameters in your CSS stylesheet to accommodate an exact width of 520 pixels for your iFramed page’s content, and your content makes your page taller than 800 pixels, you’ll get both a vertical scrollbar and a horizontal scrollbar. Ouch!
This is due to the fact that the vertical scrollbar claims around 18-20 pixels (depending on your browser) of your page’s available width. So if you’ve set your iFramed page’s width to anything over, say, 500 pixels, and a vertical scrollbar appears due to your exceeding that 800px height limit, you’ll get the horizontal scrollbar too.
So if you’re okay with having a vertical scrollbar, but really want to avoid the truly dreaded horizontal scrollbar, you should adjust your CSS accordingly, if you suspect your content may push your page beyond 800 pixels in height.
I don’t want ANY scrollbars! — Application Settings & JavaScript
Make sure Your Canvas Height is Settable
On your application developer page, in the “Settings” section of your app, in the “Advanced” section, make sure that “Canvas Width” is set to “Fluid” and that “Canvas Height” is set to “Settable”.
We change Canvas Height to Settable if we think we’re going to exceed the default 800px iFrame height. Choosing Settable allows us to use functions like setSize (see below) and setAutoGrow, which is the replacement for setAutoResize (which will stop working on January 1, 2011.)
Add the JavaScript to your iFramed page
First, load Facebook’s Javascript SDK by adding the following code just before the </body> tag of your index page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
MAKE SURE you change “YOUR-APP-ID-HERE” to your application ID!
Call a function that will set the iFrame height
You can either call setAutoGrow or setSize:
FB.Canvas.setAutoGrow
We used to call the FB.Canvas.setAutoResize function, but this will be removed on January 1st, 2012 and replaced with setAutoGrow.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
</script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
</script>
This function “starts or stops a timer which will grow your iframe to fit the content every few milliseconds. The default timeout is 100ms.” To reduce your users CPU cycles, you can also use the setSize function.
FB.Canvas.setSize
Once you’ve loaded the Javascript SDK, you can use FB.Canvas.setSize() to get rid of those scrollbars. Put the following code before the </head> tag on your index page:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1400 });
}
</script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1400 });
}
</script>
This tells Facebook to resize your iFrame once the page has loaded and again whenever the size of your content changes.
Again, these functions will only work if you set your Canvas Height to “Settable.”
So those scrollbars aren’t a necessary evil. Getting rid of them is a piece of cake!
Still Seeing Scrollbars with Firefox?
The missing piece of the puzzle for some users has been adding a bit of CSS to the body of their iFrame. This is especially true with Firefox.
body { overflow:hidden; }
You can add this CSS in the <head> of your iFrame:
<style type="text/css">
body {
width:520px;
overflow:hidden;
margin:0; padding:0; border:0;
}
</style>
body {
width:520px;
overflow:hidden;
margin:0; padding:0; border:0;
}
</style>
or add it as an inline style:
<body style="overflow:hidden;">
