How To Make Facebook iFrame Tab Higher Than 800 Pixels?

Blog Projects
facebook

One of the best things to happen in Facebook development lately was to enable iframe application tabs. This was widely welcomed by developers. However many blog posts wrongly assumed there was a 800 pixel limit on the tab height. Behold, here is the 5000 pixel tab.

New Tab is iFrame Canvas Application

New tab works the same way as iframe canvas application. First load the JavaScript SDK. Easiest is to load it synchronously using a script tag (for production you want to load SDK asynchronously since it gives impression of faster loading page).

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    /* Resizing code will be here. */
</script>  

When JavaScript SDK is loaded you have access to FB.Canvas.setSize and FB.Canvas.setAutoResize methods. If you know the content size wont change later resize the frame only once when page loads.

FB.Canvas.setSize();

You can also pass the desired size as parameter.

FB.Canvas.setSize({ width: 520, height: 600 });

If content is dynamic and size might change tell Facebook to resize the iframe periodically.

FB.Canvas.setAutoResize();

Default is to try resizing every 100ms. If you want to force resizing more often you can pass desired interval as parameter.

FB.Canvas.setAutoResize(50);

Is There a Maximum Limit?

Quick search on Google did not reveal any browser limitation. Theoretically on 32 bit machines maximum page length would be 4 294 967 295 pixels. On 64 bit machines theoretical limit would be 8 446 744 073 709 551 615 pixels. Now I’m sure real limit is smaller but the bottom line is: there is enough pixels for marketers to create their next Facebook campaign…



When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

© 2013 Mika Tuupola.