Facebookページのスクロールバーを消す方法の改良版

2011年5月17日

※jQueryのやり方ではなくFB.Canvas.setAutoResize();の方法がよりスマートです。
FB.Canvas.setAutoResize();が廃止となり、FB.Canvas.setAutoGrow();を使うようになったみたいです。

以前書いた記事Facebookページ作成についての覚書にてJavascriptSDKを使ってiframeのページの高さを調整してスクロールバーを消すやり方のページの方法をご紹介しましたが、コンテンツの内容が変わるたびに高さの設定をしないといけないので、ページの高さを自動で取得して代入するやり方を考えてみました。

FB.Canvas.setAutoGrow();を利用する方法

アプリ作成時にiFrameサイズの設定をAuto-resizeにチェックします。読み込ますFacebookページに下記JSをheadに外部読み込みします。

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>

bodyタグの直後に下記タグとJSを記入

<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : 'アプリケーションID',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoGrow();
</script>

jQueryを利用する方法

jQueryの.height();を利用するので、head内でjQueryを読み込んでおいてください。

<script type="text/javascript" src="jquery.js"></script>

iframe版 Facebookページのスクロールバーを消す方法で記載されている以下のコード部分を

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

以下のコードに書き換えれば完了です。

<div id="fb-root"></div>
<script>
$(window).load(function(){
var pageHeight = $(document).height();
FB.Canvas.setAutoGrow({ width: 520, height: pageHeight });
});
</script>