Приложение Facebook iFrame - избавляемся от вертикальных полос прокрутки?

ProgramBox

Приложение Facebook iFrame — избавляемся от вертикальных полос прокрутки?

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#php #facebook #iframe #scrollbar #facebook-iframe

#php #Facebook #iframe #полоса прокрутки #facebook-iframe

Вопрос:

Я преобразовал приложение Facebook из FBML в iFrame (с PHP SDK), и теперь вертикальные полосы прокрутки отображаются для того же объема контента, который у меня был раньше (логотип, флеш-игра и строка с 3 ссылками ниже). Но раньше у меня не было никаких полос прокрутки.

Если я установлю в приложении параметр автоматического изменения размера, то нижняя часть содержимого вообще не будет отображаться — что плохо, тогда флеш-игра неиграбельна.

Я поискал, и все предлагаемые решения включают Javascript, но на самом деле я использую PHP SDK. Разве нет решения только для PHP / CSS?

Ниже мой текущий код:

 <?php

require_once('facebook.php');

define('FB_API_ID', 'XXX');
define('FB_AUTH_SECRET', 'XXX');

$facebook = new Facebook(array(
            'appId'  => FB_API_ID,
            'secret' => FB_AUTH_SECRET,
            'cookie' => true,
            ));

if (! $facebook->getSession()) {
    printf('<script type="text/javascript">top.location.href="%s";</script>',
        $facebook->getLoginUrl(
                array('canvas'    => 1,
                      'fbconnect' => 0,
                      #'req_perms' => 'user_location',
        )));
    exit();
} else {
    try {
        $me = $facebook->api('/me');

        $first_name = $me['first_name'];
        $city       = $me['location']['name'];
        $female     = ($me['gender'] == 'male' ? 0 : 1);
        $avatar     = 'http://graph.facebook.com/' . $me['id'] . '/picture?type=large';

    } catch (FacebookApiException $e) {
        exit('Facebook error: ' . $e);
    }
}

# print the logo, the flash game and 3 links

?>

Также я не уверен, должен ли мой PHP-скрипт печатать

 <html>
<body> 
.....
</body>
</html>

? В настоящее время я печатаю только то, что находится внутри тела.

И мне интересно, хорошая ли идея заменить top.location.href=…. в моем коде на заголовок PHP(‘Location: ….’);?

Ответ №1:

Если вы собираетесь использовать асинхронный метод, рекомендуется поместить в него как можно больше кода FB. Должно сработать что-то вроде приведенного ниже:

 <html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
    FB.Canvas.setSize();
};

function sizeChangeCallback() {
    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>

Теперь вы будете вызывать sizeChangeCallback() функцию всякий раз, когда вносите изменения в макет (переход на новую вкладку, загрузка содержимого Ajax … и т.д.).

Ответ №2:

Хорошо, я нашел решение:

 <html>
<head>
<script type="text/javascript">
window.fbAsyncInit = function() {
        FB.Canvas.setSize();
}

function sizeChangeCallback() {
        FB.Canvas.setSize();
}
</script>
</head>
<body>
......

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
        appId  : '<?php print(FB_API_ID); ?>',
        status : true,
        cookie : true,
        xfbml  : true
});
</script>
</body>
</html>

и установите размер IFrame на автоматическое изменение размера на вкладке настроек.

И заголовок(‘Location: ‘ . $url); не будет работать по какой-либо причине.

1. 1) header не будет работать, потому что вы работаете внутри iframe 2) вы должны обернуть все связанные с FB функции JS внутри window.fbAsyncInit метода (я имею в виду здесь FB.init )

2. К сожалению, нет: я попробовал ваше предложение fbAsyncInit (исходящее от developers.facebook.com/docs/reference/javascript ?) и это не работает с Google Chrome: содержимое iframe просто обрезается внизу.

3. 1 за вашу настойчивость, я попробую ваше предложение позже, спасибо

4. И мне также интересно, является ли document.getElementById(), который вы предлагаете, хорошим выбором для всех браузеров. Google Chrome выводит предупреждение об этом в консоль. Может быть <script src=» connect.facebook.net/en_US/all.js «> на более безопасной стороне?

5. Многие браузеры жалуются на разные вещи, но я полагаю, что использовать его подобным образом безопасно, и это гарантирует, что функция изменения размера действительно будет выполняться при загрузке библиотеки JS. Если у вас это работает, скажите мне добавить это в качестве решения

Ответ №3:

Я только что собрал довольно обширный туториал в своем блоге, также используя PHP-SDK. Помимо избавления от этих полос прокрутки, я также показываю, как создать фан-гейт и простую кнопку Поделиться. Я надеюсь, что смогу помочь некоторым из вас, ребята, с этим:

http://net-bites.de/facebook/tutorial-how-to-create-facebook-iframe-pages-for-timeline-width-810px-with-fan-gate-and-share-button/

1. Хотя эта ссылка может дать ответ на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы только для ссылок могут стать недействительными, если связанная страница изменится.

Ответ №4:

Мое решение работает каждый раз! Сделайте ваше переполнение тела скрытым, прежде чем добавлять это.

 <div id="fb-root" class="fb_reset"><script async="" src="https://connect.facebook.net/en_US/all.js"></script></div>
   <script type="text/javascript">
       window.fbAsyncInit = function() {
           FB.init({appId: '293887700673244', status: true, cookie: true, xfbml: true, oauth: true});
           window.setTimeout(function() {
               FB.Canvas.setAutoGrow(); }, 250);
       };

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