Facebook Canvas Auto Height

I was developing a canvas app on Facebook this week for a client, using the new timeline dimensions (810px wide). Annoyingly, Facebook seemed to ignore the height attribute I specified when I set up the tab, and promptly put all my content in an iframe 800px high.

I tried adding a height attribute to my opening div in my page. I tried amending the height in Facebook’s attributes too, but unfortunately no luck. The only thing I could think was to change the height onload. Luckily, a quick google came up with this article on stackoverflow which covers most of the code needed (specificially FB.Canvas.setAutoGrow())

Depending on your app/page, create: <div id="fb-root"></div> and immediately below it, put the following. you may need to tweak true/false depending on your circumstance.

window.fbAsyncInit = function () {
    FB.init({
        appId: 'YOURAPPID', // App ID
        channelUrl: '/channel.html', // Channel File
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true  // parse XFBML
    });
    FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content
};
// Load the SDK Asynchronously
(function (d) {
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
} (document));

window.fbAsyncInit = function () {

FB.init({

appId: 'YOURAPPID', // App ID

channelUrl: '/channel.html', // Channel File

status: true, // check login status

cookie: true, // enable cookies to allow the server to access the session

xfbml: true // parse XFBML

});

FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content

};

// Load the SDK Asynchronously

(function (d) {

var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];

if (d.getElementById(id)) { return; }

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js";

ref.parentNode.insertBefore(js, ref);

} (document));

Image Credit: neil banas

Leave a Reply