Site icon Tips Note by TAM

【Facebook】iframe版 Facebookページのスクロールバーを消す方法


 

Facebookページの作成で使われてきた「Static FBML」によるタブの新規追加が
来月、3月11日よりできなくなり、iframeでページを組み込む方法に変わります。
 

 

外部サーバの HTMLを読み込むため、通常のサイト制作と同じようにコーディングできるので
Facebookページをもっと手軽に作ることができるようになるのですが、
iframeを利用しているため、以下のキャプチャのように
規定のサイズを超えるとスクロールバーが表示されてしまいます。


 

 

iframe のサイズは
「幅:520px、高さ:800px」 *
なので、
スクロールバーが出ないようにするには、
このサイズ内に収まるように作ると
キレイに表示されます。

※「body { margin: 0; padding: 0; }」をかけた状態で調査。
 

 

でも、
そんな小さなワクに収まるようなコンテンツを
作っていてはおもしろくない!!

そこで、
スクロールバーを出さずにページを表示させるため、
JavaScript SDK を使用して
iframe の高さを変更する方法をご紹介します。
 

※2012年3月28日現在、こちらでご紹介した方法は IE でエラーが表示されてしまいます。  以下のページで別の書き方をご紹介していますので、ご参照ください。 http://tam-tam.co.jp/tipsnote/html_css/post3960.html https://www.tam-tam.co.jp/tipsnote/html_css/post25.html

 

 

(1) アプリの設定を変更

「開発者/マイアプリ」のページより
アプリの設定を編集します。

Facebook Integration の
Canvas 内 「iFrameサイズ」のラジオボタンを
Show scrollbars → Auto-resize
に変更する。


 

 

(2) 読み込む HTML に JavaScript SDK を追加
【head内】

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
    appId: 'XXXXXXXXXXXXXXX',
    status: true,
    cookie: true,
    xfbml: true
});
window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}
function sizeChangeCallback() {
  FB.Canvas.setSize();
}
</script>

【body内】

<div id="fb-root"></div>
<script>
  FB.Canvas.setSize({ width: 520, height: 800 });
</script>

※「appId: 'XXXXXXXXXXXXXXX'」は、アプリID に差し替えてください。
※「height: 800」の数値を、変更したい高さに変更。
※複数のJavaScriptを使用される場合は、
 <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script
 が一番最初に読み込まれるように記述してください。
 

 


 

スクロールバーが消え、指定した高さ分まで内容が表示されています。
この記述を使用することで、長ーーいページも作成できます。

「TAM顔ハメ」の mobile_app ページでも使用していますので、
参考にご覧ください。
http://www.facebook.com/KaoHame
 

 

こちらでご紹介しました情報は、2011年2月24日現在のものです。 仕様変更によりサイズ等が変わることも考えられますので、 今後のFacebookの公式発表に十分ご注意ください。