![](https://www.tam-tam.co.jp/tipsnote/wpdata/wp-content/uploads/2015/10/editor4.png)
【Facebook】iframe版 Facebookページのスクロールバーを消す方法
Facebookページの作成で使われてきた「Static FBML」によるタブの新規追加が
来月、3月11日よりできなくなり、iframeでページを組み込む方法に変わります。
外部サーバの HTMLを読み込むため、通常のサイト制作と同じようにコーディングできるので
Facebookページをもっと手軽に作ることができるようになるのですが、
iframeを利用しているため、以下のキャプチャのように
規定のサイズを超えるとスクロールバーが表示されてしまいます。
iframe のサイズは
「幅:520px、高さ:800px」 *
なので、
スクロールバーが出ないようにするには、
このサイズ内に収まるように作ると
キレイに表示されます。
※「body { margin: 0; padding: 0; }」をかけた状態で調査。
でも、
そんな小さなワクに収まるようなコンテンツを
作っていてはおもしろくない!!
そこで、
スクロールバーを出さずにページを表示させるため、
JavaScript SDK を使用して
iframe の高さを変更する方法をご紹介します。
(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