Friday, January 13, 2012

Height of Facebook custom Page Tabs

This is a quick tip: I am currently working on a Facebook app. I have a demo for a custom Page Tab. But somehow the height was not setting properly. The canvas height setting in the Developer setting was to Fluid. I have no clue where was the setting for Page Tab. Anyway after a little search I found that the following code works:


<div id="fb-root"></div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setSize({height: 1500});
</script>

I placed it at the bottom of my Application's custom Page Tab, before the end body tag. The height value is according to your needs. I am yet to look how this would work with flexible height (determined after iframe renders). Will update that later, for today this will do.

4 comments:

Anonymous said...

thank you, this is exactly what I was looking for!

Anonymous said...

If you have jQuery, you could use:

FB.Canvas.setSize({height: $(document).height()});

Otherwise, you could use:

FB.Canvas.setAutoGrow();

Mark Philips said...

Thank you very much for this script, works properly!

Anonymous said...

This did not work until I added the FB.init()

FB.init({appId: 'Your ID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({height: 1500});

Works great - Thanks

Post a Comment