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

Question

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

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

Answer 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.

Answer 2

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

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

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

• Измените свой "IFrame Size" в "Авто-изменение размеров"

• Загрузить Javascript для SDK

добавить следующий код непосредственно перед </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()

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

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

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

Answer 3

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

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

Answer 4

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> 

Answer 5

Обновленный код для вопросов каждого, имеющего:

1) Установите приложение «Canvas Height» на «жидкость».

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> 

Answer 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>