2

FacebookアプリをFBMLからiFrame（PHP SDKを使用）に変換し、以前と同じ量のコンテンツ（ロゴ、フラッシュゲーム、以下に3つのリンクがある行）に対して垂直スクロールバーを表示できるようになりました。しかし、以前はスクロールバーがありませんでした。

アプリの自動サイズ変更を設定すると、コンテンツの下部がまったく表示されません。これは悪いことで、フラッシュゲームはプレイできません。

私は周りを検索し、提案されたすべてのソリューションにはJavascriptが含まれていますが、実際にはPHPSDKを使用しています。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のheader（'Location：....'）;に置き換えるのは良い考えではないかと思います。？

4

4 に答える 4

2

非同期方式を使用する場合は、できるだけ多くの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コンテンツをロードするなど）。

于 2011-05-09T16:28:14.713 に答える
0

わかりました、私は解決策を見つけました：

<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サイズ]を[自動サイズ変更]に設定します。

そしてheader（'Location：'。$ url）; なんらかの理由で動作しません。

于 2011-05-08T20:33:47.927 に答える
0

PHP-SDKを使用して、ブログに非常に広範なチュートリアルをまとめました。これらのスクロールバーを取り除くことに加えて、ファンゲートと単純な共有ボタンを作成する方法も示します。私はそれであなたたちの何人かを助けることができることを願っています：

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

于 2012-08-05T18:08:01.833 に答える
0

私のソリューションは毎回機能します！これを追加する前に、体をオーバーフローさせて隠してください。

<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>
于 2014-07-22T15:48:26.830 に答える