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

※1 <head>内の記述を <body>内の <div id=”fb-root”></div>以下に移動することで IE のエラーを解消することができます。 ただし、IE 以外のブラウザで高さが変わらない等の問題が起こることがあるようなので、現在検証中です。

 

そのため、今回は、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日までに対応できそうにない場合は、
しばらくはすでにあるもので代用しても大丈夫そうです。
 

 

こちらでご紹介しました情報は、2012年3月28日現在のものです。 仕様変更によりサイズ等が変わることも考えられますので、 今後のFacebookの公式発表に十分ご注意ください。
新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら