Remove scrollbars and get your facebook app/canvas iframe to autosize to height – FB.Canvas.setAutoGrow()
Note: This works with the new facebook 810px width canvas page!
If you have created a Facebook application that has an canvas/iframe page tab and you want the frame to automatically grow to the size of the content, you can use FB.Canvas.setAutoGrow() within the frame. If you haven’t already created a Facebook app tab, follow this tutorial first: http://www.dreamgrow.com/how-to-set-up-a-custom-facebook-landing-page/.
First of all you may need to edit your application’s settings, so go to https://developers.facebook.com/apps/ and click ‘Edit App’. On the menu in Settings -> Basic, scroll down to Page Tab and App on Facebook. Within the App on Facebook section you’ll need to make sure that Canvas Height is set to Fixed at 800px. The Facebook developer reference states that FB.Canvas.setAutoGrow will only work when Canvas Height is set to “Fixed to (800)px”. Note: If you don’t use the App on Facebook option and only have the Page Tab, you won’t need to fiddle with the height settings.
Next you will need to insert the FB.Canvas.setAutoGrow() function within the
of your code. The Facebook developer site states that you should use this code:1 2 3 4 5 6 7 | window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', // App ID ... // Other configuration variables here }); FB.Canvas.setAutoGrow(); //<--- This } |
However, I noticed that setAutoGrow() will not properly work on some browsers (mainly Firefox) if you put it within window.fbAsyncInit function like how the Facebook developer site states. Instead, run FB.Canvas.setAutoGrow() on window.onload instead – this will ensure that the timer starts after the browser has finished rendering the document and the DOM is ready:
1 2 3 4 5 6 7 8 9 10 | window.fbAsyncInit = function() { FB.init({ 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 } |
The Facebook frame should be auto growing to the height of the content now. If it isn’t, leave a comment and I will help you. Even though the frame height is sizing automatically, you may still have a vertical scrollbar visible. To remove this, set overflow:hidden on the body:
1 | body {overflow:hidden;} |
Iframe Code Example
Below is an example of how your page should look, an example of the application can be seen here: http://www.facebook.com/pages/atomikucom/250331981713993?sk=app_236448559776994.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>Title Here</title> <style> body {overflow:hidden;} /*This is handy for removing horizontal/vertical scrollbars as we won't need them if we autosize; */ </style> </head> <body> <div id="fb-root"></div> <script src="https://connect.facebook.net/en_US/all.js"></script> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', //Your facebook APP here cookie : true // enable cookies to allow the server to access the session }); } window.onload = function() { FB.Canvas.setAutoGrow(91); } </script> <p>Your content here...</p> </body> </html> |
If you have any problems, or found this post helpful, leave a comment and I will try to help.
Edit Feb 13th: I have updated the above complete iframe sample to demonstrate how it works. Tested in Firefox, Opera and Chrome on mac.
I think it’s no longer working.
@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?
Well that fixed the horizontal scroll bar. Which was more than I could manage on my own.
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!
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
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.
I am forever thought about this, thankyou for putting up.
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.
Thank you so much for this. A lot of times it’s always the small basic things that get us. Much appreciated.
Not working in Google Chrome. please help
@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.
Sorry my bad, It’s working for me. I reinstalled Chrome. Thank you.
Scrollbars are still showing under http, but works great for https… any thoughts? Great tutorial and thanks.
Please disregard my previous question…. really nice tutorials. Thanks again.
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
Thanks Kobus, I’ve updated the code. Works fine with HTTPS now.
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
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!
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
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:
Thanks! Works in IE too
Works like a charm, many thanks!
BOOM – Lifesaver! Works perfectly, thank you!!
Hi atomiku,
I followed exactly as in your snippets, but couldnt get rid of the annoying scrollbars.
Could you advise T_T
@Shaq: looks great to me (nice design!) – did you fix this in the end, or are you still having problems with it?
Thanks for this nice code! Works like a charm!
http://www.facebook.com/YourSocialShop/app_355640864471746
@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 :]
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!
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.
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/
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.
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?
Thanks for posting this. It worked for me. I would +1 this page if I could!
Simply awesome.. tried it on the new 810px canvas pages, works exactly as I needed it to.
THANK YOU!
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.
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!
You’re welcome kabouter_wesley !
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
}
Awesome stuff!!! thanks for the share
… worked 100 cement!
Thanks a billion!
Thank you very much, you saved me.
I can sleep peacefully now. Lol
Thanks…
This doesn’t work on the newest Opera version.
Damn. Thanks for letting me know – I’ll see if I can develop a fix for this over the weekend.
Any updates on the Opera fix?
Not right now, I haven’t got the time to figure it out at the moment. If I remember I’ll try and have a look at it over the next few days… unless anyone else knows a fix???
Does this work in ie7?
I am confirming this code works for latest FB settings. Year 2012.
Thanks Atomiku.
cheers
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);
}
Thanks a lot. Your post brought me to right conclusion.
This doesn’t work anymore.
This doesn’t work anymore. Tried FF, Opera, IE. No go.
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
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
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
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.
Make sure to check your JS error console, see if any errors are happening
I can confirm, that id doesn’t work in FF. Works in Chrome and Safari though.
Thanks so much for the FF fix!
it’s not working at FF. Can you please update your content by checking whole thing
It should be fixed now. Read the comment I just posted and check the new iframe code example in the post. Thanks!
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)
Thanks for this, it was very helpful!
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.
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 ??
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.
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
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);
}
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!
Thomas, Send me the URL of your facebook app and I will take a look asap.
If something is wrong with my example I’ll post a fix/new example right away.
Cheers
Thanks so much for taking the time to help…
Here is the test I did:
http://www.rabaldus.no/kunder/djuice/tinaogbettina/index_test.php
And do you have the facebook page as well please? Thanks
https://www.facebook.com/rabaldus.testkonto/app_393639760684588
I can’t find the tab with your index_test.php url. You haven’t added it yet?
Yes, it is the one on the far right saying “Konkurranse”:
https://www.facebook.com/rabaldus.testkonto
atomiku, have you had the time to look at my problem?
Have you fixed it yet?
No, I haven’t found the problem yet…
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
Gracias, a mi me funcionó aqui un ejemplo:
https://www.facebook.com/hotelloscorales.tumaco/app_195445587226871
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?
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.
Well i did that but it was still the same.
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
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
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.
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
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
Well, I’d probably recommend that you put the and
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
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?
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!
Thanks for the helpful information! Works great!
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.
Post me a link to the Facebook page and I’ll try and work out what’s wrong, thanks.
I tried your code. It is working fine in chrome (no scrollbars) but FF still has both horizontal and vertical scrollbars.
Thanks.
Can you give me the URL of your facebook page please? I’ll take a look
I have sent you URL via email to your gmail account.
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.
Checked again. Scrollbars can be seen for all pages irrespective of the length.
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
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.
Thanks for the help. Now it works fine
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
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?
.
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.
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.
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
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.
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!!
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.
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?
It seemed to be working for me… double check in Chrome, Firefox, etc… let me know if you’re still having problems. Cheers
This is perfect! Thanks a lot…
Tahnk you very much, this is a great tutorial and it help me a lot to remove that /!”$” vertical scrollbar!
Have read all the comments before able to have it done!
It works anyway. Thanks alot.
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)
Thank you for putting this up, I spent all night tweaking my code with no luck. This did the trick!
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
I think it is because you haven’t put the script into your page?
Please check my example again, you need to put the
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.
Yahooooo.. You save my life
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