Как изменить размер окна приложения Facebook iframe - PullRequest
Новая
       2

Как изменить размер окна приложения Facebook iframe

2 голосов
/ 12 августа 2011

У меня есть приложение на Facebook, которое запускается только через фан-страницу.Зайдите в приложение: 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

Ответы [ 2 ]

3 голосов
/ 12 августа 2011

Но я не знаю, как использовать эти коды в моем приложении и где их разместить?

Существует несколько способов сделать это, но только один: 

<!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, чтобы задержать его - исходя из опыта, который я обнаружил, 200 мс будет оптимальным: 

          window.fbAsyncInit = function() {
            FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
            window.setTimeout(
                function() {
                    FB.Canvas.setAutoResize();
                },
                200
            );
          };
1 голос
/ 08 марта 2013

Просто включите файл javascript SDK в ваш проект.

А затем, используя атрибут src тега script, включите указанный выше файл в файл 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>';                             
?>

Это установит размер вашего полотна на указанную ширину и высоту для всех веб-страниц в вашем приложении.

...