Wednesday, February 16, 2011

How-to: Removing facebook Application i-frame scrollabars

A few days ago Facebook introduced i-frames for page tabs and as previously announced will be slowly fading away FBML for good. This is great news for coders starting new applications but not for many who invested a lot of time and money learning how to use FBJS and create FBML apps. Personally I have not been developing Facebook apps for long and already knew this was coming when i started out a couple of months ago.

So I've decided to port my FBML apps (that i was just about to go live with) to i-frame apps. The first problem that I encountered was making my i-frames to not have scroll-bars. So I'm going to explain how to get it done so that your i-frames work smoothly.

First make sure that you have set in your application settings under the Facebook Integration tab the option "IFrame Size" to "Auto-resize".

Then you should make sure you set your body and html tags to overflow hidden. This is important because otherwise you will get a temporary scrollbar while the page is loading which is less than pretty.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
    <head>
        <!-- Header stuff -->
    </head>
    <body style="overflow: hidden">

Then after your FB.init add:
FB.Canvas.setAutoResize(100);

Ending up with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
    <head>
  <!-- Header stuff -->
 </head>
 <body style="overflow: hidden">
 
  <!-- Your Content Here --> 
  
  <div id="fb-root"></div>
 <script type="text/javascript">  
   window.fbAsyncInit = function() {
    FB.init({
     appId: 'your_app_id', 
     status: true, 
     cookie: true, 
     xfbml: true
    });
    
    //this resizes the the i-frame 
    //on an interval of 100ms 
    FB.Canvas.setAutoResize(100);
 
   };
   (function() {
    var e = document.createElement('script');
    e.async = true;
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);   
   }());
  
  </script> 
 </body>
</html> 

So there you have it. You can basically use the above code as a starting template for all of of your i-frame apps and never worry about scrollbars again (hopefully).
Posted by Jumaru at 1:47 PM

23 comments:

  1. williamMarch 7, 2011 at 7:02 AM

    thanks very much - exactly waht I was looking for in my app... i just hope it handles my issue - as I was only seeing it in IE on my iframe fb app.... and not in ffox.

    ReplyDelete
  2. JumaruMarch 9, 2011 at 7:03 AM

    Well I was having the problem on Firefox and all the browsers when i was using the comments plugin, but it wasn't every time. Once every 4-5 page refreshes it would show the scrollbars for an instant before they disappeared. This solution fixed the problem for me though.

    ReplyDelete
  3. talaliloApril 14, 2011 at 4:26 AM

    Thank You very very very much

    ReplyDelete
  4. Jawad FarooqMay 1, 2011 at 5:09 AM

    I love you , great sharing, thanks

    ReplyDelete
  5. UnknownMay 10, 2011 at 2:57 AM

    Thank you it worked a treat!!!

    ReplyDelete
  6. UnknownMay 11, 2011 at 10:03 AM

    Hi, thanks for this great info, just started today creating tabs for facebook. this has saved some time for sure. One issue I noticed though is in Chrome (latest version) there is an immense white space below the iframe. I have checked my css and i have a container in the css, but its height is a set amount. I just checked with firebug and the issue seems to be this:

    iframe name="app_runner_4dcabe94614253943201240" id="app_runner_4dcabe94614253943201240" style="width: 520px; height: 2223px; " frameborder="0" src="http://static.ak.facebook.com/platform/page_proxy.php?v=4#app_runner_4dcabe94614253943201240"


    there seems to be a height set on the iframe, but its not coming from my css :-(

    Its only in chrome its happening, all others ok, even IE6. weird! is it something you have seen yourself?

    ReplyDelete
  7. JumaruMay 11, 2011 at 11:41 AM

    @justintheuk

    I haven't really had your problem before, other than the fact that the i-frame will have a minimum height of 800px no matter the content. Just checked some of my apps on chrome and the iframe height was set at 800 or more only if the actual content was higher.

    The i-frame size is changed by the size of the content automatically by facebook, so this large size would indicate that your content is actually that height.

    Are you logged in as a facebook user in all the browsers when you check? Maybe a differnce in rendering because of something like that. Do you have any social plugins? I've noticed the comments plugin sometimes causes trouble with the height.

    Maybe there is something in your css that you have missed, unfortunately I cant be of much help. It could even be a facebook bug (there are a ton of them). Debugging can be a pain with fb apps.

    I would suggest removing markup from your app until you find the culprit. Hope you can find the problem.

    ReplyDelete
  8. ThreeToedCrowJune 16, 2011 at 11:32 AM

    You Da Man!!!!

    I tell ya, I've been trying several different onload in the body tag junk as well as adding a simular "inferior" script code at the bottom.

    Your's worked 1st time!

    THX

    ReplyDelete
  9. markw0ngJuly 19, 2011 at 4:18 AM

    This was giving me loads of problems with my iFrame apps and nowhere I came across really posted a full solution. Thanks very much!

    ReplyDelete
  10. Ashish GaurAugust 3, 2011 at 11:01 PM

    thanks alot gr8 hack

    ReplyDelete
  11. Mike JewAugust 5, 2011 at 11:32 PM

    Sweet, this was the workaround I have been looking for after beating my brain on the subject. Thank you!

    ReplyDelete
  12. Max SchulzeAugust 9, 2011 at 12:29 AM

    Perfect solution! Thanks

    ReplyDelete
    Replies
    1. Frank MartinMarch 19, 2012 at 2:16 AM

      sir,
      i want to remove facebook timeline from my facebook like page.
      how can i ?
      thanks

      Facebook Developer | Facebook Developers

      Delete
  13. TMBrittonAugust 23, 2011 at 9:13 AM

    Finally, something that actually works!

    ReplyDelete
  14. LeeAugust 28, 2011 at 11:55 AM

    Awesome stuff 2 days of searching my code and it was that easy pmsl :)

    ReplyDelete
  15. MobiTopGun.comSeptember 18, 2011 at 3:26 PM

    Ditto to comments by Tim, markw0ng, Ashish Gaur, Mike Jew, Max Schulze, TMBritton, Lee !!!

    THANKS MAN !!!

    ReplyDelete
  16. FredRogersOctober 18, 2011 at 8:12 PM

    This doesn't seem to work on FF 6.xx

    It appears that iframe_canvas has a property of:

    scrolling="yes"

    Zynga's Adventure World has it set to "no" but I can't figure out how they did it. Any ideas?

    ReplyDelete
  17. NicoFebruary 9, 2012 at 10:43 PM

    I LOOOOVEEEE YOOUUUUU!! You save my life men! Muchas Gracias!

    ReplyDelete
  18. pageybmFebruary 29, 2012 at 8:23 PM

    Thank you, this is great worked perfectly!

    ReplyDelete
  19. VikramMay 1, 2012 at 11:34 PM

    Thanks sir its work!!!!!!!!

    ReplyDelete
  20. Zeeshan MalikJune 5, 2012 at 9:27 AM

    Thanks A lot. The solution totally worked perfect :) I had been suffering from past 2 days :( Different other solution worked but all were giving unpredictable scrollbars in ie6,ie7. To add misery my app target were old age people so ie support was must requirement. Just to add a point on above contribution:

    You cannot go scroll free in ie6. The above solution worked but the content was get truncated due to overflow hidden and iframe area didn't grew. So if you are facing such issue to give minimum support for ie 6 use following class. And add it in html and body tag. The below class will make overflow auto for ie 6 only for rest browsers it will be hidden.



    .overflow {
    overflow:hidden;
    _overflow:auto;
    }


    Thanks again really appreciate your effort in sharing nice post

    ReplyDelete
  21. AnonymousJuly 25, 2012 at 9:26 AM

    Thanks so much for this. Worked perfectly.

    ReplyDelete
  22. Danick GagnéApril 11, 2013 at 8:46 PM

    Just integrated it and works like a charm! Many thanks!

    ReplyDelete

Subscribe to: Post Comments (Atom)