Facebook page alignment and removing the scroll bars

If you’ve read the previous post I did,¬†Tutorial on how to add HTML to facebook, you probably know now how to get your custom HTML into a facebook page. Once you do, you might see a slight problem, your page may be miss-aligned and may have scroll bars. This happens if your images or DIVs are bigger than 520 pixels wide. Sometimes your elements would be 520 pixels wide and it would still have scroll bars and look all messed up, this might also be because you may have a border on the outer DIV or an image. If you’ve checked everything and it is all within the 520 pixel width but the scroll bars are not going away, you may be in the category of pages which just do not play well with the iFrame and to remedy this I”ve been using some CSS and JavaScript to move things into place and get rid of the scroll bars.

UPDATE: Also try doing it this way, I am told things have changed since I wrote this post.

First of all make sure your opening HTML tag looks like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

The next thing you need to add to your page is the Facebook auto-size javaScript code. It goes right before the closing HEAD tag.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>  
       
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Then the last piece of code you need to insert goes before the closing BODY tag. Make sure to replace YOUR APP ID with your actual app ID.

<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, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML
});

sizeChangeCallback();
</script>

Now this is still not a guarantee that it’ll be perfect, there are a few bugs with auto-size function on facebook, so here is another piece of code to replace the first Facebook auto-size JavaScript code, it is an older and my own hacking of the code but it works on some of my pages.

Place this code right under the opening BODY tag:

<script src="http://connect.facebook.net/en_US/all.js"></script>

<script type="text/javascript">
    function sizeChangeCallback() {
    FB.Canvas.setSize();
 }
</script>

And then add this at the very bottom before the closing BODY tag replacing the previous code:

<script language="javaScript">
    sizeChangeCallback();
</script>

The problem with getting this auto size thing to work has been going on over a year now and Facebook has still yet to fix this issue once and for all… There are so many fixes out on the web but none of them work every time. You just about have to try different things until you find the one that works for you. In fact, I am working on a page right now that I can not, for the life of me, get to resize. I’ve tried all the hacks and nothing fixes it permanently. It’ll work one time and then you refresh and it puts the scroll bars back in.

Another thing that may work is resizing everything to 518px in width and sometimes even to 510px to get it to work.

Also you can specify a static length for the page to do away with the scroll bars but then you have to know how tall your page will be. Dynamic content will not work with this if it changes the height of the page.

To specify the height, place this code before the closing HEAD tag:

<script type="text/javascript">

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

</script>

And then add this code before the closing BODY tag:

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js"></script>

Experiment with these things and you might find a combination that works for you. Let me know in the comments if you find a better way to do this, I’d love to hear about it.

Good luck.

Author: Valik Rudd

Valik (Valiik) Rudd is an Internet entrepreneur. He develops new online businesses and creates new websites. His other passion is writing about the those things. Web Design Ideas blog is the outlet through which his ideas and web design tricks and tips get recorded and shared with others.

6 thoughts on “Facebook page alignment and removing the scroll bars”

  1. Thanks. I’m running into the mysterious way this has of sometimes working, sometimes not working, with no real explanation why.

    Have you dealt with also including the comments widget on a page? The page seems to autoresize before the comments box loads, and hence the comments area is cut off.

  2. Yes, this thing is still a live bug that Facebook has not fixed and it does sometimes work and some time doesn’t. I’ve noticed that a lot of times when I have other JavaScript on the page it will create problems like this.

  3. Thanks for the great tutorial.

    The code given in the second option has to be added in addition to the code given in the first option or code given in the first option and the second option have to be used together?

  4. Thanks for the post – I prefer to use FB.Canvas.setAutoGrow(100); instead of setSize though.. I think setSize is discouraged for this kinda thing in some cases. body{overflow:hidden;} will do wonders for removing the scrollbars instead of manually setting a width+height… I also wrote a blog post about getting a Facebook iframe to autosize. Can be read here if you don’t mind me dropping the link: http://atomiku.com/2012/02/remove-scrollbars-and-get-your-facebook-app-iframe-to-autosize-to-height-fb-canvas-setautogrow/

    Perhaps you can update your post with the new code, things have changed a little since! :) Thanks for the post.

Leave a Reply

Your email address will not be published. Required fields are marked *