Question

我创建了一个Facebook应用程序，它将作为标签显示在我公司的粉丝页面上。该应用程序渲染为951px，因此它不适合粉丝页面选项卡的默认高度。我已经阅读了facebook的js sdk的可怕文档，并尝试了很多不同的变体 - 所有这些都根本不起作用。这是我目前尝试调整粉丝页面标签以适合我的应用程序...

<head>
    <!-- css / js / meta info here -->
    <script type="text/javascript">
        window.fbAsyncInit = function() {
            FB.Canvas.setSize();
        }
        function sizeChangeCallback() {
            FB.Canvas.setSize();
        }
    </script>
</head>
<body>
    <!-- content goes here -->
    <div id="fb-root">
        <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
        <script type="text/javascript">
            FB.init({
                appId:'xxxxxxxxxx',
                status:true,
                cookie:true,
                xfbml:true,
            });
        </script>
    </div>

</body>

我也尝试过async init并使用setAutoResize（）没有运气。

感谢您提出的所有建议...... 乙

Answer 1

<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
    FB.Canvas.setSize();
}
</script>
</head>

.
.
.
.

    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript">

    FB.init({
        appId: 'xxxxxxxx', 
        status: true, 
        cookie: true, 
        xfbml: true
    });

    /* Init fb Resize window */

    /* Completly removed now in JS SDK*/
    /* FB.Canvas.setAutoResize(7); */

    /* As of Jan 2012 you need to use */
    FB.Canvas.setAutoGrow(7);

    </script>
</body>
</html>

Answer 2

我花了一个多小时试图在我的应用中解决这个问题，我想提一下你有要遵循的几个基础知识。

在包含all.js文件之前和使用FB对象的任何JS代码之前，必须包含id为fb-root的div。
all.js文件应该包含在fb-root div下面，并且高于使用FB对象的任何实际JS代码
最后，任何使用FB对象的JS代码都应该在fb-root div之下，而all.js包含

我的代码中没有错误，但它拒绝工作，因为我在＆lt; head＆gt;中包含了all.js和我的JS代码。 element和我的fb-root div在＆lt; body＆gt;中。以下是我必须将其更改为：

...
<head>
<!-- include jQuery so we can use window.load below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
...
</head>
<body>
    <!-- the div has to come first which forces the JS include and code to be put below it -->
    <div id="fb-root"></div>
    <!-- then we have to include the all.js file -->
    <script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <!-- and finally we can use the FB JS SDK and it will actually work :) -->
    <script type="text/javascript" charset="utf-8">
        FB.init({
            appId: '...', 
            status: true, 
            cookie: true, 
            xfbml: true
        });

        jQuery(window).load(function(){
            //resize our tab app canvas after our content has finished loading
            FB.Canvas.setSize();
        });
    </script>
...

显然，我提到的3个元素并不一定要在彼此之后，但它们必须在源代码中按此顺序显示。这真的让我陷入了一个循环，所以希望这会节省一些时间和挫折：）

Answer 3

如果Facebook可以计算您网页的高度，通常会有效。但是，如果您有响应式设计，这是不可能的。我正在使用一个使用jQuery来完成工作的hack来计算包装器div的高度，然后显式设置它：

FB.Canvas.setDoneLoading( function(result) {
    FB.Canvas.setSize({height: $('#wrapper').height() });
});

这应该放在你的FB.init（）方法中。

Answer 4

如果由于某种原因设置了window.name，则FB.setAutoSize将无效，http://bugs.developers.facebook.net/show_bug.cgi?id=19720 在我的情况下，它以某种方式连接到jquery $ .data

    window.fbAsyncInit=function(){

        FB.Canvas.setSize = function(b) { 
            if (typeof b!="object") 
                b={};
            b=b||{};
            if (b.width==null||b.height==null)
                b=FB.copy(b,FB.Canvas._computeContentSize());
            b=FB.copy(b,{frame:'iframe_canvas'});
            if (FB.Canvas._lastSize[b.frame]) {
                var a=FB.Canvas._lastSize[b.frame].height;
                if(FB.Canvas._lastSize[b.frame].width==b.width&&(b.height<=a&&(Math.abs(a-b.height)<=16)))
                    return false;
            }
            FB.Canvas._lastSize[b.frame]=b;FB.Arbiter.inform('setSize',b);
            return true;
        }

        FB.init({
            appId:APP_ID, //your app id (Numeric)
            status:true,
            cookie:true,
            xfbml:true
        });

        FB.Canvas.setAutoResize()
    };

Answer 5

我在使用jQuery和FB.setSize（）时找到了修复问题的解决方案 - 如果在$（function（）{}）之前设置vars定义（jQuery DOM就绪） - setSize不起作用。如果所有vars定义位于$（function（）{all vars HERE}）中 - setSize开始工作！

Answer 6

您可能需要等待加载图像。否则，FB.Canvas.setSize();可能会过早闪现而不包括图片大小。

使用jQuery：

$(window).load(function(){
  FB.Canvas.setSize();
});

Answer 7

如果您应用的内容网站具有不同的高度，则找到一种可以再次降低高度的解决方案。通常，高度容易增加，但不会再次降低到较小的位置。

<head>

<script type="text/javascript">
    window.fbAsyncInit = function()
    {
        FB.Canvas.setSize({ width: 810, height: 920 });  
        /*{ set here the needed site height }*/
    }
</script>
</head>

<body>

<div id="fb-root"></div>
   <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
   <script type="text/javascript">

   FB.init({
       appId: 'App ID', /*{ set here your App ID }*/
       status: true, 
       cookie: true, 
       xfbml: true
   });

  /* Init fb Resize window */

   /* Completly removed now in JS SDK*/
   FB.Canvas.setAutoResize(7); 

   /* As of Jan 2012 you need to use */
   FB.Canvas.setAutoGrow(7);

</script>
</body>

Answer 8

这是我初次化我的facebook应用程序的方式：

<div id="fb-root"></div>
<script type="text/javascript" charset="utf-8">
  window.fbAsyncInit = function() {
    FB.init({
      appId  : appId,
      status : true,
      cookie : true, 
      xfbml  : true  
    });
    // Additional initialization code such as adding Event Listeners goes here
    FB.Canvas.setSize({ width: 810, height: 620 }); // ******* THIS WORKS.
  };
  (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));
</script>

Answer 9

这是我使用的：

<head>
    ...
    <script type="text/javascript">
        function facebookInit(appId) {
            FB.init({
                appId  : appId,
                status : true,
                cookie : true,
                xfbml  : true
            });
        }

        function increaseIframeSize(w,h) {
            var obj = new Object;
            obj.width=w;
            obj.height=h;
            FB.Canvas.setSize(obj);
        }
    </script>
    <script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
</head>

<body>
    <script>
        increaseIframeSize(720,800);
        facebookInit(appId);
    </script>
    ...
</body>

Answer 10

我还注意到，如果禁用了用户的“安全浏览”设置，则setSize调用将失败。对于大多数人来说这可能不是问题，因为默认情况下启用该设置，但如果您遇到此问题并且现在有一个几乎光头（就像我一样），请在您正在测试的帐户上检查此设置用。

facebook：FB.Canvas.setSize无效

10 个答案: