Facebook Canvas APP (iframed) Автоматическое изменение размера

В последнее время возникает проблема с приложениями iframe для холстов Facebook. Я установил наши настройки на "автоматическое изменение размера" и внедрил правильный вызов FB JS для изменения размера высоты (чтобы избежать нежелательных полос прокрутки), но он, похоже, не работает.

У кого-нибудь еще была эта проблема или придумали решение?

Спасибо!

Эрик

Ответы

Ответ 1

До тега </body> я написал следующий код.

<div id="fb-root"></div>
<script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({
                    appId: '<?php echo YOUR_APP_ID ?>',
                    cookie: true,
                    xfbml: true,
                    oauth: true
                });
                FB.Canvas.setAutoGrow(true);
            };
            (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>

И он отлично работает для меня.

Не имеет значения, находится ли height Fixed or Fluid в настройках расширенного приложения.

FB.Canvas.setAutoGrow(true); не работал в моем приложении, но я обнаружил, что пропустил код <div id="fb-root"></div>. Я просто положил его перед <script type="text/javascript"> и решил проблему.

Ответ 2

Расширение на пару пунктов, отмеченных уже:

window.fbAsyncInit = function () {
        FB.init({ 
           appId: 'YOUR APP ID', 
           status: true, 
           cookie: true, 
           xfbml: true, 
           oauth: true 
        });
        FB.Canvas.setAutoGrow(true);
    };

Это позволит динамически изменять высоту приложений. Также может также помочь установить явную ширину в вашем CSS, например:

html {
   width: 760px;
   overflow: hidden;
}

Ответ 3

Роозбе находится на правильном пути с его ответом. Тем не менее, его код, скорее всего, приведет к ошибке (по крайней мере, в Firefox), поскольку упоминаются как старые, так и новые SDK (и они плохо взаимодействуют друг с другом).

Кроме того, просто использование нового SDK для регулировки высоты очень просто:

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function () {
        FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
        FB.Canvas.setSize({ height: 890 });
    };
    (function () {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    } ());
</script>

Доступна официальная документация здесь.

Ответ 4

FB.Canvas.setAutoResize будет устаревшим, и вы должны использовать FB.Canvas.setAutoGrow, поскольку он делает именно то, что вы хотите.

Ответ 5

Автоматическое изменение размера не работает. Это основная ошибка, которая еще не зафиксирована в facebook.

Однако здесь код работает для проблемы:

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
    </script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
  window.onload = function(){
    FB_RequireFeatures(['CanvasUtil'], function(){
      FB.CanvasClient.setCanvasHeight('1500px');
    });
  };
</script>

Ответ 6

Ну... автоматическое изменение размера является ошибкой и только иногда работает

вы можете установить его вручную следующим образом: FB.Canvas.setSize({height: $('body'). Height()});

Ответ 7

Если у кого-то все еще есть эта проблема, это потому, что ваш FB.init() никогда не вызывается. В моем случае у меня было это внутри моей функции jQuery document.ready. dont сделать это!

Поместите это вне вашего jQuery:

$(function() { ... jquery here... });

// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();