Настройка высоты вкладок iframe для страниц профиля Facebook

Как известно, Facebook внедрил вкладки iframe для страниц. Я разработал приложение и добавил вкладку приложения на странице профиля, вкладка приложения открывается в iframe в соответствии с обновлением "iframe Tabs for Pages". Проблема в том, что высота страницы не регулируется и не удается удалить полосы прокрутки, чтобы отобразить полную страницу без полос прокрутки. Все решения, которые я нашел, работают для страницы холста Application, но не для страницы вкладки Application.

Как мы можем это сделать?

Ответ 1

Это довольно легко достичь. Вам необходимо настроить приложение на вкладке "Интеграция с Facebook" как IFRAME и размер кадра как "Автоматическое изменение размера".

Теперь, на вашем сервере, вы должны добавить следующий код перед тегом </BODY>:

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>

Это автоматически изменит размер. Это также помогает, если добавить тег переполнения: скрытый в тег BODY.

Ответ 2

Следующее руководство помогло мне решить одну и ту же проблему:

http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

Короче говоря, сделайте следующее:

Измените свой "IFrame Size" на "Auto-resize"
Загрузите SDK для Javascript в Facebook

добавьте следующий код непосредственно перед тегом </body> вашей индексной страницы:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

Использовать FB.Canvas.setSize()

Поместите следующий код перед тегом </head>:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Это должно сделать это, надеюсь, что это поможет!

Ответ 3

facebook недавно что-то изменила, теперь ваш файл табуляции также нуждается в методе fb.init. в противном случае изменение размера не будет работать. поэтому используйте это и на своей вкладке.

    <script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() 
{
    FB.init({ appId: 'YOUR APP ID', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});

    FB.Canvas.setAutoResize();
    FB.Canvas.setAutoGrow();
}
    </script>

Ответ 4

Обновлен код для всех, у кого есть проблемы:

1) Установите приложение "Высота холста" на "Жидкость".

2) Скопируйте + вставьте следующий код перед закрытием <body> тег.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  // Called when FB SDK has been loaded
  window.fbAsyncInit = function () {
    // Initialize the FB javascript SDK
    FB.init({
      appId: '[YOUR APP ID]',
      status: true,
      cookie: true,
      xfbml: true
    });

    // Auto resize FB Canvas
    FB.Canvas.setAutoGrow();
  };

  // Load the FB SDK Asynchronously
  (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>

Ответ 5

Эй, ребята... У меня также были проблемы с этим... Я пробовал множество решений и предложений, и они никогда не работали для меня. После того, как я сменил jQuery-библиотеку 1.6 на 1.5.1, она сработала. Проверьте, не является ли это вашей проблемой.

Теперь я пытаюсь понять, почему, черт возьми, он не работает с версией 1.6 jquery.

Ответ 6

Для тех, кто, как я, который пробовал все вышеперечисленное безрезультатно, вот что, наконец, помогло мне. С этой страницы: https://www.facebook.com/note.php?note_id=10150149060995844

До </head>:

<script type="text/javascript">

window.fbAsyncInit = function() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

// Do things that will sometimes call sizeChangeCallback()

function sizeChangeCallback() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

</script>

Затем перед </body>:

<script type="text/javascript">

                FB.init({
                    appId: 'XXXXXXXXXXX', //Your facebook APP here
                    status: true, // check login status
                    cookie: true, // enable cookies to allow the server to access the session
                    xfbml: true// parse XFBML
                });

        </script>