2011-11-10 5 views
0

私はFacebookのアプリ用に流体キャンバスを実装しようとしていました。私は私が私のアプリを初期化しますが、それはまだ800ピクセルに設定された直後にスクリプトをsetAutoGrowでキャンバスの長さを設定する

window.fbAsyncInit = function() { 
FB.Canvas.setAutoGrow(); 
} 

を使用しています。どのように私はこの機能を使うべきですか?

+0

まあ...私は現在、私のアプリケーションをfacehostのlocalhostからテストしていると付け加えたいと思っています。 –

答えて

0

このページを参照してください:

https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/

「あなたはあなたのコンテンツのサイズを変更することがわかっている場合、この機能は便利ですが、あなたがたときに知らないわずかな遅延がありますので、あなたならば。あなたのコンテンツのサイズが変わったときを知っているなら、setSizeを自分で呼び出す必要があります。あなたは、高さを増加させ、いくつかのjavascript機能を持っている場合

だから、あなたはそれ以外の場合はsetAutoGrow、setSizeメソッドを呼び出すことができますし、その後、流体キャンバスを使用しようとしている場合は長いか短い

+0

もう一度やり直しましたが、運がまだありません! –

0
Try with following.It will auto resize your iframe. 

<html> 
<head> 
<script src="./includes/js/jquery.min.js"></script> 
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
<script type="text/javascript"> 

window.fbAsyncInit = function(){ 
FB.init({appId: 'appid', status: true, cookie: true, xfbml: true}); 
FB.Canvas.setAutoResize();}; 
function setSize(){ 
FB.Canvas.setAutoResize();} 

</script> 
</head> 
<body style="overflow: hidden" onload="setSize()"> 
+0

私はそれを試みることができますが、[setAutoResize()](http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/)は来年から時代遅れになると書かれています。だから私はsetAutoGrow()に固執する必要があります... –

0

interva指定しますiframeのサイズを設定する必要はありません。 FBにバグがあるので、実際に呼び出すべきではありません。流体に設定されている場合、iframeの呼び出しは何もしません。実際はそうではなく、呼び出しは処理されます。ここでは、この反対ログインバグがあります:http://developers.facebook.com/bugs/272509486115193が、FBは(ずっと私の迷惑に!)、この優先度の低いとみなされている

流体が正常に機能し得るために、ここでのドキュメントを確認してください。https://developers.facebook.com/blog/post/549

あなたがする必要があります。上記のリンクされたドキュメントページの手順に従って、ページのコンテンツコンテナの高さが100%に設定されていることを確認してください。

1

</body>タグの前に、次のコードを記述しました。

<div id="fb-root"></div> 
<script type="text/javascript"> 
      window.fbAsyncInit = function() { 
       FB.init({ 
        appId: '<?php echo YOUR_APP_ID ?>', 
        cookie: true, 
        xfbml: true, 
        oauth: true 
       }); 
       FB.Canvas.setAutoGrow(true); 
      }; 
      (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> 

それは私のためにうまくいきます。

アドバンストアプリケーション設定でheightFixed or Fluidであるかどうかは関係ありません。

FB.Canvas.setAutoGrow(true);は私のアプリケーションでは機能しませんでしたが、<div id="fb-root"></div>コードが見つかりませんでした。私はちょうど<script type="text/javascript">の前にそれを入れて、問題を解決しました。

2

あなたのコードからhttpまたはhttpsを削除してみてください。ここでは鉱山が(ChannelUrlラインに注意してください):私は、HTTP/HTTPSを削除

<div id="fb-root"></div> 
    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript"> 
    window.fbAsyncInit = function() { 
     FB.init({ 
     appId  : 'YOUR_APP_ID', // App ID 
     channelUrl : '//WWW.YOURURL.COM/FOLDER', // Channel File  
     status: true, 
     cookie: true, 
     xfbml: true 
     }); 
     FB.Canvas.setAutoGrow(); 
    } 
    </script> 

した後、それはすべてのブラウザで働いていました。

関連する問題