スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



ホームページ上にFacebookページのタイムラインを表示する方法について解説します。
2016年4月時点での仕様です。

表示できるのはFacebookページのみ

ホームページ上にFacebookページのタイムラインを表示するには、Facebook公式の Page Plugin というツールを使用します。

表示できるのは、 企業や団体などが開設するFacebookページ のみで個人ページは不可です。

Page Pluginで各項目を設定

まずは「Page Plugin」のページへ行きましょう。
Facebook-Page Plugin

以下のような画面が表示されるので各項目を設定します。
Facebookページのタイムラインが、ホームページに表示される際の見え方の設定です。
各項目に入力すると共に、下に結果がリアルタイムで表示されます。

Facebook-Page Plugin設定項目

以前は各項目の説明が英語でしたが、今は日本語表示でとても分かりやすいです。

簡単に各項目の説明しておきます。

FacebookページのURL
表示したいFacebookページのURLを入力してください。
タブ
デフォルトは「timeline」で特にいじる必要はありません。
他に「events」や「messages」のタブを追加することも可能で、その場合「timeline, events」というようにコンマ区切りで指定します。
単位はpxで、デフォルトは340、最小値は180、最大値は500です。
高さ
単位はpxで、デフォルトは500、最小値は70です。
plugin containerの幅に合わせる
これにチェックを入れるとレスポンシブ化し、親要素がプラグインの幅より狭くなると、それに合わせて幅を縮小してくれます。
チェックを入れないと幅は固定されたままです。
ただし、プラグインの幅はページの読み込み時に決定され、読み込み後にウィンドウの幅を変更しても、プラグインのサイズは変更されません

他にも「スモールヘッダーを使用」「カバー写真を非表示にする」「友達の顔を表示する」などの項目があるので、チェックを入り切りしてみて、どのように表示が変化するのか試してみてください。

Page Pluginでコードを取得

さて、設定が終わったところで、「コードを取得する」のボタンを押します。

コードを取得する

すると以下のようなコードが表示されます。

Facebook-Page Pluginコード

インラインフレームのコードを取得することも可能ですが、よほどの必要が無い限りはJavascript SDKのままで良いでしょう。

まず「ステップ2」のコードをHTMLに記述します。bodyタグの中ならどこでも大丈夫です。

次に「ステップ3」のコードを、実際にFacebookタイムラインを表示したい箇所に記述します。
複数表示したい場合は、それぞれの箇所に記述します。

するとホームページにFacebookタイムラインが表示されます。

幅や高さなどの各項目はコードを直接いじって変更することも可能です。
「Page Plugin」ページの下半分がその解説になっているので、詳しくはそちらを参照されてください。