umeda【Facebook】移行直前！タイムライン対応まとめ（Facebookページ編）
今週末、3月30日のタイムライン移行では、
ウォールだけでなく、Facebookページ（iframeタブ）も変わります。
※ウォールの変更点に関しては、以下にまとめました。
>>移行直前！タイムライン対応まとめ（ウォール編）
●iframe サイズ変更
これまで最大 520pxだった横幅は、520px・810px の 2タイプになりました。
横幅が広くなるため、より自由なレイアウトが行えるようになります。
今までのサイズである 520px がデフォルトとなっているため、
これまでに作成したページは、特に移行作業をしなくても今まで通り表示させることができます。
※上記キャプチャのように、左右に余白が追加され、センターに配置されます。
新しく追加された 810px を使用したい場合は、アプリの設定画面から選択します。
なお、iframe周辺の余白は以下の通りとなっています。
●スクロールバーを消す
iframeの高さは、今まで通り 800px です。
この高さを超えると、スクロールバーが表示されてしまいますので、
長いページの場合は、スクロールバーを消す設定を加える必要があります。
以前ご紹介した「スクロールバーを消す方法」は、
現在では IE でのみエラーが表示されてしまいます。*1
>> 【Facebook】iframe版 Facebookページのスクロールバーを消す方法 | Tips Note
https://www.tam-tam.co.jp/tipsnote/html_css/post1026.html
そのため、今回は、iframe の高さを自動的に調整してくれる JavaScript SDK、
「FB.Canvas.setAutoGrow」を使用します。
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxxxxxxxxxx',
status: true,
cookie: true
});
FB.Canvas.setAutoGrow();
};
</script>
※「appId: ‘xxxxxxxxxxxxxxx’,」はアプリIDを入れてください。
高さを設定するより若干動作が重いようにも感じるのですが、
毎回高さを設定しなくてもよく、使いまわしもできるのでとても便利です。
●アイコンを作成・変更
Facebookページに作成した iframeページを追加したら、
こちらに表示されるアイコン（111px × 74px）を作成します。
↓
画面右端にある▼をクリックして管理モードに変更。
アイコンを変更したい画像にカーソルを乗せると「鉛筆アイコン」が表示されます。
「鉛筆アイコン」をクリックすると選択肢が表示されますので、「設定を編集」を選択。
↓
編集のウィンドウが開くので、
「カスタムタブの画像：変更」をクリック
↓
新しいウィンドウまたはタブで、
カスタム画像の編集画面が表示されます。
「Change」をクリック
↓
アップローダーが表示されるので、
作成した画像を選択。
↓
（設定した画像が表示されたら、このウィンドウは閉じても問題ありません。）
↓
元の画面に戻ってきました。
編集ウィンドウの「OK」をクリック。
↓
アイコンを設定できました。
今まで OGP で使用していた 90px × 90px の画像で設定してみましたが、
枠内に収まるように縮小され、センターに配置されました。
30日までに対応できそうにない場合は、
しばらくはすでにあるもので代用しても大丈夫そうです。
