Search code examples
facebookiframefacebook-tabs

FB app into Tab not getting more than 520px width

I'm testing an app and when not on a page's tab it's fine. I need it to be wider than 520px. First of all, this is the html's code for setting the proper height.

window.fbAsyncInit = function () {
        FB.init({
            appId: '1428427990741852', 
            status: true,
            cookie: true,
            xfbml: true
        });

        FB.Canvas.setSize({ height: 1100 });
    };

    // Load the FB SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));

That's OK, the height is properly set as you can see is the app's iframe

<iframe class="smart_sizing_iframe noresize" frameborder="0" scrolling="yes" id="iframe_canvas" name="iframe_canvas_fb_https" src='javascript:""' height="1100" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" allowfullscreen="" style="height: 1100px;"></iframe>

Now, if we check that same iframe after the app is loaded inside a page (as a tab), here's the result.

<iframe name="app_runner_fb_https53cc3ca1018792924747227" id="app_runner_fb_https53cc3ca1018792924747227" style="width: 520px; height: 1100px;" frameborder="0" src="https://s-static.ak.facebook.com/platform/page_proxy/hv09mZVdEP8.js#app_runner_fb_https53cc3ca1018792924747227" class="noresize"></iframe>

As you can see, there's the 520px width automatically set.
I have tried changing the Canvas Fixed Width property to YES so the app's width is set to 760px but I'm still getting a 520px width.

Also, I've tried forcing the width's px right in the code FB.Canvas.setSize({ width:760, height: 1100 }); but still, it's stucked in 520px.

Here you can see the app, alone by itself and as a tab.
Thanks.

TAB
Alone

PS. Not sure if this is of value but I'm using fbootstrap which has a 760/520px grid system but that I assume has nothing to do with fb's iframe itself.

Solution

  • Check the settings of the Page Tab in the App Settings, where you added it as "Platform" (https://developers.facebook.com/apps/[your-app-id]/settings/). There is a switch with the following text: "Wide Page Tab?" Switch that one to "YES" and your Tab should be 810px.