Contact Us
  • Facebook iFrame Apps – Getting Rid of Those Scrollbars

    If you’re not on the HyperArts Blog, Click Here!

    Page Tabs just got a whole lot better. iFrames now have 810px of horizontal real estate to work with, allowing you a lot more room to show off your brand. This increased width doesn’t mean you’re immune to those dreaded scrollbars, though. Battling the scrollbars on the new Page Tabs is nearly the same as it was on the 520px tabs.

    This troubleshooting guide assumes you’ve followed the directions on our How to Create an iFrame Application for your Fan Page post and added the application to your Page. Then you’ll want to be sure that you triple-check your HTML markup and your CSS, making sure to adjust for any added padding and borders. If you exceed 810px in width, you will pop scrollbars simply because your content is too wide.

    If you’ve done all this and upon refresh you still see … the dreaded scrollbars, then it’s time to delve a little deeper.

    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 to accommodate an exact width of 810px 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, 790 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.

    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=""></script>
    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

    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:


    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() {

    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.


    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() {
    // Do things that will sometimes call sizeChangeCallback()
    function sizeChangeCallback() {
    FB.Canvas.setSize({ width: 520, height: 1400 });

    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 {
    margin:0; padding:0; border:0;

    or add it as an inline style:

    <body style="overflow:hidden;">

    Bug Report on Resizing Issues

    Apparently, some users are having resizing problems with the new iFrames, causing unwanted scrollbars. Here’s the bug report on the resizing issue, filed on February 14, 2011.

    Other Resources


    1. Hi guys,
      Is there any good reason to use setSize instead of setAutoResize?

      I’ve just tried setSize and it seems to work exactly as setAutoResize.

      And both setSize and setAutoResize seems to suffer the same bug: they don’t shrink an already enlarged canvas. That is, if the canvas was enlarged to fit a large iframe, then, if visiting an smaller page (ie. a page that will fit into an smaller iframe), the iframe stays enlarged. It’s a bug, not a big one, but still a bug.
      Of course, if you have any workaround for this issue, I’ll really appreciate it 🙂

    2. Hi guys, this worked great. I have one question though, maybe it’s a bug. When you are not logged into facebook, you can’t view the iframe page. Is that something else we need to add to the code? Thanks so much for all your help! You guys have been awesome!

    3. Unfortunately, I can’t seem to get rid of those pesky scrollbars. I have this code integrated with the PHP needed to pull in the signed_request.

      I have no idea how to get rid of them. I noticed a lot of people are having this issue. Should I just wait for the dust to settle?

    4. Brilliant tips as always Tim. I just added your workaround for the scroll bars to a page and made sure the page was about 1,500 pixels long…

      After a reload of the page: No scroll bars!

      Brilliant. Thank you.

      • Hi Martin, can I ask you how you managed to make the page 1,500px long? I tried over and over, but on fb my page is cut at half. Scroll bars gone, but cut layout 🙁

        • Albie, I have since changed the code I prefer to use on my FB iframes. Feel free to message me on Facebook (check the website link) and I’ll email you a snippet of how I do it now.

          If I post it here it will simply confuse people who are following thie methods explained in Tim’s post.

    5. In addition to the above steps, I found that I needed to add the following to make the scrollbars go away.

      body {overflow:hidden;}

      The issue I still have is that the iframe does not always resize correctly. I’m guessing it’s due to the bug.

      • Whew… thanks for this Troy. I was going to go insane.

      • Hi Troy.

        Where did you add the:

        body {overflow:hidden;}

        And where would be a good place/way to notify FB of the maximum height of the frame to help prevent the scroll bars from appearing?

        • Thanks Troy, worked for me! I added it to the body style tag that Tim suggested in previous post (or you could add to your css).

          Add it just before the </head> tag

          <style type="text/css">
          body {
          margin:0; padding:0; border:0;

        • You may add the overflow code as inline CSS:

          <body style="overflow:hidden;">

          or in the head section as follows:

          <style type="text/css">
          body {overflow:hidden;}

          For setting a fixed height and avoiding the cut off problem, set your dimensions using canvas.setSize:

          FB.Canvas.setSize({ width: 520, height: 1450 });

          Put in your numbers in both instances of setSize and you should be all set!

      • You saved my day. I couldn’t get rid of those scrollbars until I added your piece of code. Thanks.

    6. Hi!
      Is there a way to exceed facebook iframe width limitations?
      There’re much about 520px max width there, but as I checked the max width of iframe canvas is 760px now…but I need more. In fact I need even 1100px width. Is it possible to override facebook values, and strech out my web page to view it in facebook without horizontal scrollbar?

    7. Sigh. No matter what I try, I can’t get all of my content to show up:( I really don’t want to use scrollbars.

      Right now, it doesn’t look horrible – but some content is hidden.

      Any ideas?

    8. This is the script i worked….

      window.fbAsyncInit = function() {
      FB.Canvas.setSize({ width: 520, height: 3450 });
      function sizeChangeCallback() {
      FB.Canvas.setSize({ width: 520, height: 3450 });

      appId : ‘your app id’,
      status : true,
      cookie : true,server to access the session
      xfbml : true

      its working wounder-full….try

      • <script type="text/javascript">
        window.fbAsyncInit = function() {
        FB.Canvas.setSize({ width: 520, height: 3450 });
        function sizeChangeCallback() {
        FB.Canvas.setSize({ width: 520, height: 3450 });

        Finally, no more scroll bars and a page that is long enough!!!

      • great tips, no more scrollbar and all my page is displayed (with height=1050) 🙂

    9. Hi.

      What about when you want to put just a part of some website in a iframe on Fan page and you don’t have access to that page code.

      Let’s say, the page is 1500px x 1000 px and I only want to ad 500x500px part of that site in a specific area: 200px from top and 300px from left. Any idea? Thanks!

    10. Savannah says:

      I’m running into a problem using this technique with fb:comments. Instead of the old fbml method of displaying page counts at the bottom and letting users go to previous, next, etc., the non-static fbml method has a “view more posts” button at the bottom. When the user clicks on it, the page length is extended. However, facebook has a max page length (I think it’s around 2200px) so anything after that gets cut off.

      How do I avoid scrollbars and let the user page through comments instead of increasing the page length?

    11. Hi.

      Have any of you experienced problems with the iframe tabs in internet explorer?

      I am using <body style="overflow:hidden;"> and the autoresize code but in IE, it only shows 800 pixels of the content. Not scrollbars though.

      How come?

      • I added this bit of code into the JavaScript tag that immediately preceeds the </head> tag:

        FB.Canvas.setAutoResize( 100 );

        and I added the height and width parameters:

        FB.Canvas.setSize({ width: 520, height: 1700 });

        (Make height whatever it takes to cover the height of the content.)

        So this is what it should look like (but with YOUR height value, of course):

        <script type=”text/javascript”>
        window.fbAsyncInit = function() {
        FB.Canvas.setAutoResize( 100 );
        // Do things that will sometimes call sizeChangeCallback()
        function sizeChangeCallback() {
        FB.Canvas.setSize({ width: 520, height: 1700 });

        • Thank You Very Much! You are a genius!

          By the way – When do you think that the Iframe version of the “Static FBML bible” will be ready?

          Again – Thank you!

    12. Shrawan says:

      why my iframe fanpage cut off when I try to remove scroll bar. I used overflow:hidden on body and all those above fb codes for custom height. Problem is my page gets cut off in firefox where in IE it shows full height. How to fix this issue

      My current working page is:

    13. I have a iFrame tab with all the above setup in this article and everything is working nicely except for the FB links within the page. I’m trying to link to the FB Page’s photo section, but it takes me to a middle page that has the facebook logo and link before reaching the photo section. Anyone else having this problem?

    14. timware :
      I added this bit of code into the JavaScript tag that immediately preceeds the </head> tag:
      FB.Canvas.setAutoResize( 100 );
      and I added the height and width parameters:
      FB.Canvas.setSize({ width: 520, height: 1700 });
      (Make height whatever it takes to cover the height of the content.)
      So this is what it should look like (but with YOUR height value, of course):
      <script type=”text/javascript”>
      window.fbAsyncInit = function() {
      FB.Canvas.setAutoResize( 100 );
      // Do things that will sometimes call sizeChangeCallback()
      function sizeChangeCallback() {
      FB.Canvas.setSize({ width: 520, height: 1700 });

      yep – i’ve had that for awhile, and one thing that’s kinda kicking me… is that I have some ajax and/or unhiding sections/divs in my fb app (iframed, new sdk, all else cool and working perfectly) that expand it and the iframe resizes… *BUT!*

      when I go to a new page in that iframe app – it seems to stay at that maximum level… *sigh* –


    15. What about when I wan’t to iframe just a middle part of a page that is not mine. How do I do that?

    16. Robert Williams says:

      With all these great suggestions above, I still can’t get this to work for me.

      If my scroll bar disappears, my page gets cut off (Even with Troy’s suggestion).

      Does anyone know any other solutions?

    17. Robert Williams :
      With all these great suggestions above, I still can’t get this to work for me.
      If my scroll bar disappears, my page gets cut off (Even with Troy’s suggestion).
      Does anyone know any other solutions?

      Robert: Do you have a URL of the page you are having problems with? I’m sure one of us will be able to help if we see the page / code.

    18. Hey! When placing an iframe canvas on fan page… can you link do another FB tab? I fear that if I do that, it will open new Facebook page inside an iframe -> FB page within Fb page, not cool:S

      • Hi Mat,

        You can link to another tab by adding target="_parent" to your link. This way, your link will refresh the parent page instead of loading the linked page within your iFrame.


        <a href="" target="_parent" rel="nofollow">check out this other tab</a>

    19. For some reason I can’t seem to get it working.
      I have this code just before the tag:
      <script type="text/javascript">
      window.fbAsyncInit = function() {
      FB.Canvas.setAutoResize( 100 );
      // Do things that will sometimes call sizeChangeCallback()
      function sizeChangeCallback() {
      FB.Canvas.setSize({ width: 520, height: 1700 });

      And this in my styles-sheet:


      The page on which this doesn’t work is:

      Any help is greatly appreciated

    20. Hi

      I have a problem with the commentbox in IE. It works fine in Chrome but it doesn’t show up in IE.

      Have any of you experienced that before?

    21. Shrawan :
      THanks Alisa, Now I am able to put icon in my tab. Now I need one more help from you guys. how to make contact form working in iframe? in fbml I copied paste ajax, php and html from google and it worked but same codes won’t work in iframe. so any one can provide me ajax, php and html code for my page:

      search directly php mail() form

    22. JP Gaudette says:

      I tried everything, including your code, and nothign can get rid of my scrollbars. No matter what i do, they stay there. i tried to put t on AutoResize, Setsize with empty field, with fixed dimensions, nothing works. The only thing that actually changed something was the overlay=hidden, but it just cropped my picture.

      I’m tired of trying everything, just spent a few hours on that. Can you help ?

      • It could be a typo in the code, or it could be that your content width exceeds 520px (remember, you have to include padding, margins and borders in your width calculation).

        Try reducing your content width to 500px. If your content height exceeds the height you specified, then you’ll get a vertical scrollbar.

        I’m not sure what else to tell you. As you can see from the comments, almost everyone has sorted this out eventually.

        • JP Gaudette says:

          My width is exactly 520, so the only reason i get horizontal scrollbars is because of the vertical scrollbar that takes about 20px. It’s the vertical one which is the problem. I tried fixing height or leaving the field empty to have it resize, but nothing works.

          Here’s my code. I checked it and couldn’t find typos…

          <link rel="stylesheet" type="text/css" href="style.css" />
          <style type="text/css">
          body {
          margin:0; padding:0; border:0;
          <script type="text/javascript">
          window.fbAsyncInit = function() {
          FB.Canvas.setSize({ width: 520, height: 1200 });

          function sizeChangeCallback() {
          FB.Canvas.setSize({ width: 520, height: 1200 });

          <body >
          <div id="container" style="background-color:#000">


          <div id="fb-root"></div>
          <script src=""></script>
          appId : '204744226202377',
          status : true, // check login status
          cookie : true, // enable cookies to allow the server to access the session
          xfbml : true // parse XFBML


    23. All my iframed pages show correctly across browsers, except for one… and yes you guessed… it is internet explorer.
      I am getting an error that says ” ‘root’ is null or not an object – Line 6 all.js” any ideas ?
      I aprecciate your work.

      • What version of IE? Do you have a URL where this is happening? Thanks!

        • I am using ie8 also checked on ietester ie6 ie 7 ie8 no luck. url:

          • Jonathan, The tutorial says to put this:

            <div id=”fb-root”>
            <script src=””></script>
            appId : ‘117472154995289’,
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml : true // parse XFBML

            BEFORE THE CLOSING </body> tag. You’ve put it in the <head> of the file. You might doublecheck everything to make sure you’ve followed this tutorial to the letter, including reviewing the comments.

    24. Thanks. It works !

      • I don’t see any code. Make sure you surround code with <code> … </code>, as it says in the bold red text below the text-entry box. Thanks!

    25. it works like magic in firefox, chrome, and IE

      ^^, thanks Tim

      can’t wait for iframe bible…

    26. Has anyone else had a problem where an iframe app (a simple picture, in this case) will only fully load 1/4 of the time? I’ve got the auto-resize function set on my app, but it still gets cut off at the bottom 3/4 of the time. My image dimensions are somewhere around 520×1100+. Maybe this just a bug?

      • Have you set the height in

        FB.Canvas.setSize({ width: 520, height: 1100 });

        Despite my best efforts, it has never auto resized for me and I always have to set the height.

    27. Thanks for the great tutorials on Facebook iframes. I’ve got a quick question just to clarify one thing. The content I am trying to use is 500x850px. Is there any way to get the vertical scrollbar on the page and not within the frame? Thanks again for the awesome info.

    28. Hi Tim,

      Need help regarding scroll bars. i am just new to all this.

      How to use this scroll bar removing script in ” index.php ” files?

      as i have a fanpage with reveal tab which is made in php but i dont know how to use this code in php files.

      Please help.


    29. One thing I noticed – not sure if anyone else had this issue – but when I viewed my fan page in IE, and the dialogue box came up asking if I wanted to view only content that was delivered securely – IF I clicked “yes”, then my resize wasn’t working….when I clicked “no” it was…

      so I change this:

      <script src=""></script> (added https instead of http)

      And all works great 🙂 Just fyi in case anyone else had that issue.

    30. Chrome Resize Problem (and Solution) to follow:

      Using the script aforementioned, everything works fine in IE, FF, and Safari. But if (and only if) I used an h3 header, the resize wouldn’t work… and only in Chrome.

      Yes, it *would* work if I set the height as Tim and Company suggest. But it really bugged me that FB would not resize in Chrome unless I set height. “Auto Resize” should mean just that… AUTO. And stranger yet… the problem only occurred if using an h3 header… no matter how I styled it for padding/margin.

      Of course this took over an hour of trying to figure out the “trigger” (h3) and Lord knows there could be other “triggers.”

      So I googled and found out that there was a bug (now closed) back in September 2010, Bug 12733 that addressed this. FB says it is resolved. Hmmm. Not so resolved today for me.

      I found a fb forum discussion where a kind soul provided a workaround. It worked for me. Link:

      Use a timeout function.


      <script type="text/javascript">
      window.fbAsyncInit = function() {
      setTimeout(function() {
      }, 300);

      I am *not* a javascript code guy by any means, but I know that this worked for me. At least today. I can now use h3 and Chrome won’t choke and add scrollbars.

      I hope a real code person opens a fresh ticket at bugzilla to ask for a better fix. Auto resize should mean auto… not also having to set height params or tiimeouts.

      As Tim says… “Facebook works in mysterious ways.”

      • Nice, Ken! I’ll go with Thomas Pynchon’s Gravity’s Rainbow: Proverbs for Paranoids:

        1. You may never get to touch the Master, but you can tickle his creatures.
        2. The innocence of the creatures is in inverse proportion to the immorality of the Master.
        3. If they can get you asking the wrong questions, they don’t have to worry about answers.
        4. You hide, they seek.

    31. danielle forsythe says:

      My app is working great with your code hints (thank you!) in all browsers except chrome where it won’t resize no matter what I try – any hints/fixes?

    32. people who still have problems should try changing the tag

      in addition to the script

      one question I do have left is about the new fb:comments plugin which doesn’t support paging but grows higher and higher (or longer). did anyone solve this problem?
      is there a way to do it? or maybe a way to put it inside a block that has it’s own scrollers?

      • Hi Tamir… I know that your body tag would force the fix, but shouldn’t the script to resize and allowing auto resize in the app itself solve the problem without having to set the height specifically?

        Could you check out my Welcome page and tell me if it has scroll bars? Gotta like it first to reveal the whole page. Tim told me that it has scroll bars, but I don’t see them in IE, FF, Chrome or Safari.

        I would be grateful for the “look-see”

        • your code looks to be working perfectly.. can you attach what you used exactly and where did you put each part? including the body tag and the script before the closing body tag?

          keep in mind that what I was talking about is cases where the regular code doesn’t seem to do and that one thing didn’t work for me no matter what i did: the fb:comments, the new one that has no paging

          what i don’t understand is why the facebook app value of autoresize doesn’t do the job for us without all this code

    33. again with the code.. oops

      people who still have problems should try changing the
      <body> tag
      <body onLoad="FB.Canvas.setSize({width: 500, height: 1550})">

      in addition to the script

      one question I do have left is about the new fb:comments plugin which doesn’t support paging but grows higher and higher (or longer). did anyone solve this problem?
      is there a way to do it? or maybe a way to put it inside a block that has it’s own scrollers?

      Read more:

    34. Tamir-
      I have disabled the hide function on my welcome tab… so you can view frame source in FF. Martin Koss just tested it… and he sees the scrolls. So did Tim. Martin is using FF for Mac… I bet Tim is too. Now we are getting somewhere.

      • i am not using FF… so can’t see code
        I checked your tab in chrome and IE8, both ok !

        • Thanks Tamir… I owe ya a favor sometime… I really appreciate you checking. I changed the code a bit in my tab Custom Tab 02 on my page and added the overflow style that Tim suggests. I have not used it before, because it did not seem to be needed. But I think it *may* be needed. When I added it to Custom Tab 02, I noticed (in Chrome) that the instant display of the scrolls (they disappeared quickly) never happened. In other words… it worked *better* with overflow: hidden style. Hmmm.

          • that’s ok. it was nothing
            be sure to share whole the parts concerning this issue when you think it is working completely and we’re even 😉

    35. Tamir- I wil do a detailed post on this with major kudos and gratitude to Tim Ware and Martin Koss. Coming soon. I will post it here.

    36. Tamir, Danielle and others… I have spent all day testing. I believe that my welcome page is 100 percent cross browser compatible with *no* scrollbars. Feel free to check it out:

      Summary: Tim’s code adding the 100 feature to the FB.Canvas.setAutoResize, along with the overflow:hidden command is the trick. Gotta do both. But don’t have to set the height… unless you just want to.

      Here is a detailed summary (rather exhaustive) of the entire trip… if you have time and are interested. Mostly wrote it for my own benefit.

      Thanks to everyone in the community. 🙂

      • Looks Good…
        the problem i still am trying to solve, is this one
        look at this example (not mine) and ignore the language

        look at how the comments box keep growing longer and konger with never showing scrollbars (they appear just for miliseconds and then dissappear)
        I want to understand how to do that without defining the page initially for 5000 pixels long…
        this looks good but I played a bit with that same situation with no luck

    37. I’m trying to add our website to our FB Page ( but my page size results in scrollbars in the iframe.

      According to your instructions I need to change the settings on my developer page. I created a developer app called WebConnect for this express purpose, but am unfamiliar with how to use this in conjunction with yours. I’ve added the script within the iframe, but still have the scrollbars.
      Do I need Canvas URL to be my actual webpage to affect this iframe constraint?

      • Hi Glenn,

        I noticed that the content of your iFrame is much wider than 520px. (

        The best way to start troubleshooting scrollbars is by first making sure that you’re not exceeding the allotted width.

        • Jason – Thank you for the response. I am not a developer / coder. I am simply trying to place our fundraiser’s webpage on our Facebook page. We really need to boost registration for this event and I have a meeting tonight to review this.

          I do not know what line in the code you are referring to for the size. If it’s not too much trouble can you possibly just fix the code I submitted in my comment so that I can just paste it into the iframe? That would be a huge help!

          • Glen, what I think Jason means is that the webpage,, is too wide to fit within your facebook fanpage without scrollbars.

            If the page,, was much less wide – say, only 520 pixels across, it would fit without the scrollbars (if you’ve included the code contained in this post). However, there’s nothing you can do about because that page is just too wide. Now, what you *could* do, is create *another* page, that fits the requirements – perhaps just include a sign up form, and use that instead. You would probably need to ask your devleoper, or whomever your organization depends on for web development, to create such a page for you.

    38. Thanks that worked great! I do have an issue though. My page tabs don’t reorder as per many, many tutorials and instructions I have looked through. Anybody know why?

    39. Tess Ball says:

      I am having trouble with getting this to work. Even if i specify a height larger than my content, the vertical scrollbar area appears (without a bar or arrows). This automatically makes the horizontal one show up.

      Any advice you could give would be great. Thank you so much!

      • Tess- check out my post at – search to find “eliminating scrollbars” and make sure that you have the javascript correct. If that doesn’t help, feel free to contact me through my site and comment with the code there… maybe we can troubleshoot it. I did notice in going to your page that the tab is not hosted SSL… and I got a warning/requirement that I switch to non secure browsing to view the tab. That’s not so good.

    40. Thanks for the post! I used your tutorial and got it to work in FF, Safari and IE but when IE loads the scrollbar appears for a split second before disappearing.

      I used the body onLoad=”overflow:hidden;, body onLoad=”FB.Canvas.setSize({width: 500, height: 2550})”, played with the page height, and cleared my cache but no luck.

      No problem with the other 2 browsers. Did I miss something or is this caused because the page has to load first? Any way around this?

    41. Salvatore says:

      Hello! i just wanna thank you so so much for this tutorial! creating facebook fan pages is the way i pay my university and i was so sad that facebook have changed from fbml to iframe….but with this beautiful tutorial Im still alive!! thank u so so much!!!
      God bless you, your family and business!

    42. jaguattina says:

      thanks a lot! this tutorial is brilliant, everything works perfectly! 🙂

    43. Thanks Tim, everyone’s comments helped. just need to read.

    44. thanks so much for all the info – it has taken me a while but I got it all to work 🙂

    45. Hi, I would like to ask, why did my page shows Wall instead the Apps Iframe I made? I’ve seen some of the fans page shown here where it shows Apps first when we open the Fan Page.

      Here’s my page link

      • seems like my page is unable to change “Default Landing Tab” in some reason. well it isn’t appear in this page but it’s appear in my other pages.

        • Analisa says:

          Hello Adan, I have heard some other people saying the same thing. Do you have a Place Page?

          • No I don’t have any. The page that can’t change “Default Landing Tab” is Community Page. Well it’s not that I can’t change it. It’s not available, the Option isn’t there.

            But the iframe Apps is working fine.

            • Hi Adan, I am having the same problem with one of my fan pages, and after talking with Analisa and went back to the page, there was a big banner that read that the page had been re-categorized as a Community Page even though it is a local business with an address and a store front. So I emailed Facebook Support since the page is mis-categorized. We’ll see what happens. Please do post if you find the resolution. – Many Thanks!

    46. Jerald says:

      Hi Friends, I am new to facebook iFrame and have a basic question:

      1) How do I load Facebook’s Javascript SDK or where do I load it? Is it is my web site files, like index.php, etc., or do I upload it as a new file/ directory? Where should I place/ save it.

      2) FB.Canvas.setSize() : Is this part of the SDK?

      Thank you for clarifying my basic doubts. I’m not a technical person, and hence this request. Thanks again.


      • Hi Jerald,

        Facebook hosts the SDK. You just call it from their server.

        <script src=""></script>

        • Hi Jason and Ken,

          Thank you so much for your replies. May I still request a clarification?

          Could you advise as to how in my facebook app., I can add the code? I do not seem to find any provision in my application where I can place this code to call it from Facebook server. Much appreciate your help.

          Thanks again,

      • Hi Jerald- welcome to the “HyperArts Family.” I think this earlier post should help you get started, and I think it has the link to finding the Facebook’s Javascript SDK:

        FB.Canvas.setSize() “talks to” the SDK and Javascript. Tim or Bill might correct me on this, and I don’t remember if you have to have the SDK pack uploaded to your own hosting plan for the resize script to work. Others can weigh in. 🙂

        But start by reading that earlier post. 🙂

    47. Hi Jason and Ken,

      Thank you so much for your replies. May I still request a clarification?

      Could you advise as to how in my facebook app., I can add the code? I do not seem to find any provision in my application where I can place this code to call it from Facebook server. Much appreciate your help. Where do I find the body tag? Advice as to where I must go in order to place the code is greatly appreciated.

      Thanks again,

    48. Hi there,

      My app was using your trick and it worked perfectly during 2 weeks until… yesterday. Now the app height is again being cut off. I guess something is broken on Facebook JS API right now.

      Can you confirm that you guys experience the same problem right now?


    49. Albert P. says:

      Thanks. That helped me, it worked!

    50. Hi guys,
      If I visit my FB Page form a mobile phone, all I can see is its wall, even if I set the custom page as Default Landing Tab.
      Any idea how I can make mobile visitors land on my custom tab instead?

      • That is because when Facebook detects a mobile device it defaults to which is, as you saw, a stripped down Facebook showing only the wall. The only content accessible at is Wall, Activity (newsfeed) and Info.

      • Albie If you use Safari type in on the right side there is a more tab . Click on that it will give you a drop down menu all the way to the bottom choose Desktop Site . You can then view all your pages this way hope this helped .

        • Safari from your mobile sorry wasn’t clear enough.

          • Thanks Stuard, but the cool thing would be to have all the people *automatically* landing on my custom tab (rather than on the wall) when they browse my FB Page from their phones, which I’m afraid is not possible yet, as Martin said.

    51. Hi guys,

      I have done many projects so far using iframes, but with this last one, I havent been able to ged rid of the bottom scroll bar in a clean way.

      For some reason the content gets cut off if I use the “radical” css
      body { overflow:hidden }

      The page is:

      The iframe is hosted at:

      I´ll appreciate your valuable help.

      • Hi Jonathan,

        When I’ve run into this problem in the past, it’s usually been because I’ve forgotten to account for some padding. You might try double-checking your widths and pay special attention to the list-items. Those elements have built-in padding that’s easy to overlook.

        Including a CSS Reset in your stylesheet can help to nip those issues in the bud (

    52. hi. i am trying to build and iframe app. i have and index.php file that i am trying to load. it consists only of an image. i added it to my business page, and it loads, but also my facebook header and footer load on the iframe and i get scrollbars. how can i get rid of my own facebook header and footer? i only want the image to disoplay (its 520px x 710px)

    53. Hi,

      I’d like to ask if the code is cross-browser friendly. I just noticed now that if I use Chrome, there are no scrollbars but the iframe gets cut-off if the height exceeds 800px. But if I use Safari, the code works perfectly.

      • Hi Anna,

        Yes, the code works in all browsers. Have you tried setting the height?

        function sizeChangeCallback() {
        FB.Canvas.setSize({ width: 520, height: 1400 });

        • Hello,

          Yes I did. But somehow now it’s working fine both in my Safari and in my Chrome! Thank you though 😀

        • Jason just curious about that set size Callback do you have to set the size also in the body css height 1400px ? I was wondering how some sites have these long pages with all the comments what is that trick?

    54. Thank you for all of the information you provided about iframes.
      I have done all of the mentioned steps to get rid of the scroll bars, but they still appear. I have even reduced the size of the page to 500 instead of 520 and have assured that there is no right or left padding/margin anywhere.
      Perhaps the problem could be from my entries in the the Canvas Page and Canvas URl fields. I am not sure what to put there. Aside from that, I have tried and retried everything and am totally stumped.

    55. unfortunately this guides works for me only in internet explorers. opera and firefox still have scrollbars. if i do the overflow:hide thing it cuts my content off.

      is there a way to disable the scrollbars in firefox 4 and opera?

    56. neoAndrej says:

      Tim, sorry but you miss this part FB.Canvas.setAutoResize();
      in the code

      <div id="fb-root"></div>
      <script src=""></script>
      window.fbAsyncInit = function() {
      FB.init({appId: '166140410107963', status: true, cookie: true, xfbml: true});

      Only with this addition my scrollbars disappear and height become more than 800 px.

    57. Stuart Mansfield says:

      Great piece of code works like a charm any recommends for alternative audio players other than flash because Ipad wont render any flash ..

      • Hi Stuart,

        You could try using jPlayer ( There’s lots of documentation and you can make it fall back to Flash player if the HTML5 player doesn’t work for some users.

        • Jason thanks what I don’t like is you have to make separate files ,
          ogg,mp3, seems like a lot of work for HTML 5 so can ITunes convert the Acc files to all the formats that are required ? I know I can on Mp3 . Thanks for your help. “Keep the music alive”.

    58. You are great man…love u
      i need some help, im integrating wordpress theme,its size in width is alright,but its not showing to full height where i should insert these following codes… wordpress theme

    59. I’ve used your tutorials and they work great! Although, how would I ‘keep’ the scroll bars on the original html page on my server? I would like to use this as a stand alone page also? Thanks so much!

      • Hi Matt,

        If you can avoid using overflow: hidden;, the scrollbars will still appear on your original html page. However, overflow: hidden; is crucial if you want to avoid scrollbars within the iFrame in Firefox on Windows.

        • Thanks, hmmmm, I suppose it would not work then? I would need duplicate pages using different style.css – one with overflow:hidden; the other without?

    60. Thank you for posting this fix.

      I was going crazy. I did too have to add overflow: hidden to prevent the bars form flashing in Firefox.


    61. Hi Tried your trick for my facebook page and I still get scroll bars. I managed to get rid of the right hand column and my wall takes up the whole page, but not my app (page).

      I’m actually pulling my website

      Any help?

      • We can’t really troubleshoot your code, David. However, I would strongly advise against pulling a website into a Facebook tab. It doesn’t look good and is a pretty bad user experience. You should create a proper index page where the content is 520px. I imagine doing this will probably solve your scrollbars issue.

    62. giovanni says:

      thanks for you tutorial, i used it to make several canvas pages in the past and all worked good, now all the canvas became cutted in the middle lenght!
      yes i dont have scroll bars but the page is cutted, there is 1/2 page coveded and invisible because i cant scroll down and the page il taller 🙁 its just few days…what have i to change pls?????

      • Hi Giovanni,

        Perhaps you’ve defined a height somewhere – either in your CSS or in the sizeChangeCallback function.

        Can you provide a link to your tab?

    63. Alexandra says:

      thanks so much! your site is very helpful and simple to understand! I had no idea how to develop a facebook app until I read through your tutorials and troubleshooting tips.

    64. Just got to write to say a big thank you for this post and the other tutorial Add an iFrame Application to your Facebook Fan Page – 2011 Edition – which is how I came here.

      I don’t know about anyone else but I couldn’t find a decent Facebook tutorial about creating iframe apps on Facebook pages until I found that one. It was awesome. The comments are closed there so I’m writing here.

      However, I also need this tutorial because my app exceeded 800px in height and, who have thought the solution was so complicated, but explain and laid out so well here.

      Thanks guys!

    65. Worked great the first time.

      Refreshed the page and the scrollbars came back…

      This was due to the way the page loaded the javascript resize would execute before everything was rendered making the scrollbars come back.

      Solution: add a delay to the resize.

      function Func1Delay()
      setTimeout("sizeChangeCallback()", 500);



      <body onload="Func1Delay()">

      Rather hacky

    66. Hi

      Thanks for the awesome tutorial. It removes the scrolls bars perfectly.

      I have one question though:
      The length of my page is 1200px but it seems to be cutting it off around 800px. Im guessing that the default page value for an iframe is 800px?
      Therefore it is not displaying the whole page.

      How can i change this?
      I have the following:

      body {
      margin:0; padding:0; border:0;

      Is this a possibility?


      • Hi Joshua,

        It could be a couple things. It looks like in your CSS, you’re missing the “px” after the height. Sometimes that can cause things to break.

        Additionally, make sure you set the height in the FB.Canvas.setSize function:

        <script type="text/javascript">
        window.fbAsyncInit = function() {
        // FB.Canvas.setSize();
        FB.Canvas.setAutoResize( 100 );
        // Do things that will sometimes call sizeChangeCallback()
        function sizeChangeCallback() {
        FB.Canvas.setSize({ width: 520, height: 1400 });

    67. GRACIAS!!!!

      Desde Republica Dominicano!!

      You save my day!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    68. Thanks so much for this information. It really helped. The scroll bars having been driving me crazy and even thought I could stop the horizontal scroll, I could never get rid of the vertical scroll, so this was exactly what I needed.

    69. i did work for all the bars within the iframe itself, but the actual iframe still has scrollbar

    70. This worked for me, but I also had to set a height on the body. Example:

    71. Fantastic!  Solved all my problems.  Thanks!

    72. YahoOoOo!! solved my issue =)

      bundle of Thanks

    73. Camtalion says:

      Work great 😀

    74. hello friend, I have show a wordpress in a Facebook canvas. I have a vertical scrollbar, but I´m using wordpress, and there is not a index html, only php, withot <body.. etc. could you show me what I have to put the code? thanks and sorry my english 😉

    75. hello friend, I have show a wordpress in a Facebook canvas. I have a
      vertical scrollbar, but I´m using wordpress, and there is not a index
      html, only php, withot body.. and other html tags.. could you tell me where I have to put yhe JS code in wordpress?

    76. Ok I must be missing something because nowhere on my App Edit Settings page, either basic or advanced, does it say anything about iframes or scroll bars, Yet I still have them. I have even created new Apps and read every single setting to be sure I wasn’t missing something and I see no reference to iframe or scroll bars anywhere. 
      The only thing remotely similar I see is canvas height and width, and they have restricted settings.
      Canvas Width:Fixed (760px)FluidCanvas Height:Settable (Default: 800px)FluidAny help here?

    77. Thanks for this write up, it’s helped me out twice. Most recent problem was driving me insane until I made a tiny css addition to your fix. Add html in with the body styles that put on page. Here’s what I added:
      body, html {
      margin:0; padding:0; border:0;

    78. BertMatters says:

      Does someone know why my FB iframe page isn’t resizing the height in Firefox 3.6.20 ? I managed to get rit of the scrollbars, but the site gets cut-of. It works fine in chrome and ie Please advice. tnx!

    79. The article should be updated to reflect the SSL requirements Facebook has put into place. I was unable to load the all.js file until I changed it to HTTPS.

      This may help a few people here who are still having issues with scrollbars.

      • Thanks John. Actually, I call that out toward the top of this article, under “Facebook’s HTTPS / Secure Hosting Requirement”. However, your comment got me to add a screenshot of what a user sees when using Facebook under Secure Browsing.

    80. FB.Canvas.setAutoGrow() :::::—-+++++The function doesn’t work in Opera.  Is it possible to fix the problem?Look forward to your reply.

    81. Though the y scrolling bar is moved, the x scrolling bar is remained existed when using IE6 to view the web page.  As a result, I want to know how to fix the issue.

      Thanks for your reply. 

    82. Hey I was wondering if it is possible to do an overlay from a page inside facebook. I was trying to not have to use an additional Tab and dont want to use a pop up
      can you use an over lay method similar  to what is in this website  ??? – scroll over a select a teacher from the image and the overlay appears
      Thanks for your feedback

      • I’m not seeing the functionality on the GVCS website you describe, but you can certainly locate a script that will cause a mouseover event to spawn a new window. That would work fine in an iFrame page tab.

    83. Thanks for the guide

      I had loads of problems getting it to work for firefox.
      The bars went away perfectly once i added the script.
      But as soon as i reloaded the FB page in firefox it would cut of at around 800px…

      The solution was simple. I didn’t read the guide properly and added everything just before the tag… as i moved down the load SDK part of the code to just before the tag everything sorted itself out.
      Note to self… don’t skim through guides….

    84. Anonymous says:

      Hi hope someone can help!! This works for me except in Firefox. For some odd reason the vertical bar still shows even though its not active because my page fits and doesnt need to scroll. Ive updated firefox, deleted cache etc. Its perfect in IE, Chrome and Safari, but just cant seem to cure it in Firefox!

      • With Firefox, it’s important that you include “overflow:hidden;” in your CSS on the body or main containing element.

        • Anonymous says:

          Hi Jason, many thanks for the speedy reply! Its great some people out there with the knowledge do actually help those of us who dont understand!
          There is some code with the ‘hidden’……

                  html { overflow: -moz-scrollbars-vertical !important; }
           iframe#mainframe { width: 520px; border: 0px solid transparent; overflow: hidden; }

          Im not sure why this isnt working? The code is generated by my wysiwyg site builder, and Ive not had problems with it before. You I need to adjust it, include it elsewhere?

          • When I view your tab in Firefox, I’m not seeing any scrollbars. But here’s what I am seeing:

            • Anonymous says:

              Really sorry about this Jason, shows how confusing things can be. FB requires ssl certificates so I used Social Server who provide one free, so I presume your browser is in https mode? Thats the only way I can see you would get that message, but when I use Chrome in https mode its fine. I dont know how to use Firefox in https & http. Can you see the page in http ‘mode’?

            • No worries. If your app server has an SSL certificate, that shouldn’t prevent me from being able to see your app if I’m browsing securely–that defeats the purpose. It’s not working for me in Chrome either.

            • Jason, you are using the overflow:hidden on “html” not “body” like the blog says to do. I was using “html” as well because of another page I found to get rid of scrollbars. When I did it screwed up the length by cutting it short. When I scrapped that and did it just like Hyperarts says to do, like this:

              body {
              margin:0; padding:0; border:0;

              then it worked perfectly. Good luck!

    85. Genius!  Hyperarts, you never cease to amaze. We were so geekin’ out about your Multi-Tab FB Template for iFrame Tabs until we saw the dreaded scrollbars and then our geekin’ out turned to freakin’ out. But no more after reading this great blog. We are so totally back to geekin’ out now. 🙂 

      I would just add that if you add the multi-tabs to a page (fanpage or company page), but you have no apps under your personal FB account, then you may need to create a dummy app in order to modify the Canvas Height and Canvas Width (first step above). 

      Check out our scrollbar-less multi-tabs in action here: Again Hyperarts!! 

      James Potter

    86. Nice use of the multi-tab template, James!

    87. Nick Corrieri says:

      Appreciate the detailed explanation. They should hire you to write all the Dev documentation 🙂

    88. hey i am new in ths side. plz help me out. tell me where we have to put this all above code in order to get rid of those scroll bars. i.e either in application canvas page. or in tab page?? plz do help me

    89. thanks for the help, but, i can’t change this settings of canvas width and height when i’m using the hyperarts app can i?

    90. The answer’s in this post. If your content is more than 800px in height, then you’ll get a vertical scrollbar. You don’t want to get rid of a vertical scrollbar unless you don’t mind preventing access to the content that isn’t visible.

    91. Jose Alvarez Maroccolo says:

      thanks very much! you saved mi life! 🙂

    92. I am sorry for a dumb question – I am brand new to this… My FB page is WordPress based. Where do I insert the code to get rid of scrollbars? The only “body” tag I could find is in the style sheet.

      • Any code that goes in the <head> tag of your pages has to be added to header.php.
        You should, however, have a developer do this for you. If you aren’t comfortable editing HTML files, you shouldn’t touch header.php (or any other files, for that matter).

    93. Beth Reeths says:

      We created our Facebook Tab utilizing wordpress.  We customized the twenty eleven theme to fit.  Problem is the scrollbars, and I am not sure where I can input the codes above to make this work.  Any input?

    94. RWSdesign says:

      Hai guys,
      Thanks for the tut guys.
      For some reason i can still see the scroll bar.
      The weird part is that the scroll bar is blinking nonstop.
      Any suggestion or ideas?
      Maybe you can check my page at 

    95. I check your tab and it looks fine to me. Using Mac OS X Lion and Firefox.

    96. RWSdesign says:

      Hai Tim,

      I just create a site using WordPress and trying to iFrame it into facebook fanpage. Can you guide me where to put the code in WordPress? Where to put before and before in WordPress.

      Thanks in advance…

    97. can i give width more than 520.I mean my requirement is 810 width of page.

    98. The new width for custom tabs is 810px.

    99. Hi Guys –
      I have to refresh the page when I arrive to have it dissapear. Any ideas.?

      How do things change with timelines apart from width going to 810.

    100. Try going into your App Settings (, and under “Basic > Page Tab” set “Page Tab Width” to “Wide (810px).

    101. Byron Haley says:

      Is it possible to remove the scrollbars within Facebook if my website was created using Google Sites? I doesn’t appear I have this kind of permission from Google. Any ideas?

      • If you can input JavaScript within the <body> </body> tags, then you can put the JS to eliminate scrollbars there, right after the opening <body> tag.
        Try it out.

        • Byron Haley says:

          I don’t think Google Sites allows access to the tags html. I can’ t find there this part of the code can be edited…

          • Well, if you can’t add JavaScript to your Google Sites page, then I guess you’re out of luck. If you’ve got the skills, you might just make the tab yourself.

    102. Hyperarts, have you noticed that the “Canvas Setting” Section  (that use
      to be under the “Advanced” Setting options [i.e. between the
      “Migration” Section and the “Contact Us” section]) is now gone? It was
      there a few days ago, but when I went in early this morning to update an
      app, it was gone. Do you know where it’s been moved to — or more to
      the point exactly where we need to go to set the canvas width to fixed
      and the canvas height to settable?

      • Yes, I see that too, Fran. I imagine that those settings have been removed because all page tabs will be fluid and set to 810px wide. Or it’s a bug (although I didn’t find a bug report).
        What do you need to set that you now no longer can?

    103. oh my god, thank you for this. been pulling my hair out for days.

    104. José Dias says:

      Thanks for sharing!

      FB.Canvas.setSize({ width: 520, height: 1400 });

      Isn’t working for me. Since the iframe was still limited to 700px (FB standard) Tried diferent height values and no results. However, after adding an height value to the body like this:

      body {
      margin:0; padding:0; border:0;

      My iframe expanded to 1000px without the anoying scrolls. I tried increasing this body height to 2000, and it works.

      Thats my contribution
      Thanks all


    105. Hey Hyperarts! Nice write up, just one thing. FB no longer likes http by default, so you should probably change the write-up to call the sdk using https.

      That little ‘s’ makes all the difference!


    106. the scrollbars are not getting removed in google chrome

    107. This tut is the bomb! Thank you so much for saving me hours of trying to figure out how to override FB. Everything works to the T!!!

    108. hemendra619 says:

      Great tutorial working ..
      please update the tutorial as there is no need to “Make sure Your Canvas Height is Settable”


    1. […] 3) A snippet of code that will get rid of the DREADED scrollbar within the tab and overide Facebook’s limit on tab length. This post outlines all the details: […]

    2. […] Set the width of the page to be embedded in the iFrame to be 500px wide to avoid any horizontal scrollbars (Facebook iFrame Apps – Getting Rid of Those Scrollbars) […]

    3. […] Set the width of the page to be embedded in the iFrame to be 500px wide to avoid any horizontal scrollbars (Facebook iFrame Apps – Getting Rid of Those Scrollbars) […]

    4. Mass Friends says:

      Get More Followers…

      Getting Rid of Scrollbars in your Facebook iFrame Application Tabs | HyperArts…

    Speak Your Mind