Remove scrollbars and get your facebook app/canvas iframe to autosize to height – FB.Canvas.setAutoGrow()

You may also like...

127 Responses

  1. mary says:

    Thank you… Ony this code worked for me

  2. This doesn’t work for me. :'( Darn! I have tried a number of solutions all variations of what you have. What I am seeing is that the height is constantly increasing in an infinite loop. You can literally go to the bottom of Facebook, and the height in increasing infinitely a line at a time. If you know the solution to this, I would appreciate it.

  3. Eleandro dos Reis says:

    Eu te am0!!!

  4. KK says:

    Awesome stuff. Your iframe code worked like a dream.
    No more scrollbar nightmares! :)

  5. Shinu says:

    set overflow:hidden for fb-login-button to stop scrollbar from loading

  6. stofl says:

    Hey Matt.

    I have developed some facebook apps and could get the auto grow run in all of them. But now I have an app that don’t wants to grow. I found your posting and tried it with your code (except for the meta tag) and still it doesn’t work. Do you have an idea what is wrong here? I describes the problem at stackoverflow. There is the code, the link to the app and a screenshop of the app settings. Can you please help me? I don’t have any more ideas and spend hours for that but…

    http://stackoverflow.com/questions/13935610/facebook-app-doesnt-resize

  7. abiha says:

    Yahooooo.. You save my life :)

  8. shawn says:

    Hello

    this is the fanpage that I’m working on:
    https://www.facebook.com/pages/Stigs/357808240907056?sk=app_274448349344423

    firefox, chrome page displays full content, but in IE8, it cuts off in half it may be due to body tag set to hidden, but if I don’t set to hidden, it will display scrollbar, please help me how to fix this issue

    • atomiku says:

      I think it is because you haven’t put the script into your page?
      Please check my example again, you need to put the

      • shawn says:

        I actually linked script in the main file. but as you said, I just put script in main file , still shows half content in IE, everytime I refresh , I get warning from IE, wheather to load secure connection or not, (something about secure connection but not sure exact warning) . if i click yes, it shows half content, if I click No, i loads full content.

  9. Dustin Wilson says:

    Thank you for putting this up, I spent all night tweaking my code with no luck. This did the trick!

  10. William says:

    Thank you for this tuto, you have some more easy to use solution. Wildfire is not available actually but I’ve done a good job on my pages with Iframe apps (https://www.facebook.com/iframe.apps?fref=ts)

  11. Sreyleap says:

    Have read all the comments before able to have it done!

    It works anyway. Thanks alot.

  12. Grounchys says:

    Tahnk you very much, this is a great tutorial and it help me a lot to remove that /!”$” vertical scrollbar!

  13. Don2x says:

    This is perfect! Thanks a lot…

  14. Nikole says:

    This was working and then it suddenly stopped working a second later. Can you look at my code and see what I am dong wrong?

  15. Mirko says:

    I think it has something to do with the Page-Height. I just saw through the Inspector in FF that the overflow:hidden actually doesn’t apply on the other two pages as well. But they do not show any Scrollbars. Strange!!

    • Mirko says:

      Okay, after some more tinkering I found, that changing the doctype from HTML5 to HTML 4.01 helps removing the scrollbars inFF , without having to apply inline styles.
      Still strange, that FF doesn’t recognize the iFrame in HTML5 though.

  16. Mirko says:

    Can you pls have a look at my Code as well:

    https://www.facebook.com/religionimdialog/app_165171346951676

    Works in Chrome and Safari, But I still have Scrollbars in FF (on Mac)

    Thanks

    • atomiku says:

      Hi Mirko. I fixed the problem for Jyot. It was because he needed to set his Canvas Height to be: Fixed 800px. Can you please edit your application’s settings, set Canvas Height to fixed and let me know if this fixes it for you? :).

      • Mirko says:

        I’ve tested setting the Canvas-Height to 800 before, but it didn’t help. I just tried it again right now and I still have vertical and horizontal Scrollbars in FF.

        • atomiku says:

          Okay well, I found the problem. I looked at the actual page (/relidiag/welcome/) and noticed that the scrollbars were showing on the page. This means the overflow:hidden; you put in your stylesheet wasn’t working for some reason! If you put the body {overflow:hidden;} on the page inside a <style>, or use the style attribute on the body tag like: <body style=”overflow:hidden;”> this will definitely solve your problem.

          • Mirko says:

            Thanks, this really solves the problem.

            Now the mystery remains, why the overflow:hidden in the style-sheet doesn’t apply on this Tab, but on the other two?

            http://www.facebook.com/religionimdialog/app_385407524847880
            http://www.facebook.com/religionimdialog/app_171843499616413

          • atomiku says:

            Haha well, that certainly is a mystery for now. I have no idea. Maybe with some tinkering I could find out exactly why… But I think now the style=”” is working fine we will just leave it be.

            Oh by the way you have a slight mistake:
            <body style=”overflow:hidden”;>
            You’ve accidentally put the semicolon after the quote.

            Matt.

  17. Jyot says:

    Thanks for the help. Now it works fine :)

  18. Jyot says:

    Thanks. I have removed extra from code but still having horizontal scrollbar for all pages and veritical scrollbar is hidden only for pages which are of normal height but visible for long pages.

  19. Jyot says:

    I tried your code. It is working fine in chrome (no scrollbars) but FF still has both horizontal and vertical scrollbars.
    Thanks.

    • atomiku says:

      Can you give me the URL of your facebook page please? I’ll take a look

      • Jyot says:

        I have sent you URL via email to your gmail account.

      • Jyot says:

        Thanks. I have removed extra but still having horizontal scrollbar for all pages and veritical scrollbar is hidden only for pages which are of normal height but visible for long pages.

        • Jyot says:

          Checked again. Scrollbars can be seen for all pages irrespective of the length.

          • atomiku says:

            Did you set it up as a canvas page?
            Looks like there *could* be a difference between the code you need for apps and normal canvas pages. I will email you my instant messaging information. Do you have GTalk or MSN? I’ll help you sort it out, and maybe update my post if need be. Thanks

  20. Sage Wallace says:

    I used the spot to one of my fabric applications but am still having the same problem… The site is set at 800px high and does not automatic re-size for higher webpages.

  21. Jamie says:

    Thanks for the helpful information! Works great!

  22. Agry says:

    hey guys,
    I just tried to do that because I have trouble resizing the app. Yet I’m troubled because I can’t actually find iFrame options, nor can I find canvas options in the advanced section of the app options… it seems that facebook changed the options since the post was done.

    can anyone help me? :-)

    • atomiku says:

      I will take a look into this. I may need to update my blog post. But, if you have a proper look, you may find the options you need. Or, maybe they’ve removed the options and that you don’t need to set Canvas Height/Width anymore!

  23. You are my hero! :)
    I’ve just spent cca 6 hrs breaking my head on how to fix this tab size problem and then I found this page.

    Thank you, thank you, thank you :)

  24. João Mirra says:

    Hello. Im having a problem, Ive have a swf and html that is inside a facebook iframe. Ican see it in Chrome and Safari, without scrollbars, in Firefox i only can see half of it (its 1260px tall) and in IE 8 some friends said that when they go out, the screen goes to black. Can i use this code with swf? Where and how should i put it? If you want, i can send you the HTML and swf files.Thank you

    • atomiku says:

      Well, I’d probably recommend that you put theand within

      Your content here…

      on my iframe example. It SHOULD work. But, if you can’t get it working, give me a link to your Facebook App so I can have a proper look at it. Thanks.

  25. wayne says:

    HI atomiku

    This is my first encounter with your website. Its great to see such a great blogger interact with your content and readers of that content. We often see way to many bloggers write without following up on the content and readers. However im very impressed with this blog.

    Im having problems with this FB.Canvas.setAutoGrow(); feature. Would it be possible for you to have a look at my app and website to check whats the problem? i can post code here just not links. As i dont want to spam your comments, i would rather do it more ethical.

    Let me know if you have a free gap to help figure this nightmare out.

    Kind regards

    • atomiku says:

      Hey wayne, I’d be more than happy to help with your code. Either provide me with the facebook app page URL, or the code. It might be easier for me to help you if I have the Facebook app url, because then I can see what its doing in the proper environment.

      • wayne says:

        Hi friend.

        Thank you so much for a reply. Is it possible for me to just send you a link in email as I don’t want to list the URL here for SEO purposes. I think your blog is high/rich in SEO. Hope you can understand.

        Kind regards

  26. Garnett says:

    Hi, do you have any experience using google sites ? IF so do you know where and how to include the FB SDK so i can get rid of the vertical side bar. Is it possible with google sites ? Thanks

  27. DJ Danni says:

    hi. I have a app with this code. but i get scrollbar on the App Page but on the Facebook site i do not get the Scollbar.
    https://apps.facebook.com/leikjaheimur
    Can somone help me?

    • atomiku says:

      Well, I can see that your code is slightly broken.

      First, change: <body { overflow:hidden; }>
      To this: <body><style> body {overflow:hidden;} </style>

      You should only have the body {overflow:hidden;} for the facebook version, and DON’T use overflow:hidden for your main site, otherwise people on the main site (not using facebook) will not be able to scroll.

  28. John says:

    Gracias, a mi me funcionó aqui un ejemplo:

    https://www.facebook.com/hotelloscorales.tumaco/app_195445587226871

  29. atomiku says:

    For the record, I’ve tested my example in FF, Safari and Chrome (on mac) and it’s working for me. It could be that the instructions weren’t followed properly, or the facebook app settings are incorrect.

    The example is here:
    http://www.facebook.com/pages/atomikucom/250331981713993?sk=app_236448559776994

  30. Thomas says:

    I see a lot of people getting this to work and also the last update is dated 12.08.2012, so I was hoping this would work.

    Unfortenately I don’t get this to work. I even tried to copy/paste the HTML-code and insert my own content between the tags.

    No luck in Chrome, FF, Opera og Safari for PC/Mac.

    Could someone post a working example or atleast post a link to a working page?

    Thanks! :)

  31. Aleksandra says:

    sorry, here rest of my code:

    window.fbAsyncInit = function() {
    FB.init({
    appId : ‘ID’, //Your facebook APP here
    cookie : true // enable cookies to allow the server to access the session
    });
    }

    window.onload = function() {
    FB.Canvas.setAutoGrow(91);
    }

  32. Aleksandra says:

    Hi! This solution works in FF, Chrome, IE but unfortunately not in Opera :(

    my code:

    window.fbAsyncInit = function() {
    FB.init({
    appId : ‘ID’, //Your facebook APP here
    cookie : true // enable cookies to allow the server to access the session
    });
    }

    window.onload = function() {
    FB.Canvas.setAutoGrow(150);
    }

    I also set canvas width: fixed and canvas height: fluid. I don’t have scrollbar anymore, but tab is cut off.. What am i doing wrong ? Any idea ??

    • atomiku says:

      Is it because you have not entered the ID? Or because you’re using SSL? I’m not sure. Post the link to your app and I’ll have a look in Opera and see if I can spot anything. It could be a CSS problem.

      • Aleksandra says:

        I got it. I used another script which I found :

        FB.init({
        appId : ‘ID’,
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        oauth : true // enable OAuth 2.0
        });
        FB.Canvas.setAutoResize();

        Now I have two scripts, it’s strange, but it works on each browser :D

  33. atomiku says:

    For those having problems with the auto-sizing not working in FF, or any other browser: please make sure you don’t have this in your code:

    // <![CDATA[
    // ]]>

    It might be inside the <script> tags from the example you took. WordPress accentally formatted the post and broke my code example so please copy-paste it form here or remove the <![DATA[ ]]> tags. thanks. Let me know if this fixes it for you.

  34. Manu says:

    Hi !

    This technique according to me (with graceful degradation for ie):

    //In css
    body {
    // nothing special
    }

    // In javascript (with jquery)
    window.fbAsyncInit = function() {

    FB.Canvas.setSize({
    width: $(‘body’).outerWidth(true),
    height: $(‘body’).outerHeight(true)
    });

    }

    In app config:
    Canvas Width: Fluid
    Canvas Height: fixed to 5000px (max height for all pages)

  35. shaon says:

    it’s not working at FF. Can you please update your content by checking whole thing

  36. Bonjiro says:

    Thanks so much for the FF fix!

  37. Thorstein Klingenberg says:

    This doesn’t work anymore. Tried FF, Opera, IE. No go.

    • atomiku says:

      Hmm… a little bit worrying! I have no time to find a solution right now. Are you sure it isn’t just you? If anyone else can confirm if it works/doesn’t work. Thanks

      • Thorstein Klingenberg says:

        Tried copying your iframe snippet to be sure it wasn’t any of my other code. Still the same result.
        The app in question is here: https://www.facebook.com/dognvillfestivalen?ref=stream&sk=app_235011406542148

        • atomiku says:

          I have good news for you… I looked at your app on Firefox 13 on Mac. The pages work for me, they resize perfectly to the height, plus no scrollbars. So I’m thinking it is a problem with just you? What browser and OS are you using… hmm… is JS disabled? I’m not sure right now

          • Thorstein Klingenberg says:

            Are you sure you aren’t running anything extraordinary in your browser? I’ve tried IE, Opera, FF, on a Win 7 PC and on one running XP. No resize anywhere. JS is enabled.

            FF throws a lot of warning, most from FBs css-script. No errors.

        • atomiku says:

          Make sure to check your JS error console, see if any errors are happening

  38. Thorstein Klingenberg says:

    This doesn’t work anymore.

  39. Mike says:

    Thanks a lot. Your post brought me to right conclusion.

  40. shinin says:

    I am still having the double scroll issue to my facebook iframe app.
    I am using the below code:

    window.fbAsyncInit = function() {
    FB.init({
    appId : ‘${f:getApplicationId(dc.platform)}’,
    cookie : true // enable cookies to allow the server to access the session
    });
    }

    window.onload = function() {
    FB.Canvas.setAutoGrow(91);
    }

  41. Prince says:

    I am confirming this code works for latest FB settings. Year 2012.

    Thanks Atomiku.

    cheers

  42. Natalie says:

    Does this work in ie7?

  43. Kevin says:

    This doesn’t work on the newest Opera version.

  44. Andhri says:

    Thank you very much, you saved me.

    I can sleep peacefully now. Lol

    Thanks…

  45. Lawless says:

    Awesome stuff!!! thanks for the share ;)… worked 100 cement!

    Thanks a billion!

  46. Gee says:

    Great !!!! Working for me. Just check that you DON’T have any overflow_y: scroll; (nor overflow_x:scroll) in your CSS.
    for example
    html{
    overflow-y: scroll;
    }
    Delete it if so.

    • kabouter_wesley says:

      Thanks Gee!! That was my problem – i had this line in my reset.css and I wasn’t aware of it’s existance, you saved me much time, thanks again!

      • Gee says:

        You’re welcome kabouter_wesley !

      • Gee says:

        May be one of you want to have the app may be accessed outside of facebook (as standalone web site), just add these lines of script somewhere in your page:

        try
        {
        loc = top.location.host ;
        // enable scroll, page is not inside facebook
        document.body.style.overflow = ‘scroll’ ;

        }
        catch(err)
        {
        //error because of facebook restriction
        //ie page is inside facebook as app

        }

  47. otakublogger says:

    Simply awesome.. tried it on the new 810px canvas pages, works exactly as I needed it to.

    THANK YOU!

  48. James says:

    Thanks for posting this. It worked for me. I would +1 this page if I could!

  49. Ananggadipa says:

    ure the best bro,
    I always stuck in firefox/safari where it doesnt work.
    I test in chrome.

    I had the little problem when some page doesnt show at all at firefox, I discover the bug was just not differentiate the Page Tab URL and Secure Page Tab URL in app setting.
    It work fine in chrome but not at firefox X_X

    I make the page for here:
    https://www.facebook.com/RumahPohonOrg
    please take a visit, it can’t be done without you.

    greetings from indonesia :)

    btw your example fb page link is down?

  50. Liz says:

    The link in your iFrame example isn’t working but I tried this, and it worked. I, as well as many others, have been driving myself mad trying to figure this out. Thank you so much.

  51. Jim says:

    I had to load the Javascript SDK asynchronously in order for this to work in Firefox 11

    JavaScript SDK
    https://developers.facebook.com/docs/reference/javascript/

  52. Motivação says:

    My spouse and I stumbled over here coming from a different page and thought I may as well check things out. I like what I see so now i’m following you. Look forward to finding out about your web page again.

  53. ClickMonkey says:

    Hello! :-) This web page has now been successfully crawled by the ClickMonkey search engine! It may be included in our web index shortly. Thank you!

  54. Gerald says:

    Thanks for this nice code! Works like a charm!
    http://www.facebook.com/YourSocialShop/app_355640864471746

    • atomiku says:

      @Gerald: Hey, I’m glad I’ve helped. I did notice that I get SSL warnings when viewing your link though, it’s because I use HTTPS for facebook and your SSL certificate isn’t signed to your domain. Did you know this? It prevents me from viewing your facebook canvas tab until I add an exception for your cert. You may want to get this fixed :]

  55. shaq says:

    Hi atomiku,
    I followed exactly as in your snippets, but couldnt get rid of the annoying scrollbars.
    Could you advise T_T

  56. Adam says:

    BOOM – Lifesaver! Works perfectly, thank you!!

  57. Ronne says:

    Works like a charm, many thanks!

  58. Joe Dev says:

    Thanks! Works in IE too :)

  59. Kristen says:

    Thanks so much for taking a look! It didn’t do anything for me. I have placed the piece of code in and I have changed the body style tag. Anyway you could take another peek?

    I have my application settings set at fluid. I am not sure why it is not working

    http://apps.facebook.com/zamfbwelcome

    • atomiku says:

      Hmm… maybe it’s because the code I have is only supposed to work for when you have your app as a tab for a facebook page? If you look at my facebook page: http://www.facebook.com/pages/atomikucom/250331981713993 you can see that the ‘setAutoSize Test’ tab is a facebook application that I have added as a page…

      I couldn’t seem to find a way to autosize+remove scrollbars for your particular example, so instead I recommend that you create a facebook page, add your app as a tab, then things should work… here is a tutorial for you: http://www.dreamgrow.com/how-to-set-up-a-custom-facebook-landing-page/ – you will only need to follow the last stage:

      4. Add “Page Tab” to your Facebook Page.

      This is the trickiest step — there’s actually no button to add your new app to the page. Instead, you need to manually populate the following URL:

      https://www.facebook.com/dialog/pagetab?app_id=app_id&next=Page_Tab_URL

      For example: https://www.facebook.com/dialog/pagetab?app_id=199092376851759&next=http://apps.amsterdamprinting.com/apl-facebook/newappwelcome/

  60. Kristen says:

    Hi There.

    I am still having problems with this. Could you take a look at my canvas URL and see what I am doing wrong. I am using https but not sure what I would need to change in order to get the scrollbars to go away. Thank you so much for your help

    http://apps.facebook.com/zamfbwelcome

    • atomiku says:

      Hey Kristen, the problem seems to be because you haven’t included the external javascript file that you need to use the facebook javascript API. If you insert this line above your <script> tag (the one that contains the setAutoGrow), it should work:

      <div id=”fb-root”></div>
      <script src=”https://connect.facebook.net/en_US/all.js”></script>

      Also, change: <body style= overflow:hidden;> to: <body style=”overflow:hidden;”>

      Hope this helps! :)

  61. Kobus says:

    http://atomiku.com/2012/02/remove-scrollbars-and-get-your-facebook-app-canvas-iframe-to-autosize-to-height-fb-canvas-setautogrow/#comment-81

    That comment solved it for me. Everything used to work, but then stopped for some reason. When I replaced the document,protocol with hardcoded https, everything was fine.

    Perhaps it belongs in your narticle? In all other aspects, your article is great, thanks!

    Kobus

  62. Chad says:

    Please disregard my previous question…. really nice tutorials. Thanks again.

  63. Chad says:

    Scrollbars are still showing under http, but works great for https… any thoughts? Great tutorial and thanks.

  64. Don Ranil says:

    Sorry my bad, It’s working for me. I reinstalled Chrome. Thank you.

  65. Don Ranil says:

    Not working in Google Chrome. please help

    • atomiku says:

      @Don Ranil: I tested my code in chrome, it definitely works. You can see it in action here: http://www.facebook.com/pages/atomikucom/250331981713993?sk=app_236448559776994

      Can I have a look at your code? You may have done something wrong, I am able to help you.

  66. Bill says:

    sorry, my bad, it work perfectly in all browser under https. I just forgot to change the http to https in the next line https://connect.facebook.net/en_US/all.js
    Of course the rest of links should be also https.

  67. Azalee Benincasa says:

    I am forever thought about this, thankyou for putting up.

  68. Bill says:

    Great tutorial! Thanks. For some reason it isn’t working in Explorer under https (secure navigation) on Facebook. 50% of users navigate with Explorer, and Facebook is forcing to use https in a near future. Any solution?
    thanks!!
    Bill

    • atomiku says:

      Hey Bill, does it work with other browsers under HTTPS? It may just be an Internet Explorer issue (damn you, IE). I will check soon to see if the example works with Internet Explorer. As for HTTPS, you are going to need an SSL certificate, or used a shared SSL. Some hosts offer free shared SSL. If you need some decent hosting with free shared SSL, give me a contact – my boss runs a hosting company.

  69. McKenzie says:

    Nevermind! When I put body {overflow:hidden;} in the right place it worked!! You are a life saver. I have been beating my head against the wall for days!

  70. McKenzie says:

    Well that fixed the horizontal scroll bar. Which was more than I could manage on my own.

  71. atomiku says:

    @Roberto: i tried fixing the code. I’ve posted the updated code on what the iframe document should look like. What is your problem? Has this fixed it?

  72. Roberto says:

    I think it’s no longer working.

  1. February 24, 2012

    […] dimension out the window. So as a consequence you get a horizontal scrollbar. There is a great tutorial by Atomiku that helps you resolve this […]

Leave a 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=""> <strike> <strong>