facebookページのページタブで表示させるアプリの制作案件を受け制作したのですが、
最近はfacebookページの案件が少なくなってきたせいでどうしたらいいか忘れてしまいますので備忘録としてまとめます。
「スクロールバーを消したい」、「縦の長さを合わせたい」と色々やりたかったのですが、
facebookの仕様が検索しても仕様変更前、後と情報が散乱していて、
どれが現在のfacebookページで正常に対応してくれるのかわからないので検証した結果、
現在は以下のソースコードにて動作を確認できました
2013/12月現在での動作確認コード ※ページタブで確認
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=[アプリID]";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
window.fbAsyncInit = function ()
{
// アプリケーション初期化
FB.init({
appId : '[アプリID]',
status : false,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoGrow();
}
ちなみに縦の長さが800を下回る場合、『FB.Canvas.setAutoGrow();』では 縦を正常に調整してくれないので以下の関数に差し替える。
FB.Canvas.setSize({ height: 695 });