JavaScript SDK で iframeの高さを変更する
前回の記事では、iframeで外部サーバーのHTMLをFacebookページに読み込み、ウェルカムページとして表示しました。通常のWebサイト制作と同様にコーディングできるので、Web制作者にとっては手軽な方法といえます。
ただ、iframeは設定している表示領域サイズを超えるとスクロールバーが表示されます。Facebookページの場合、スクロールバーを非表示にするには、iframe内に表示するコンテンツを幅520px×高さ800px以内に収めなければなりません。
高さ800pxを越えるとスクロールバーが表示される
Web Professionalのウェルカムページは、幅520px×高さ1077pxありますので、そのまま読み込むと縦方向のスクロールバーが表示されます。そこで、Facebookが提供している「JavaScript SDK」※を使ってiframeの高さを変更し、スクロールバーを非表示にしましょう。
まず、Facebookの「開発者/マイアプリ」のページからアプリの設定を編集します。Facebook IntegrationのCanvasにある「iFrameサイズ」のラジオボタンを「Show scrollbars」から「Auto-resize」に変更します。
iFrameサイズを「Auto-resize」にする
続いて、iframeで呼び出されるHTMLに、FacebookのJavaScript SDKを読み込みます。以下のコードをhead要素とbody要素に追加します。
■head要素内の記述
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> <script language="JavaScript"> FB.init({ appId: 'アプリID', status: true, cookie: true, xfbml: true }); // ここまでが JavaScript SDK を使うための準備（初期化） // ここから iframe のサイズを変更するための記述（FB.Canvas.setSize） window.fbAsyncInit = function() { FB.Canvas.setSize(); } // Do things that will sometimes call sizeChangeCallback() function sizeChangeCallback() { FB.Canvas.setSize(); }
※「appId: ‘アプリID’」には、読み込み元の「アプリID」を入れて下さい。
■body要素内の記述
<div id="fb-root"></div> <script> FB.Canvas.setSize({ width: 520, height: 800 }); </script>
height: 800の値は、表示したいコンテンツの高さにします。複数のJavaScriptファイルを読み込む場合は、head要素に追加した<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>が一番最初に読み込まれるようにしてください。
以上で、設定した高さの範囲でスクロールバーが表示されなくなります。
※SDK＝Software Development Kitとは、Facebookアプリの開発を助ける技術文書やツール等をまとめたもの。Facebookでは複数のプログラム言語向けのSDKが用意されており、JavaScript SDKはJavaScript開発向けに提供されているSDK。
