Facebook Set Auto Grow – A version that actually works

Edit October 25th, 2013

This is some updated code that I’ve found recently that works a bit better.

//The 100 value can be anything, Facebook will detect the height of the body element

view raw


hosted with ❤ by GitHub

It can be triggered on load, or on an event. Theres no need for the setTimeout()… code any longer.

One the hard things about Facebook App development is debugging weird Facebook API issues.

One of them is the inconsistent use of the FB.Canvas Javascript methods. Particularly FB.Canvas.setAutoGrow and FB.Canvas.setSize. The documentation explains that (either or both?) can be used ad hoc to resize the app iframe. Well that’s not exactly the case, as neither work when called after the initial page load.

Although hacky, this solution actually works.

<div id="fb-root"></div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
appId: 'APPID', // App ID
channelUrl: '//example.com/channel.html', // Channel File
status: true,
cookie: true,
xfbml: true
FB.Canvas.setSize({height: 1200});
setTimeout("FB.Canvas.setAutoGrow()", 500);

view raw


hosted with ❤ by GitHub

One thought on “Facebook Set Auto Grow – A version that actually works

  1. Thank you thank you thank you thank you! Hours of failure just ended in victory.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s