How to Remove the Scrollbars from the Facebook Custom Tab Iframe
Last week I wrote about how to create a custom Facebook page tab with iframes and said I would discuss the scrollbar issue this week.
The default size for a Facebook tab created with iframes is 520px by 800px. If your page is larger than this, there will be ugly scrollbars on the page.
When creating the iframe application, make sure that you selected the following on the Facebook Integration section:
- Canvas Type – select, you guessed it, iframe.
- Iframe size – select auto-resize
Before the ending <body> tag on the html page you created for your iframe, place the following piece of code.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '142315715832254',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
Make sure you change the appID to the ID for the application that you created. You can find that by going to Facebook Developers and clicking on the name of the app in the list of applications on the right side of the page. If it’s the only one you have made, it will be the only one listed. I’ve made quite a few so I have a number of them in my list.
Before the </head> tag on your page, add the following:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
This pieces of code will solve the scrollbar issues and adjust the frame to size of your page.
If you are still having a scrollbar issue with your iframe page in Internet Explorer, add the following after the <head> tag:
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
There are a couple of serious bugs related to iframe pages that Facebook says they are working on. I will be discussing these in my next post.
Special thanks to Hyperarts – I figured out the first part of this code but they provided the 2nd part, which was a lingering issue for me.
Tutorial: Add an iFrame Application to your Facebook Fan Page – 2011 Edition
Facebook iFrame Apps – Getting Rid of Those Scrollbars
photo credit: psigrist
Keep Reading:
Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter. If you are looking for Hosting, WordPress Theme, Newsletter or other recommendations, please view my detailed list.
February 22, 2011 at 9:32 pm
Great tutorial. It would really be great to be able to get rid of those scrollbars.
Andrew @ Blogging Guide´s last post ..Guest Blogging- The Road to Writing Success
February 23, 2011 at 2:15 pm
Hi Andrew – Yep – they sure are ugly.
February 26, 2011 at 3:02 pm
Hm… I’ve tried this (and a ton of other things) but I cannot get rid of the scrollbars… If I use firebug and set the overflow of my tag to hidden, then remove it, it works… obviously this isn’t the best thing in the world… I suppose I could duplicate via jQuery, but that seems messy… any ideas what could cause that?
February 26, 2011 at 6:35 pm
Hi Luke – Is it the vertical, horizontal or both? I had trouble with the horizontal one – there was an element on my page that was over 520px. And have you looked at the articles at hyperarts? There is great information there – in the articles and in the comments.
March 10, 2011 at 5:30 pm
Same here… have tried this and other things but nothing seems to get rid of those ugly scroll bars… could it be a FB bug?
March 1, 2011 at 1:58 am
Kim,
You are really living upto the facebook and wordpress consultant tag :) So many facebook tips, especially useful when FB itself is evolving faster. Are you getting good contracts on FB page development, branding etc?
Good luck,
Ajith
Ajith Edassery´s last post ..Content farms and Google
March 1, 2011 at 8:50 am
Hi Ajith – Some – it’s maybe 15% of my business right now. Facebook made a lot of changes recently and I’ve decided to write up what I’ve learned.
March 10, 2011 at 5:42 pm
Going crazy with this.
In integration changed to iFrame and auto-resize.
Changed W & H to 520 X 800 px = framesetsize(520,800)
Still, scroll bars are showing!
Any ideas?
Would truly appreciate them :)
March 10, 2011 at 10:07 pm
Hi Tammy,
You shouldn’t have to set the height – just the width. Have you looked at it in other browsers to see if there are still scrollbars?
I had trouble with the horizontal one because I had an element on the page that was going over. Try pulling parts out piece by piece to see if you can locate the cause of the problem.
March 25, 2011 at 7:51 am
hey, you are SO useful. we may have some contract work for you. Can you email me?
March 31, 2011 at 10:18 am
You total legend you have just made me look ace – with removal of those pesky scroll bars.
March 31, 2011 at 7:27 pm
I am having a problem with Facebook displaying horizontal and vertical scrollbars on my iFrame.
What’s worse, if you take a look at: http://www.facebook.com/statesidedata
you’ll also see that the canvas URL is replicating the Facebook banner and the Facebook right column. It looks horrible but I can’t seem to fix it.
I have a feeling that my background image is wider than 520px. If true, would the scrollbars and the replicated images be a result of that?
Tom
March 31, 2011 at 7:30 pm
Check that URL, it is:
http://www.facebook.com/statesidedatainc
Sorry.
April 1, 2011 at 2:54 pm
Hi Tom,
It looks like the replication of the Facebook banner and right column is what is causing the problem. Your own content seems to fit within the 520px. I think you should double-check your application settings – there might be a setting that is causing this problem.
http://www.kimwoodbridge.com/how-to-make-a-custom-facebook-page-tab-with-iframes/
April 1, 2011 at 8:57 pm
Kim,
I really appreciate your taking a look and responding.
In fact, I have checked, checked again and checked I don’t know how many times. I have changed one item at a time and done so multiple times. Isn’t that what they say is the definition of insanity?
Anyway, I’m stumped. I suppose I could try creating a new app, but I’d still be using the same content and the same settings, so it’s hard to see where that would make a difference.
The other option would be to use an entirely different flash from a different author.
Well, I’ve sent an email to the author of the flash and am waiting for a reply. Perhaps he will get back to me one day.
Thanks again,
Tom
April 3, 2011 at 10:01 am
Hi Tom – You could also try removing each part of the page you made piece by piece. For example, does it work if you remove the flash part of it? When I am having an issue that is how I determine which part of the page is causing the problem.
April 14, 2011 at 6:53 am
Kim,
It’s working now. The tab setting in FB was wrong. What’s really strange is that the incorrect setting ever worked at all, given that it was an invalid URL.
Check it out. I think it looks good.
Thanks.
Tom
April 14, 2011 at 9:24 am
Hi Tom – I’m glad you got it sorted out.
April 7, 2011 at 9:46 am
Does this work with WordPress? If so which php files need editing?
Many thanks,
Clive
Clive´s last post ..How To Backup WordPress Blogs – NO more WP Backup Lies please…
April 7, 2011 at 12:03 pm
WordPress can be used to create a custom iframe tab. Here is a tutorial
http://www.headwayvideos.com/wordpress-pages/how-to-use-wordpress-to-create-a-custom-facebook-tab
April 20, 2011 at 10:23 am
Has anyone had problems getting this to work in Firefox? I’ve got this working in all browsers (even IE 7-9) but Firefox still shows the scroll bars. It’s interesting because Firefox is adding scroll bars in version 4 on the mac and in version 3 on a PC.
Thanks in advance for any help or guidance!
April 25, 2011 at 1:51 pm
Hi Keith – I’m not having problems with Firefox but have not tested version 4 or tested it on the mac. Often, when that happens, there is an element on the page that is pushing past the 520px. I usually remove the code section by section to find what is causing it.
April 24, 2011 at 12:29 am
Kim, you always seem to save my hiney when things are looking desperate. There are dozens of tutorials out there showing how to remove the scrollbars. This IS the only one that works. I left my appID blank and it still works. You are a goddess! thanks for sharing all your best stuff.
a true fan for life.
April 25, 2011 at 1:53 pm
Hi Trisha – Great! I’m so glad it worked for.
May 4, 2011 at 4:30 pm
Kim,
How does this work in comparison to some of the articles I have read that requires a script specification for width and height?
Your fix works (although I had to refresh Firefox several times to get the scroll bars to disappear), but I am searching for the theory!!!
Thanks for the post!
May 6, 2011 at 10:28 am
Hi Nate – I don’t know. I tried a couple of solutions and this one works consistently for me. Although I do sometimes get the refresh to make the scrollbar go away problem.
May 6, 2011 at 11:05 am
Hello,
I have tried many option to discount the scroll bars but it is just not want to go.
I have tried your code but still not worked even I reduced my application size to 500 pixel width size.
Here is my application page: http://www.facebook.com/pages/E-ZONE-CLUB-PVT-LTD/370669591525?sk=app_164540113605232
Note: Still i have not purchased the SSL for my domain
Your help and suggestion appreciated
Thanks and regards,
Sudeep
May 6, 2011 at 11:12 am
Something on the page is making it go over the max width. When that happens to me I usually sections of code piece by piece until I figure out what is causing the problem.
May 6, 2011 at 2:24 pm
Dear Kim,
I figured it out, my header div was eating my space out. Thank you for your help.
May 10, 2011 at 10:09 am
Great! I’m glad it’s been resolved.
May 8, 2011 at 10:10 am
Thanks Kim! It’s wonderful to have such a clear, concise explanation of the solution :-) You rock!
Mark
May 10, 2011 at 10:11 am
Hi Mark – I’m glad the article helped – thanks!
May 17, 2011 at 4:38 am
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?
Thanks!
May 22, 2011 at 6:58 am
Hi Thomas – I haven’t had this problem on any of the pages that I work on.
June 4, 2011 at 11:06 am
Thaaank you!!! I looked all over the internet for a solution that removes the scrollbars and you gave it to me! Million thanks again! IT definitely worked for me :D
June 6, 2011 at 5:22 pm
Hi Victoria – Great! I’m glad it worked.
June 10, 2011 at 11:32 am
Hi,
I confirm Thomas,
The test is simple :
put a simple image of 520 px of width. Nothing else.
You will have the horizontal scroll bar.
The script is not dealing with this issue.
The css tip do nothing.
Set your image to 512 px, you get no more scrollbar.
What is causing 8 px with a simple html page and an image in it ???
June 13, 2011 at 6:46 am
Are there any margins set? That would happen if there is a 8px margin.
June 16, 2011 at 10:51 am
You’ll have to set css of your to padding:0, margin:0 (facebook puts some padding/margin there I guess), otherwise you won’t have 520px but just something like 512px…
July 11, 2011 at 9:01 pm
IF you find that the instructions above are not doing the trick, you should also add style=”overflow: hidden” to your html and body tags.
July 12, 2011 at 11:50 am
Hi Jared – Thanks!
July 27, 2011 at 10:08 pm
Hi Kim,
thanks for this. I followed it and it doesn’t work for Firefox on a mac – and your own facebook app shows scrollbars with Firefox on a mac, too.
If anyone had a solution for macs it would be sooooo useful (for me and about 50,000 other people). Firefox is usually the least problematic browser for me
July 27, 2011 at 11:13 pm
Update! I got it to work without scrollbars on a mac in Firefox.
The trick for me was to use WordPress as the CMS, and use the plugin called Facebook Tabs Manager – no extra code required.
If anyone needs any more help, just contact me at Pagetopia.com
Thanks, Kim
July 28, 2011 at 2:34 pm
Hi Andy,
Thanks for the info – I don’t want to pull in a WordPress page so I’ll see if I can locate a solution for the scrollbar issue on the MAC.
July 29, 2011 at 6:22 am
Just a tip, because this is the first page on Google for this problem:
The FB JS SDK appends code the fb-root DIV when it loads. This code contains an absolute positioned DIV that contains an IFRAME with a styled width of 575px
Try adding the following to your CSS
#fb-root { display: none; }
if you are having problems with a horizontal scrollbar showing about 50px to the right of your content.
Tim.
September 7, 2011 at 3:13 am
Thank you very much for this…this came in handy when I was making my app today although it may have been a waste of time considering the SSL requirement of the Canvas URLs starting on October 1. Oh well.
September 8, 2011 at 9:52 am
There are solutions for the SSL requirements that I will be writing about soon.
September 8, 2011 at 1:54 pm
I’ve actually already hacked my app to comply with the ssl requirement without having to get a bunch of certificates. (multiple sites = multiple apps & domains)
The only problem with it is now the scrollbars fix has stopped working but I am working on it now.
September 8, 2011 at 2:54 pm
ok I’ve figured out how to remove the scrollbars on my hack but because it is a hack I lose some functionality and mostly is the height of the FB iframe has to be controlled manually now instead of autosizing. So it works and is compliant with the ssl requirement but it does have drawbacks so looking forward to seeing your solution.
September 14, 2011 at 9:16 am
Are you going to be posting how you made it work? I would really like to see it.
September 20, 2011 at 1:31 pm
I wasn’t planning on it because it does utilize a ssl I already have and it certainly isn’t elegant at all but screw it…if it helps anyone then great.
I’ll edit or reply to this comment once I have the code laid out nice and neat. :)
September 20, 2011 at 5:01 pm
How to use an SSL Shell to validate non-secure Facebook iFrame Apps – http://michaeltunnell.com/blog/11-tutorials/8-how-to-use-an-ssl-shell-to-validate-non-secure-facebook-iframe-apps
September 20, 2011 at 5:41 pm
Thanks! Hopefully I will have time later or tomorrow to take a look.
September 20, 2011 at 6:46 am
Hi there,
I don’t mind having the vertical scrollbar there.
However does anyone know how I can set the CSS so that
the scrollbar background isn’t white (but black to match the
Wordpress theme).
I want to use
scrollbar-base-color: black;
however I can’t get what element I should apply this to.
Any suggestions would be GREATLY appreciated.
Tania
September 20, 2011 at 1:42 pm
Tania, sorry but changing the color settings of scrollbars only works on Internet Explorer…all other browsers ignore those settings.
That code goes in the body {} portion of the CSS but like I said it only works on IE because only IE has hideous scrollbar design…all other browsers use very customized scrollbars so it isn’t possible to adjust their colors and depending on the theme and the operating system the visitor is using the scrollbars could be different from the default scrollbars anyway.
This is why for Facebook Apps the solution is to remove them entirely.
October 4, 2011 at 4:56 pm
I have used your tutorial on how to create the fb iframe app & remove the scroll bars. Thanks a lot — truly great tutorials!
All was well until things got secured. I do have a SSL, so I won’t need to hack around that but when I add the code to remove the scroll bars, I get warnings in IE about the security of my page. Any suggestions?
Also I noticed that the process to create the iframe app has changed and that now you can just create a “Page Tab” app.
October 4, 2011 at 5:21 pm
Quick fix I suppose, I updated the code (before ) in this post to:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOURAPPID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth 2.0
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "https://connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
It works. When I look at the app iframe source it still forces a security alert but when it loads w/in FB it does not.
October 6, 2011 at 6:54 pm
Thanks! That is really helpful.
October 25, 2011 at 11:12 am
The fact is this code doesn’t work. So I ask — what are you using to get the pages you’ve built to work to display at 520 pixels width not 512?
October 25, 2011 at 11:30 am
@Steve
The code might not work as is, since the latest round of FB changes but with some tweaking it definitely does the trick. I can’t quite document the changes that I made by the time that I finished the Page Tabs, but just as a note of encouragement, it CAN work. I used this post as my foundation to remove the scrollbars.
Here are a few of page tab examples w/ it in action:
https://www.facebook.com/pages/Manassas-Chorale/116265852717?sk=app_278321385525102
https://www.facebook.com/badtothebonesmokehouse?sk=app_230536250293231
https://www.facebook.com/pages/Okras-Cajun-Creole/224948387522715?sk=app_160240160705495
These pages use a mix of images and background images that are 520px (not 512px) and there isn’t a scrollbar (vertical or horizontal).
October 27, 2011 at 11:37 am
Try heading this to the top of the page.
<html xmlns=”http://www.w3.org/1999/xhtml” style=”overflow: hidden”>
October 27, 2011 at 12:22 pm
I am using the code provided here with my ssl shell and it displays content over 520px because I am really turning one fullsize site into a smaller facebook ready site while keep all of the same content and such. I have no problem with removing the scrollbars in using the code here.
December 4, 2011 at 12:06 pm
Works for me…however I still have a vertical scroll bar in Firefox although its not active because now my page fits. Its fine in IE and Chrome, advice would be greatly appreciated as Ive spent days looking for a solution
link to my page
http://www.facebook.com/pages/Kwik-Tan-Stockport/186103111427953?sk=app_283486548360806
December 9, 2011 at 12:00 pm
Hi Phil – Try adding to overflow:hidden; to the style for the page.
May 11, 2012 at 5:02 am
Hey , really great… its help me a lot to fix the issue in IE….. thanks…
August 6, 2012 at 9:00 am
Hello!
I found your link whilst searching how to remove scrollbars in Facebook Tabs.
Just wanted to point out the new function is “FB.Canvas.setAutoGrow” and not “FB.Canvas.setAutoResize”.
In canse somebody else has my problem and finds this blog here is the URL to Facebook Developers Documentation about the function
https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/
Cheers!