読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

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

制作技術

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

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

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

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

2.javascriptでIFrameの高さを変更

[html]<!-- scroll bar非表示 --> <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> <!-- End scroll bar非表示 -->[/html]

※XXXXXXXXXXXX はアプリID

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

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

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

[html]<!-- scroll bar非表示 --> <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> <!-- End scroll bar非表示 -->[/html]

※XXXXXXXXXXXXXにアプリIDを入力