facebookページのコンテンツ幅 × 高さを可変にする

iframeを使ってfacebookページを作成した場合のデフォルトでの表示領域は520px × 800pxで、作成したコンテンツがそれをオーバーしてしまうと、自動的にスクロールバーが表示されてしまいます。
そのため、スクロールバーを非表示にし、作成したコンテンツによって表示領域が可変するように設定する必要があります。
　

【1】
facebookページのアプリケーション編集画面で設定を変更します。
左側の「Facebook integration」を選択し、「iFrameサイズ」で「Auto-resize」を選択(下画像)。

【2】
スクロールバーを非表示にします。
CSSに以下を記述。


body{
     margin: 0;
     overflow: hidden;
}

【3】
表示領域を可変にします。
HTMLの<head>〜</head>内に以下を記述。


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

HTMLの</body>直前に以下を記述。


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

表示領域を任意で指定する場合は【3】の10行目を以下のように変更します。
(幅: 600px、高さ: 1000pxで固定する場合)


FB.Canvas.setSize({ width: 600, height: 1000 });

2011/05/26 9:23 AM

http://fublicbox.com/technique/to-vary-the-height-of-the-facebook-page-created-by-iframe.html/trackback/