【问题标题】:FB app into Tab not getting more than 520px widthFB 应用程序进入选项卡的宽度不超过 520 像素
【发布时间】:2014-07-21 06:54:58
【问题描述】:

我正在测试一个应用程序,当不在页面的选项卡上时它很好。我需要它比 520px 更宽。 首先,这是设置合适高度的html代码。

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));

没关系,高度设置正确,可以看到是应用的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>

现在,如果我们在应用加载到页面(作为选项卡)后检查相同的iframe,结果如下。

<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>  

如您所见,自动设置了 520 像素的宽度。
我尝试将 Canvas Fixed Width 属性更改为 YES,因此应用程序的宽度设置为 760 像素,但我仍然得到 520 像素的宽度。

另外,我尝试在代码FB.Canvas.setSize({ width:760, height: 1100 }); 中强制使用宽度的像素,但它仍然停留在 520 像素中。

您可以在此处单独查看应用程序,也可以将其作为选项卡查看。
谢谢。

TAB
Alone

PS。不确定这是否有价值,但我使用的是fbootstrap,它有一个 760/520 像素的网格系统,但我认为这与 fb 的 iframe 本身无关。

【问题讨论】:

    标签: facebook iframe facebook-tabs


    【解决方案1】:

    在应用设置中检查页面选项卡的设置,您将其添加为“平台”(https://developers.facebook.com/apps/[your-app-id]/settings/)。有一个带有以下文本的开关:“Wide Page Tab?”将该选项切换为“是”,您的选项卡应为 810 像素。

    【讨论】:

    • 谢谢,它就在那里。躲在树后看不到树林!再次感谢。
    猜你喜欢
    • 1970-01-01
    • 2016-07-15
    • 1970-01-01
    • 2012-03-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多