Facebook 应用程序作为页面选项卡问题答案

【问题标题】：Facebook app as page tab problemsFacebook 应用程序作为页面选项卡问题
【发布时间】：2011-09-19 15:42:56
【问题描述】：

这几个月来一直把我逼疯了。我创建了一个应用程序，其唯一目的是显示我公司网站上为 facebook 定制的内容。

我们想要这样的东西：http://www.facebook.com/FarmersInsurance?sk=app_7146470109 但最后是这样的：http://www.facebook.com/DeltaFlexTravelers?sk=app_110411285713674

我无法摆脱该死的滚动条！我已经完成了此类问题的其他答案所暗示的一切，但无济于事。我使用 FB.Canvas.setSize() 明确设置宽度和高度。什么都没有。

我想知道在将内容显示为页面选项卡时 FB.Canvas.setSize() 是否不起作用。如果是这种情况，您如何摆脱显示为页面选项卡的应用程序上的怪异滚动条？

【问题讨论】：

此外，该应用程序正在通过 DNN 提供服务。不知道这是否是相关信息。

标签： facebook facebook-apps

【解决方案1】：

即使在 IE 中设置了宽度，我也会得到滚动条并截断内容。不得不将其减少到 510 像素。 520 是最大值，但不同的浏览器可能有不同的 dpi 设置。无论是那个还是 MS 都给了 IE 一个不同的像素定义。

【讨论】：

【解决方案2】：

尝试创建一个您想要大小的包装 div（默认为 520x800），然后将溢出设置为隐藏。迫使您在空间内进行设计，但为我摆脱了滚动条问题。您可能还需要为该 div 设置 margin:0,padding:0 。如果您需要更多详细信息，可以在我们构建的页面选项卡上查看http://facebook.com/xocialhost。随意查看源样式表，它是 HTML 5 样板的修改版本，我们为我们的 FB 应用程序定制了该样板。

【讨论】：

【解决方案3】：

你需要做两件事： 1. 使用 FB.Canvas.setSize()。作为一个额外的锤子，使用 setAutoResize 并有很短的延迟。 2.设置你的标签页CSS为overflow = hidden;

这里是 setSize 部分：

FB.Canvas.setSize();
}
  function sizeChangeCallback() {
  FB.Canvas.setSize();
}
FB.Canvas.setAutoResize(7);

这里是 CSS 部分：

body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

【讨论】：

【解决方案4】：

您是否尝试过设置尺寸？为了摆脱滚动条，我总是做两件事：

我的应用程序的容器总是 520px 宽度，并且有溢出：隐藏集
我使用 JS API 设置的选项卡高度总是比实际 HTML 高度大一点。

它总是对我有用...

这是我正在使用的代码：

window.fbAsyncInit = function() {

    if(typeof(FB) != 'undefined') {

        FB.init({
            appId: 111111111111111, xfbml: true, status: true, cookie: true, oauth: true
        });

        FB.Canvas.setSize({ width: 760, height: 1250 });
    }
};

(function() {
    var e = document.createElement('script');
    e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
}());

【讨论】：