Foreword
So I was developing a Facebook application and realized that once the content was rendered inside of Facebook, I kept getting scrollbars. This was terribly annoying being that I wanted to take up more vertical space, but didn’t want the iframe to have scrollbars. Instead, I wanted the main browser window to have the scrollbars. Here’s how to get rid of scrollbars in Facebook iframe applications.
Getting Started
First thing you’re going to need to do is modify your application settings under Canvas Settings : On Facebook -> Canvas Settings.
Once under the Canvas Settings, change the Canvas Width and Canvas Height settings to “Fluid”.
Once you’ve done that click “Save Changes” and go to your actual Facebook application code that resides on your server.
The Code
On your side of things, in the actual application that you’re displaying on Facebook, you’ll need to add the following code:
[codesyntax lang=”javascript”]
<script src="http://connect.facebook.net/en_US/all.js"></script> <script language="javascript"> FB.Canvas.setAutoResize(); </script>
[/codesyntax]
Now go to where you can actually view your application in Facebook and lo and behold…No scrollbars! Yea!…Now go tell your friends at the nerdery how pimp you is.
Thank you thank you thank you! I dont know why FB makes this is difficult!