facebook:FB.Canvas.setSize无效

Question

facebook:FB.Canvas.setSize无效

我创建了一个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>

Run Code Online (Sandbox Code Playgroud)

我也尝试过async init并使用setAutoResize()没有运气.

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

Answer 1

Waq*_*gir 16

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

Run Code Online (Sandbox Code Playgroud)

还要查找你的JS错误,如果js中有一些错误,它将无法正常工作 (2认同)
还要查找您的应用程序设置，您现在可以将 iFrame 的高度 800px 更改为 Anypx。 (2认同)

Answer 2

Kit*_*ita 7

我花了一个多小时试图在我的应用程序中解决这个问题,我想提一下你必须遵循的几个基础知识才能实现.

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

我的代码中没有错误,但它拒绝工作,因为我在<head>元素中包含all.js和我的JS代码,而我的fb-root div在<body>中.以下是我必须将其更改为:

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

Run Code Online (Sandbox Code Playgroud)

显然,我提到的3个元素并不一定要在彼此之后,但它们必须在源代码中按此顺序显示.这真的把我扔了一个循环所以希望这会节省一些时间和挫折:)

归档时间：	14 年，7 月前
查看次数：	21587 次
最近记录：	12 年，7 月前