ホームページに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」ページの下半分がその解説になっているので、詳しくはそちらを参照されてください。