Get Rid of Scrollbars In Facebook IFrame Applications


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.

Canvas Settings - On Facebook -> Canvas Settings

Canvas Settings - On Facebook -> Canvas Settings

Once under the Canvas Settings, change the Canvas Width and Canvas Height settings to “Fluid”.

Canvas Settings - Fluid

Canvas Settings - 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:

<script src=""></script>
<script language="javascript">

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.

8 thoughts on “Get Rid of Scrollbars In Facebook IFrame Applications

  1. atomiku

    Hey, thanks for the help here. just thought I’d point something out… FB.Canvas.setAutoResize(); does’t work on all browsers (Specifically Firefox) if you just run it like that, It will fix the problem to run it when the window has loaded instead, like this:

    window.fbAsyncInit = function() {
    appId : ‘YOUR_APP_ID’, // App ID
    … // Other configuration variables here

    window.onload = function() {
    FB.Canvas.setAutoGrow(100); //Run the timer every 100 milliseconds, you can increase this if you want to save CPU cycles

    For removing the scrollbars you can use body{overflow:hidden;} also. I have written a blog post about it here: – Hope this has helped a few people. You may want to update your post with the new function 🙂 This is a known bug

  2. GodLikeMouse Post author

    There shouldn’t be, not unless you are specifically linking to something using the full “http://path/to/file” instead of just “//path/to/file”.

  3. Rachel H

    Now that SSL is required there are no other changes to the script support for the URL’s one provides right? If there are indeed changes then I’m going to have a lot of work to do since I manage Facebook accounts for several technical recruiting Agencies which I will need to update..

  4. Ramona

    Thanks so much. Worked like a charm. Every time I make a new page, facebook seems to change how to do it. This saved a lot of hair pulling. Will you, by chance, be giving some guidance on their next requirement that all iframes use ssl by Oct. 1, 2011? I’m lost on where to start with that, other than google.

Comments are closed.