ホームページにFacebookページのタイムラインを表示する(2016年4月)

ホームページ上にFacebookページのタイムラインを表示する方法について解説します。
2016年4月時点での仕様です。
表示できるのはFacebookページのみ
ホームページ上にFacebookページのタイムラインを表示するには、Facebook公式の Page Plugin というツールを使用します。
表示できるのは、 企業や団体などが開設するFacebookページ のみで個人ページは不可です。
Page Pluginで各項目を設定
まずは「Page Plugin」のページへ行きましょう。
*Facebook-Page Plugin
以下のような画面が表示されるので各項目を設定します。
Facebookページのタイムラインが、ホームページに表示される際の見え方の設定です。
各項目に入力すると共に、下に結果がリアルタイムで表示されます。
以前は各項目の説明が英語でしたが、今は日本語表示でとても分かりやすいです。
簡単に各項目の説明しておきます。
- FacebookページのURL
- 表示したいFacebookページのURLを入力してください。
- タブ
- デフォルトは「timeline」で特にいじる必要はありません。
他に「events」や「messages」のタブを追加することも可能で、その場合「timeline, events」というようにコンマ区切りで指定します。 - 幅
- 単位はpxで、デフォルトは340、最小値は180、最大値は500です。
- 高さ
- 単位はpxで、デフォルトは500、最小値は70です。
- plugin containerの幅に合わせる
- これにチェックを入れるとレスポンシブ化し、親要素がプラグインの幅より狭くなると、それに合わせて幅を縮小してくれます。
チェックを入れないと幅は固定されたままです。
ただし、プラグインの幅はページの読み込み時に決定され、読み込み後にウィンドウの幅を変更しても、プラグインのサイズは変更されません
他にも「スモールヘッダーを使用」「カバー写真を非表示にする」「友達の顔を表示する」などの項目があるので、チェックを入り切りしてみて、どのように表示が変化するのか試してみてください。
Page Pluginでコードを取得
さて、設定が終わったところで、「コードを取得する」のボタンを押します。
すると以下のようなコードが表示されます。
インラインフレームのコードを取得することも可能ですが、よほどの必要が無い限りはJavascript SDKのままで良いでしょう。
まず「ステップ2」のコードをHTMLに記述します。bodyタグの中ならどこでも大丈夫です。
次に「ステップ3」のコードを、実際にFacebookタイムラインを表示したい箇所に記述します。
複数表示したい場合は、それぞれの箇所に記述します。
するとホームページにFacebookタイムラインが表示されます。
幅や高さなどの各項目はコードを直接いじって変更することも可能です。
「Page Plugin」ページの下半分がその解説になっているので、詳しくはそちらを参照されてください。