How to remove scrollbars from Facebook iframe tab

Facebook iframe tabs have a fixed height of 800px, which is really annoying as longer content means scrollbars will appear. After a couple of hours of googling (I tested a whole bunch of different solutions and nothing worked for some reason), this is how I finally solved the issue. Note that it’s a band-aid fix, but I’d rather not delve into the insides of Facebook application development to figure out what’s really going on.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function framesetsize(w,h){
  var obj = new Object;
  obj.width = w;
  obj.height = h;
  FB.Canvas.setSize(obj);
}
</script>
></head>
<body onload="framesetsize(<WIDTH>, <HEIGHT>)" style="overflow: hidden;">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
   FB.init({
     appId : '<YOUR APP ID>',
     cookie : true
   });
</script>

<YOUR CONTENT HERE>

</body>
</html>

Without framesetsize() scrollbars still persist in Firefox latest.

Overflow: hidden is there to prevent the quick flash of scrollbars before content is resized.

Note that there is no div#fb-root, apparently it’s added automatically.

Actually, adding <div id=”fb-root”></div> broke the script for me, even though it was present in most of the tutorials I found. I also found it somewhat curious that when a line break was inserted into the div, the script worked. Meh.

Edit: added FF fix and overflow:hidden
Edit2: found a better way to do this

4 thoughts on “How to remove scrollbars from Facebook iframe tab

Leave a Reply to TS Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>