2011年8月23日火曜日

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

Facebookページをiframeでカスタマイズする場合は、ある程度のページ量をつくるとスクロールが表示されます。
Facebookのjavascript sdkを使うことでこれを解消することができます。

(1)読み込むページのhead部分に以下を追加
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
 FB.init({
  appId: 'アプリID',
  status: true,
  cookie: true,
  xfbml: true
 });
 window.fbAsyncInit = function() {
  FB.Canvas.setSize();
 }
 function sizeChangeCallback() {
  FB.Canvas.setSize();
 }
</script>

アプリIDはご自身のアプリIDに書き換えてください。

(2)さらにbodyタグの下に以下を追加
<div id="fb-root"></div>
<script>
FB.Canvas.setSize({ width: 520, height: 1200 });
</script>


「height:1200」の値を、スクロールがでないような高さに変更。
ページを開いたとき、一瞬スクロールバーが表示されますがすぐに消えてくれます。

同じように横スクロールを消したい場合はスタイルで
body {
 overflow-x: hidden;
}
と記述することで横スクロールは消えます。
(基本的に520pxのサイズで作ると思うので普段はあんまり気にはしないでいいと思いますが)

0 件のコメント:

コメントを投稿