Facebookページをサイトに埋め込む手順は、以下の3つです。
- facebook for developers の「ページプラグイン」にアクセスする
- 埋め込むFacebookページの内容を設定する
- コードをサイトに埋め込む
一つずつ画像を交えながらお伝えしていきます。
facebook for developers の「ページプラグイン」にアクセスする
まず、facebook for developers の「ページプラグイン」というURLにアクセスします。
＞facebook for developers ページプラグインはコチラ
埋め込むFacebookページの内容を設定する
次に、サイトに埋め込むFacebookページの内容を設定していきます。
FacebookページのURL
サイトに埋め込むFacebookページのURLを入力します。
タブ
デフォルトでは「timeline」が入力されています。
ページ下のプレビューを見れば分かりますが、埋め込んだ際にFacebookページのタイムラインが表示されます。
タイムラインを表示したくない場合は、タブを空欄にしましょう。
タイムラインを表示にすると、サイトの表示速度がガッツリ遅くなる場合があります。
幅・高さ
埋め込むサイトの幅に合わせて調整しましょう。
幅に関しては、以下の「plugin containerの幅に合わせる」にチェックを入れることで、埋め込むスペースの幅に調整されます。
他、4つのチェック項目
- スモールヘッダーを使用（より小さいヘッダーになります）
- カバー写真を非表示にする
- plugin containerの幅に合わせる（レスポンシブ対応になります）
- 友達の顔を表示する
好みに合わせてチェックを入れましょう。
そしたら下にある「コードを取得」という青いボタンをクリックします。
コードをサイトに埋め込む
コードが載ったウィンドウが表示されます。
まず、Step1（上記画像だと①）に表示されているコードを、サイトの<body>タグの下に貼り付けます。
WordPressの場合、使っているテーマによって<body>の位置が異なります。
WordPressダッシュボードの「外観」⇒「テーマの編集」から<body>が記載されているphpを探してみてください（たいてい「header.php」に<body>タグはあります）。
またダッシュボードから編集できない場合、ファイルマネージャーから該当phpを編集しましょう。
そしてStep2（上記画像だと②）に表示されているコードを、サイトに埋め込みたい箇所に貼り付けます。
以上です。実際の画面で確認してみましょう。
Facebookページを作成したばかりの場合、表示されるまでに時間がかかる場合があります。幅や高さなどが違和感なく表示されていたらOKです。
お疲れさまでした。