当前位置： 文江博客话题详情

facebook：FB.Canvas.setSize 不起作用

发布于 2024-11-15 04:03:41 字数 1020 浏览 5 评论 0原文

我创建了一个 Facebook 应用程序，它将作为选项卡显示在我公司的粉丝页面上。该应用程序以 951 像素呈现，因此不适合粉丝页面选项卡的默认高度。我读过 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() 但没有成功。

感谢您的任何和所有建议... 乙

原文

I have created a facebook app that will be displayed on my companies fan page as a tab. The app renders at 951px so it doesn't fit in the default height of the fan page tab. I've read facebook's horrible documentation for their js sdk and have tried so many different variations - all of them not working at all. Here's my current attempt to resize the fan page tab to fit my app...

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

I've also tried async init and using setAutoResize() with no luck.

Thanks for any and all suggestions...
B

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（10）

北音执念 2024-11-22 04:03:41
<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>

<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>
回复 原文
蛮可爱 2024-11-22 04:03:41

我刚刚花了一个多小时试图在我的应用程序中解决这个问题，我想提一下您必须遵循的一些基本知识才能使其发挥作用。

  • 在包含 all.js 文件之前以及使用 FB 对象的任何 JS 代码之前，您必须包含一个 id 为 fb-root 的 div。
  • all.js 文件应包含在 fb-root div 下方并位于使用 FB 对象的任何实际 JS 代码上方
  • 最后，使用 FB 对象的任何 JS 代码均应包含在 fb-root div 下方且 all.js include

没有我的代码中存在错误，但它拒绝工作，因为我在 中包含了 all.js 和我的 JS 代码元素和我的 fb-root div 位于 中。这是我必须将其更改为：

...
<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 个元素不必紧邻彼此，但它们必须按此顺序出现在源代码中。这真的让我陷入了困境，所以希望这能为某人节省一些时间和挫败感:)

I just spent over an hour trying to fix this in my app and I wanted to mention a couple of basics that you have to follow for this to work.

  • You have to include a div with an id of fb-root before you include the all.js file and before any JS code using the FB object.
  • The all.js file should be included below the fb-root div and above any actual JS code using the FB object
  • Finally, any JS code using the FB object should be below the fb-root div and the all.js include

There were no errors in my code, but it was refusing to work because I was including all.js and my JS code in the <head> element and my fb-root div was in the <body>. Here's what I had to change it to:

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

Obviously the 3 elements I mentioned don't have to be right after each other, but they do have to show up in this order in your source code. This really threw me for a loop so hopefully this will save someone some time and frustration :)

回复 原文
‖放下 2024-11-22 04:03:41

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

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

这应该放在您的 FB.init() 方法中。

It usually works if Facebook can calculate the height of your page. However if you have a responsive design this is not possible.
I am using a hack that does the job using jQuery to calculate the height of the wrapper div and then explicitly set it:

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

This should go in your FB.init() method.

回复 原文
思念绕指尖 2024-11-22 04:03:41

如果由于某种原因设置了 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()
    };

if for some reason window.name is set the FB.setAutoSize wont work, http://bugs.developers.facebook.net/show_bug.cgi?id=19720
in my case its connected somehow to 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()
    };
回复 原文
∞觅青森が 2024-11-22 04:03:41

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

I'm found the solution for fix issues when using jQuery and FB.setSize() - if you set vars definition before $(function(){}) (jQuery DOM ready) - setSize doesn't work. If all vars definition located inside $(function(){ all vars HERE }) - setSize starts working!

回复 原文
漫雪独思 2024-11-22 04:03:41

您可能需要等待图像加载。否则，FB.Canvas.setSize(); 可能会触发得太快并且不包含图像大小。

使用 jQuery：

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

You might need to wait for images to be loaded. Otherwise the FB.Canvas.setSize(); might fire too soon and not include image sizes.

With jQuery use:

$(window).load(function(){
  FB.Canvas.setSize();
});
回复 原文
绅刃 2024-11-22 04:03:41

如果您的应用程序的内容站点具有不同的高度，找到了再次降低高度的解决方案。通常，高度很容易增加，但不会再次降低到较小的位置。

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

Found a solution to reduce the height again if the content sites of your App have different heights. Usually the height increases easily but doesn't decrease to a smaller site again.

<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>
回复 原文
箜明 2024-11-22 04:03:41

这就是我初始化 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>

This is how I initialise my facebook applications:

<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>
回复 原文
纵性 2024-11-22 04:03:41

这是我使用的：

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

here is what I use:

<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>
回复 原文
画中仙 2024-11-22 04:03:41

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

I also noticed the setSize call fails if the user's "Secure Browsing" setting is disabled. This may not be an issue for most, since the setting is enabled by default, but if you're running into this issue and now have an almost-bald head (like I do), check this setting on the account you're testing with.

回复 原文
~没有更多了~

关于作者

西瓜

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

动次打次papapa

文章 0 评论 0

我是有多爱你

文章 0 评论 0

原来分手还会想你

文章 0 评论 0

linces

文章 0 评论 0

霓裳挽歌倾城醉

文章 0 评论 0

玍銹的英雄夢

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文