(Anti) Social Development

(Anti) Social Development

by

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:

  1. Canvas Type – select, you guessed it, iframe.
  2. 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

It's Time!

Start your WordPress website project now!

Contact Me! >>



Keep Reading:
7 Troubleshooting Tips for When Your Custom Facebook Iframes Page Won't Display
How to Prepare Your Facebook Page for Timeline - PC World
Facebook Fan Page
FBML - How to Add a Share Button to Your Facebook Fan Page


Comments

  2. Luke says

    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?

    • Kim Woodbridge says

      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.

    • Tammy says

      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?

  3. Ajith Edassery says

    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

    • Kim Woodbridge says

      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.

  4. Tammy says

    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 :)

    • Kim Woodbridge says

      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.

  7. Tom Buchanan says

    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

      • Tom Buchanan says

        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

        • Kim Woodbridge says

          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.

  9. Keith Heustis says

    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!

    • Kim Woodbridge says

      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.

  10. Trisha says

    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.

  11. Nate says

    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!

    • Kim Woodbridge says

      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.

    • Kim Woodbridge says

      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.

  13. Sudeep says

    Dear Kim,

    I figured it out, my header div was eating my space out. Thank you for your help.

  14. Mark says

    Thanks Kim! It’s wonderful to have such a clear, concise explanation of the solution :-) You rock!

    Mark

  15. Thomas says

    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!

  16. Victoria says

    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

  17. Etienne says

    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 ???

      • Pavel Langweil says

        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…

  18. Jared says

    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.

  19. Andy says

    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

  20. Andy says

    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

    • Kim Woodbridge says

      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.

  21. Tim says

    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.

  22. Michael Tunnell says

    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.

  23. Tania says

    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

    • Michael Tunnell says

      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.

  24. Vajaah says

    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.

  25. Vajaah says

    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.

  26. Steve says

    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?

Trackbacks

Comments are closed. Please contact me for specific questions or subscribe to my newsletter.

(Anti) Social Development

Sign Up!


Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More

Follow Me

Pin It on Pinterest

asd

Sign Up!

Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More

You have Successfully Subscribed!