【簡単!】Webサイトに、Facebookページの埋め込みを表示する方法

【簡単!】Webサイトに、Facebookページの埋め込みを表示する方法

Webサイトに、Facebookページの埋め込みを表示する方法を紹介します。

埋め込みを表示することで、ユーザーはWebサイトを離れることなく、Facebook上の情報を確認したり、「いいね」したりすることができるようになります。

それでは早速見ていきましょう。

Facebook「ページプラグイン」にアクセス

まず、Facebookの「ページプラグイン」のページに移動します。

ページプラグイン – ソーシャルプラグイン – ドキュメンテーション – 開発者向けFacebook

このページでは、Webページに埋め込むコードを取得することができます。

各項目の設定

「ページプラグイン」のページは、以下のようになっています。

設定できる項目は、以下のようなものがあります。

  • FacebookページのURL
    • 表示したいFacebookページのURLを入力します。
  • タブ
    • 表示したい内容を入力します。タイムラインは「timeline」、イベントは「events」、メッセージは「messages」などです。スペルミスには注意しましょう。「timeline, events」というように、「,」で区切って指定することで、複数のタブを表示することもできます。
    • 表示したい横幅(ピクセル)を指定できます。省略可能です。
  • 高さ
    • 表示したい高さを、ピクセルで指定します。省略可能です。

そのほかにも、「友達の顔を表示する」などの、気の利いたオプションもありますので、色々といじってみましょう。

コードを取得する

各項目の指定ができたら、左下にある「コードを取得」ボタンを押しましょう。すると、以下のような画面が表示されます。

(※ Facebookにログインした状態の場合、Step1 の前の部分で、「アプリIDと言語を選択します」という項目が表示される場合があります。Facebookアプリを作成して公開状態にしていれば問題ないのですが、初めての場合は、ここでつまづく可能性があるので、Facebookから一度ログアウトしてからアクセスするか、ブラウザのプライベートモードなどで非ログイン状態にしてからアクセスしてみてください。)

タブが二つあり、「JavaScript SDK」と「IFrame(アイフレーム)」となっていますが、基本的には「JavaScript SDK」で良いと思います。「IFrame」は、『サイト内でFacebookのJavaScript を読み込みたくない』場合や、『JavaScriptを使わずにサイトを構築したい』などのケースで使うようにするといいかと思います。

コードを貼り付ける

それでは、いよいよwebサイトのソースを開き、まずは、Step1 の部分のコードを、<body> 開始タグのすぐ下にコピペしてください。

次に、Step2 の部分のコードを、埋め込みを表示させたい部分にコピペしてください。

これで、以下のように埋め込みが表示されたかと思います!

具体的なhtmlソースは、以下のようになるかと思います。

<html>
<head>
  </head>
<body>
<!-- Step1 の部分 -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.1';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
<!-- Step2 の部分(見やすくするため、改行を入れています) -->
<div class="fb-page"
      data-href="https://www.facebook.com/facebook"
      data-tabs="timeline"
      data-small-header="false"
      data-adapt-container-width="true"
      data-hide-cover="false"
      data-show-facepile="true">
<blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/facebook">Facebook</a>
</blockquote>
</div>
</body>
</html>

まとめ

Facebookページの埋め込みを、簡単に表示することができたかと思います。

冒頭でも書いた通り、埋め込みを表示することで、ユーザーはWebサイトを離れることなく、Facebook上の情報を確認したり、「いいね」したりすることができるようになるため、Webサイト管理者は積極的に使っていくと良いかと思います!