Thursday, May 31, 2012

How to remove scrollbars from Facebook iFrame application


I have created a facebook iframe application and set the dimensions to Auto Resize in the Facebook Application settings page but still a horizontal scrollbar is shown at the bottom in IE and Google Chrome. Works fine in Firefox. Any solution ?



Source: Tips4all

10 comments:

  1. It's explained how to do this here:
    http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html
    Basically you should use

    window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
    };


    plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying

    <html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
    <head>
    <!-- Header stuff -->
    </head>
    <body style="overflow: hidden">

    ReplyDelete
  2. You also need to start the timer to call autoresize code. In your applications HTML do:

    window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
    };


    Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:

    window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize(50);
    };


    If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:

    window.fbAsyncInit = function() {
    FB.Canvas.setSize();
    }


    You can even pass the desired size as parameter

    window.fbAsyncInit = function() {
    FB.Canvas.setSize({ width: 520, height: 600 });
    }

    ReplyDelete
  3. Might sound obvious, but have you tried CSS overflow: hidden on the iFrame?

    ReplyDelete
  4. I have had this problem in the past. While resizing might work, there is a maximum width on the Facebook canvas. It is likely that your body element has some kind of default padding / margin, and therefore it's box is bigger than the max width.

    Try using a reset style sheet that clears default styles: http://developer.yahoo.com/yui/3/cssreset/

    ReplyDelete
  5. Well, I will share some techniques collected from several resources that can be implemented to get rid of your unwanted scroll bars of your iframe facebook app. So, here is the first technique:

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
    <script type="text/javascript">
    function framesetsize(w,h){
    var obj = new Object;
    obj.width=w;
    obj.height=h;
    FB.Canvas.setSize(obj);
    }
    </script>
    </head>
    <body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
    <div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
    <div style="height: 2400px">
    //Your content
    //Goes here
    </div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    </body>
    </html>


    Using Latest Javascript Facebook SDK [Without using Body OnLoad]

    window.fbAsyncInit = function() {
    FB.init({
    appId : '142388952486760',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    FB.Canvas.setAutoResize(); //set size according to iframe content size
    };

    (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
    }());


    Using the Old Facebook Javascript SDK

    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
    <script type="text/javascript">
    FB_RequireFeatures(
    ["CanvasUtil"],
    function(){
    FB.XdComm.Server.init('/xd_receiver.html');
    FB.CanvasClient.startTimerToSizeToContent();
    }
    );
    </script>

    <script type="text/javascript">
    FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
    </script>

    ReplyDelete
  6. Horizontal scrollbars are always caused by the width of your HTML page being larger than the area of the iframe.

    Make sure you set the right width to your or containing .

    Set the width in your CSS file and set the overflow property.

    If it's a Tab iframe app you can set it like this:

    body{
    width:510px;
    overflow:hidden;
    }

    ReplyDelete
  7. I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.

    What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).

    I hope this help you.

    ReplyDelete
  8. Being frustrated about this problem of Firefox for a long time, finally found the best solution, which is here from Roses Mark. She proposed several ways, however only the body onload stably removes scrollbar in firefox 10.

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
    <script type="text/javascript">
    function framesetsize(w,h){
    var obj = new Object;
    obj.width=w;
    obj.height=h;
    FB.Canvas.setSize(obj);
    }
    </script>
    </head>
    <body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
    <div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
    <div style="height: 2400px">
    //Your content
    //Goes here
    </div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    </body>
    </html>

    ReplyDelete
  9. Apart from this code:

    window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
    };


    Also update Canvas Height setting in FB developer app settings:

    Set canvas height to Fixed instead of Fluid. This will remove horizontal and vertical scroll bars.

    ReplyDelete
  10. I found the perfect solution! Make sure to put the following CSS code into the <head> area:

    <style>*{margin:0;padding:0;}</style>


    The scrollbars are actually shown because there is a default padding or margin given. Hope I could help!

    ReplyDelete