FACEBOOKページのiframeの高さを縮める

 今日は、FACEBOOKページを制作する際に、iframeの高さを縮めて表示させる方法のご紹介です。

 FACEBOOKページのスクロールバーを消す方法については、たくさん記事が出ていますが、高さを縮める方法はそれほど情報がありません。

 もちろん、アプリ編集のページにキャンバスの高さを設定する項目があるんですが、動きませんでした。ですので、お役に立てればとコードを記載しておきます。

FACEBOOKページiframeの高さを縮めるコード

 次のコードを貼り付けます。

FB.Canvas.setSize({ height: 480 });

 貼り付ける場所は、次の位置です。

        <script>
            window.fbAsyncInit = function() {
                FB.init({appId: '0123456789', status: true, cookie: true,
                    xfbml: true});
		FB.Canvas.setSize({ height: 480 });
            };
            (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol +
                document.getElementById('fb-root').appendChild(e);
            }());
        </script>

記載のポイント

 FB.initのすぐ後ろに書けば動くはずです。私はこのコードで動きました。

なぜ、縮めるのですか?

 そう、素朴な疑問にお答えしましょう。
 FACEBOOKページでは、通常、スクロールバー表示を消す方法が一般的です。
 しかし、私が今回作成したページは、ajaxによってページ移動をさせています。また、FACEBOOKページは通常の810px対応にしつつ、モバイル用にリンクを貼って、そのページをモバイル用のメディアクエリーを使ったCSSで表示させる設定にしています。いわば、変則的なレスポンシブデザインと言ったところでしょうか。
 この手法では、ページを全て表示させてしまうと、ajaxを使ったページ移動ができなくなるため、iframe枠を固定する方が見栄えがよいことになります。そこで、縦幅を縮める必要があるという訳でした。
 FACEBOOK用のSDKを勉強すればもう少し違うアイデアもあるのかも知れませんが、ajaxでページを上下させるためにはヘッダを固定しておく必要があるため、iframeの枠を縮めて画面内に表示させるのがもっとも良い手法かな~と思います。

 ご参考になさってください。