2021.03.03
398
facebookページを制作する際に読み込むiframeの高さの設定方法を調べたので、自分の復習がてらご紹介します。
header内に以下の記述を設定。
<script type="text/javascript" src="http://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>
続いてbody内に以下の記述を設定。
<div id="fb-root"></div> <script> FB.Canvas.setSize({ width: 横幅, height: 縦幅 }); </script>
【アプリID】の部分にはdevelopersのマイアプリからJSを入れたいページを開くと
2段目の行に「アプリID」として記載されている15文字の数字が入ります。
bodyの中で任意の場所に以下の記述を設定。
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> <div id="fb-root"></div> <script type="text/javascript"> FB.init({ appId : '<span style="color:#990033">【アプリID】</span>', status : true, // check login status cookie : true, // enable cookies xfbml : true, // parse XFBML logging : true }); FB.Canvas.setAutoResize(); </script>
横のスクロールバーを消したい場合には以下の記述をbodyの中の任意の場所に設定。
<STYLE type="text/css"> <!-- BODY { overflow-x : hidden ;} //--> </STYLE>
私は現在1の方法で縦幅を伸ばしていますが、特に問題は無く使用出来ています。
ちなみに、どちらの方法も「fb-root」の記述は必須のようです。
参考記事
iframe版 Facebookページのスクロールバーを消す方法
FacebookページのIframe仕様で出てしまうスクロールバーを消す覚書