Facebookアプリで「HTTPS+OAuth2.0」の利用義務付けが始まります&setAutoResize()が使えなくなります

Facebookアプリで「HTTPS+OAuth2.0」の利用義務付けが始まります&setAutoResize()が使えなくなります

Posted at September 30,2011 12:03 AM
Tag:[Facebook, OAuth, SSL]

Facebookアプリで「HTTPS(SSL)+OAuth2.0」の利用義務付けが始まることと、setAutoResize()が使えなくなることについてのお知らせです。

1.「HTTPS+OAuth2.0」の利用義務付けについて

2011年5月に「Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ」でお伝えしたとおり、2011年10月1日よりFacebookアプリはHTTPS(SSL)とOAuth2.0の利用が必須となります。

HTTPSに対応するには、App on Facebook」の「Secure Canvas URL:」と「Page Tab」の「Secure Page Tab URL:」に「https://」で始まるURLを設定します。

Facebookアプリ

設定していないと、アプリを保存するときに次のような警告が表示されます。

Facebookアプリ

JavaScriptでOAuth2.0に対応する方法は、「FacebookのJavaScript SDKがOAuth 2.0サポート」を参照してください。

2.setAutoResize()について

Facebookアプリでスクロールバーを表示しないための手段としてsetAutoResize()を使っているケースが少なくないと思われます。当ブログでも以下の記事で解説しています。

FacebookのIFrameタブページでスクロールバーを消す方法

このsetAutoResize()が2012年1月1日より利用できなくなります、とFacebook開発者ブログでアナウンスされています。

Platform Updates: Operation Developer Love
Platform Updates: Operation Developer Love

記事では「setAutoResize()はsetAutoGrow()にリネームしてください」と書かれています。setAutoGrow()はすでに使えます。

ちなみにリネームの理由は次の通りです(間違ってたらすいません)。

setAutoResize()が正しく動作しないケースがあり、バグを修正したが、高さを正しく縮めることが難しいという結論に達しました。よって機能を正しく説明するためにsetAutoGrow()に変更します。正しく動作しない場合は、FB.Canvas.setSize()の利用を推奨します。

要するに「高さを縮めることが難しいので、高さを伸ばす意味の関数に変更します。この関数を使ってスクロールバーが表示される場合は代替手段を利用してください」ということみたいです。

問題なく動作している場合は単にリネームするだけですので、特筆すべきことはありませんが、ブログに掲載されているサンプルをこちらでも掲載しておきます。青色が変更部分です。

<html> 
  <head> 
    <title>FB.Canvas.setAutoGrow Example</title> 
  </head> 
 
  <body style="margin:0; padding:0; border:0; background-color:#555555;" > 
    <div id='fb-root'></div> 
    <script src="http://connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript"> 
      FB.init({
        appId  : 'YOUR_APP_ID',
        oauth  : true,
      });
 
      FB.Canvas.setAutoGrow();
 
      function growSize() {
        var height = Number(
          document.getElementById('myContent').style.height.split('px')[0])
          + 100;
        document.getElementById('myContent').style.height = height + 'px';
      }
    </script> 
    <div id="myContent" style="background-color:#FF0000; height: 100px;"> 
      <input type="button" value="Grow!" onclick="growSize();"/> 
    </div> 
  </body> 
</html>

サンプルの動作は「小粋空間」Facebookページの「setAutoGrow」タブから確認できます(そのうち削除します)。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)