Facebookページ（フェイスブックページ）のIframe（インラインフレーム／アイフレーム）の読み込みについて

【規定サイズ】 520px ×　800px ※規定サイズでは800pxとされているがjavascriptのコードを読み込むことで高さはいくらでも調整可能。

>>サンプルページはこちら<<

【仕様】 520px ×　800px を超えるとスクロールバーが表示される Iframeで読み込んでいるファイル内に 1.bodyの余白を0に

[css] body { margin:0; padding:0; } [/css]

2.javascriptでIFrameの高さを変更

[html] <script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="">http://connect.facebook.net/en_US/all.js"> <script language="JavaScript"> window.fbAsyncInit = function() { FB.init({appId: 'XXXXXXXXXXXX', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

<div id="fb-root"></div> <script> FB.Canvas.setSize({ width: 520, height: 1300 }); </script> [/html]

※XXXXXXXXXXXX　はアプリID

●参考文献 http://web.showjin.me/2011/04/fbpage_noscrollbar.html

コンテンツの高さを取得し FB.Canvas.setSize({ width: 520, height: 1300 }); のheight部分を動的に代入することができるが、レスポンスが低下する為、使用しないほうが良い。

【補足】最初は下記のように記述していたのだが、IEでjavascriptエラーが出てしまった。

[html] <script type="text/javascript" src="">http://connect.facebook.net/en_US/all.js"> <script language="JavaScript"> FB.init({ appId: 'XXXXXXXXXXXXX', status: true, cookie: true, xfbml: true }); window.fbAsyncInit = function() { FB.Canvas.setSize(); } function sizeChangeCallback() { FB.Canvas.setSize(); } </script>

<div id="fb-root"></div> <script> FB.Canvas.setSize({ width: 520, height: 1300 }); </script> [/html]

※XXXXXXXXXXXXXにアプリIDを入力