如何调整facebook iframe应用程序窗口的大小


How to resize the facebook iframe application window

我有一个只能通过粉丝页面运行的facebook应用程序。
转到app: http://apps.facebook.com/imageassistant/(你应该有一个粉丝页面来检查这个)

我需要增加我的画布页面的高度尽可能多的固定宽度值(如果你运行我的应用程序,你会看到)

我有一个index.php文件,其中包括fbmain.php文件

//index.php
<?php
 include_once "fbmain.php"; // this file do all authentication parts
//some codes
?>  

我需要调整应用程序中所有页面的大小
我从facebook开发者页面找到了一些相关的代码

window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
  FB.Canvas.setSize();
}

FB.Canvas.setSize({ width: 640, height: 480 }); // Live in the past

但是我不知道如何在我的应用程序中使用这些代码,我应该把它们放在哪里?我把这段代码在每一个文件在我的应用程序?
我是否也需要更改开发者应用页面中的应用设置?(IFrame的大小显示滚动条或在此之前自动调整大小)
任何人都可以张贴完整的答案,包括我应该把它放在哪里?
注意:我使用php sdk

但是我不知道如何在我的应用程序中使用这些代码,我应该把它们放在哪里?

有很多有效的方法,下面只是其中之一:

<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <!-- YOUR HEADER CONTENT -->
    </head>
    <body>
        <div id="fb-root"></div>
        <!-- You Page Content HERE -->
        <script>
          window.fbAsyncInit = function() {
            FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
            FB.Canvas.setSize();
          };
          (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);
          }());
        </script>
    </body>
</html>

我把这段代码在每一个文件在我的应用程序?

如果你想让iFrame调整大小,那么你需要在每个页面中包含这种代码。

我是否必须更改我的开发者应用程序页面中的应用程序设置?

你需要在开发者应用中选择自动调整大小的选项。


如果你的内容的大小是动态的,你也可以考虑FB.Canvas.setAutoResize。

你也可能会遇到FB.Canvas.setSize过早触发的问题,在这种情况下,你可以使用setTimeout来延迟它-从经验来看,我发现200ms是最优的:

          window.fbAsyncInit = function() {
            FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
            window.setTimeout(
                function() {
                    FB.Canvas.setAutoResize();
                },
                200
            );
          };

只要在你的项目中包含javascript SDK文件。

然后使用script标签src属性将上述文件包含在index.php文件中,并在index.php中编写以下代码:

<?php
       echo '<script type="text/javascript"> 
        window.fbAsyncInit = function() {
            FB.init({appId:'Your AppID here', status: true, cookie: true, 
                        xfbml: true});
            FB.Canvas.setSize({ width: 640, height: 720 });
          };
    </script>';                             
?>

这将设置你的画布大小为所有指定的宽度和高度