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

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

19 голосов
/ 15 февраля 2011

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

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

Ответы [ 6 ]

21 голосов
/ 02 марта 2011

Это довольно легко достичь. Вы должны настроить приложение на вкладке «Интеграция с 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>

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

14 голосов
/ 05 апреля 2011

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

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

Короче говоря, выполните следующие действия:

  • Измените «Размер IFrame» на «Авторазмер»

  • Загрузить Javascript SDK 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>

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

9 голосов
/ 13 апреля 2012

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>
6 голосов
/ 01 ноября 2012

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

1) Установите для приложения «Высота холста» значение «Жидкость».

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

<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>
2 голосов
/ 20 мая 2011

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

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

0 голосов
/ 29 января 2013

Для тех, кто, как я, попробовал все вышеперечисленное безрезультатно, вот что наконец-то сработало для меня. Взято с этой страницы: 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>
...