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の枠を縮めて画面内に表示させるのがもっとも良い手法かな～と思います。

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