Facebookページの縦スクロールバーを消すsetAutoResize()はsetAutoGrow()に

公開

(先月会社のFacebookウォールに書いた記事をより広めるために転載します。)

Facebookページの独自タブ(HTMLでオリジナルのFacebookページ)を作られている方にお知らせです。先日9月24日、Facebook開発者ブログの記事「Platform Updates: Operation Developer Love」にて、iframeの高さ調整に関するJavaScriptの仕様変更がアナウンスされています。

記事によると、現在iframeの自動高さ調整機能として「FB.Canvas.setAutoResize」が提供されていますが、コンテンツの高さが伸びた際は正しく調整できるものの、コンテンツの高さが縮まった際には高さが正しく調整できない問題があるようです。

そして、この問題の解決が難しいという結論に至ったことから、機能名が「FB.Canvas.setAutoGrow」に変更される事になったようです。現在提供されている「FB.Canvas.setAutoResize」は、2012年1月1日までのサポートとなるようです。

iframeの自動高さ調整機能をご利用なさっている方はJavaScriptの確認を行ってみてください。サンプルをご覧になりたい方は、こちらの某社(謎)Facebookページの「Welcome」タブをご覧いただければ...。

ちなみにちょっとしたTipsですが、下方向のmarginが設定されていると、ほんの少しだけしか移動できない縦スクロールが現れることがあります。「FB.Canvas.setAutoGrow」を使っているのに縦スクロールが消えないという方は、下方向のmarginを確認されると良いかと思います。

サンプルコード

<body>
<!-- Loading Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script type="text/javascript">
(function() {
 var d = document;
 var e = d.createElement("script");
 e.src = d.location.protocol + "//connect.facebook.net/ja_JP/all.js";
 d.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
 FB.Canvas.setAutoGrow();
};
</script>
<!-- End of Loading Facebook JavaScript SDK -->