Remove Scroll Bars from Facebook Page iFrame Tabs

CLARIFICATION on set up tab app After f8:

Set up your tab app correctly

Select iframe as tab application

Do not declare FB more than once. FB.init({appId: ‘your app id’, status: true, cookie: true, xfbml: true}); should be delcare only once for your tab.

UPDATE After f8:

FB.Canvas.setAutoResize is now FB.Canvas.setAutoGrow();
Select the Canvas Width “Canvas Fixed (760px)” and Canvas Height “Settable (Default: 800px)”

The new code to remove scroll bar

<body scroll="no" style="overflow:hidden">
<div id="fb-root"></div>
<script type="text/javascript">
   window.fbAsyncInit = function() { 
   		FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true, oauth: true});
	window.setTimeout(function() { 
		FB.Canvas.setAutoGrow(); }, 250); 
	}; 
	
	(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>

Recently I developed a Facebook tab app. I decided to use iFrame instead of FBML. But when I view the tab page, I saw the two scroll bars. First I thought it was for width of my HTML. I changed everything to 518px. Even then I saw the scrollbars. Then I saw the iFrame attributes using Firebug, I saw Facebook is putting 800px as height. So if the height is more than 800px it will show a vertical scroll bar for that vertical scrollbar and  it will  show another horizontal scrollbar for that vertical scrollbar. Now I am a bit lost. Why would Facebook limit it to 800px. Then I found the FB.Canvas.setAutoResize(). Here is the full code how you can do this. You can see this code on action HERE

The code bellow does not work anymore. You should use the code shown in UPDATE After f8:.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
	FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
	window.fbAsyncInit = function() {
	  FB.Canvas.setSize({ width: 520, height: 850 });
	}
</script>
you code here
</body>
</html>

About Zakir Hyder

This entry was written by .

15. March 2011 by Zakir Hyder
Categories: Facebook, Social Networking Application Development, Tab | Tags: , , , | Comments

Comments

  1. Nilesh says:

    Great! It worked for me. I like this. Hope I too will share my experience sometime in future. Please keep it up.

  2. Zakir Hyder says:

    I am glad that my post helped you.

  3. Pallavi says:

    I am trying this.. but cant see any result.. Actually I want to increase the width of the canvas for my application.. how to do this? I am stuck.. any help?

  4. Pallavi says:

    you can check here .. I am trying to do something like this …
    http://apps.facebook.com/freegifts/?ref=ts

  5. Zakir Hyder says:

    If you give the actual height, then it should show the full height. But if you dont know or may be your app increases height for some reason, you can use
    FB.Canvas.setSize(); instead of giving the parameter.

    Or you can use

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

  6. Sudeep says:

    Dear Zakir,

    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

  7. Zakir Hyder says:

    Sudeep,
    I went to your fb page and open the url in another tab which is http://rankgetter.com/demo/facebook/E-Zone/Ezone1.php?ignore=1. when i saw your code, i found that your script=” code is looking like this script=? . now for this you js call is not working. also you did not add the FB’s js to your HTML. now with out adding the js of FBB you dont expect to the setSize() to work, do you? Read the post again.

  8. Sudeep says:

    Dear Zakir,

    I did not expect your reply so soon so I was tweaking with other options. I have now restored your version kindly check it now.

    Thanks,

  9. Sudeep says:

    Also when I removed “?” It is asking for ur URL must include ? or / symbol.
    Actually this resizing code was working perfectly with previous applications like https://www.facebook.com/JustInternationalSchools?sk=app_190478954328081
    I don’t know what happened know.

  10. Zakir Hyder says:

    just use script = ” you have utf problem. see page in firefox you will see

  11. Zakir Hyder says:

    You should read post and do accordingly — don’t expect some to spoon-feed you. 🙂

  12. Sudeep says:

    I have resolved the canvas page “?” issue by just calling the application directory rather than application url(/.php) itself.
    But I don’t understand UTF issue, you are talking can you explain little bit? and at what line error is?

  13. […] Facebook introduce iframe in their platform – many issues have risen. On of them was scroll bar and to scroll to top. To understand scroll to top problem- suppose the first page of you […]

  14. […] Facebook introduce iframe in their platform – many issues have risen. On of them was scroll bar and to scroll to top. To understand scroll to top problem- suppose the first page of you […]

  15. Viktorvogh says:

    Worked fine for me aswell. Thanks! +1!!

  16. Brent says:

    the new code works for me. I can’t thank you enough for sharing!

    brent
    @
    mimoYmima.com

  17. Zakir Hyder says:

    You are welcome Brent

  18. Justin says:

    Perfect worked a treat. Thanks for sharing.

  19. Ishaan says:

    Hi,

    This is not working for me at all..Really tired trying everything…

    Please help..
    App Page: http://www.facebook.com/pages/Ethics-Plus-Public-Accountants/109094399149313?sk=app_221372031268913

    Page Loading from: http://theconcern.in/ethicsplus/

    Thanks in advance..

  20. Zakir Hyder says:

    Hi,

    See the image link. You are declaring two FB.init – so the last FB.ui call is working which is not right. So what you need to do it replace the “code 2” with “code 1” mention in the image. Then remove the “code 1” section.

  21. Ishaan says:

    Thanks for the quick reply, I tried that..its still not working..

    Dont know whats wrong with this…

  22. Zakir Hyder says:

    add this FB.Canvas.setAutoGrow(); before window.setTimeout(function() {. should work

  23. kesar says:

    Hi Zakir Hyder,

    I followed your steps. Still its not working for me. I spent the time too much on this. Can u help me what is the problem in my app
    https://apps.facebook.com/newsdrink/

    window.fbAsyncInit = function() {
    FB.init({
    appId : ‘237250456345877’, // App ID
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    oauth : true, // enable OAuth 2.0
    xfbml : true // parse XFBML
    });

    window.setTimeout(function() {
    FB.Canvas.setAutoGrow(); }, 250);
    };

    (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); }());

  24. Zakir Hyder says:

    Have you set canvas app width & height as fixed ans settabel? on you page i see a lot of api calls – all of the app call is necessary?
    also try this

      window.fbAsyncInit = function() {
           FB.init({appId: ”, status: true, cookie: true, xfbml: true, oauth: true});
           FB.Canvas.setAutoGrow();
       };

     // Load the SDK Asynchronously
     (function(d){
        var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
        js = d.createElement(‘script’); js.id = id; js.async = true;
        js.src = “//connect.facebook.net/el_GR/all.js”;
        d.getElementsByTagName(‘head’)[0].appendChild(js);
      }(document));    

  25. kesar says:

    I tried above code with height and width fixed but no luck for me.

    In my app once page loded, i make call to my server for content through ajax and display the response text(this text is very big).This is causing any problem.

    And In canvas app width = fuild & height = fixed because if i put width fixed my text cutting.

    Can help me

  26. Zakir Hyder says:

    without setting width = fixed setAutoGrow wont work

  27. kesar says:

    Now i put the both are fixed. can u look at the my app

  28. Zakir Hyder says:

    i dont see any scrollbars BTW thw welcome div’s width: 900px; so the width will be cut off. If you want use whole width then follow this https://developers.facebook.com/docs/fluidcanvas/

  29. Arto Kaihola says:

    It’s working perfectly, thanks mate!

  30. atomiku says:

    Thanks for the article – I may link to this from my blog. I found the best method for removing scrollbars is using body {overflow:hidden;} – setAutoGrow can cause problems on certain browsers by the way, if you call it before the DOM has loaded.

  31. Zakir Hyder says:

    If you the post i have described about overflow:hidden;}

  32. bluepicaso says:

    Thank you after 10 hours fo search, finally you saved me.
    Finally i removed the scroll bars