埋め込み投稿

埋め込み投稿を使用すると、Facebookページや個人のタイムラインの公開投稿を、ウェブサイトやウェブページのコンテンツに簡単に配置できます。埋め込むことができるのは、Facebookページとプロフィールの公開投稿のみです。

コードジェネレーター

投稿のURL
投稿のピクセル幅(350~750)

設定

設定 説明 デフォルト

data-href

投稿の絶対URLです。

n/a

data-width

投稿の幅です。最小350ピクセル、最大750ピクセルです。空欄のままにすると、流動的に適切な幅が使用されます。

流動的に適切な幅

data-show-text

写真投稿に適用されます。Facebook投稿がある場合は、trueに設定してそのテキストを追加します。

false

投稿からのコードの取得

1. 投稿を開く

投稿そのものから埋め込みコードを直接取得できます。投稿が公開されている場合、Facebookの投稿の右上に表示されるアイコンをクリックします。

ドロップダウンメニューから[Embed Post]を選択します。

写真投稿の場合は、右下の[Embed Post]ボタンを選択します。

2. コードをコピーして貼り付ける

投稿を埋め込むためのコードが記載されたダイアログが表示されます。このコードをコピーし、ウェブページ内で投稿を表示させたい場所にコードを貼り付けます。

技術的な詳細については、「コードの手動追加」セクションをご覧ください。

コードの手動追加

コードジェネレーターを使用しなくても、コードを手動で埋め込むこともできます。

1. 投稿のURLを取得する

まず、シェアする投稿のURLを取得する必要があります。公開された投稿からのみURLを取得できます。公開された投稿であれば、投稿日時のすぐ横に、次のような地球儀のアイコンがグレーで表示されています。

次のサンプルURLを使ってテストすることもできます。

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. JavaScript SDKを読み込む

埋め込み投稿プラグインや他のソーシャルプラグインを使用するには、ウェブサイトにFacebook JavaScript SDKを追加する必要があります。ページへのSDKの読み込みは1度だけで構いませんが、次のように<body>タグを開いた直後にSDKを読み込むように設定することをおすすめします。

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

JavaScript SDKの実装方法に関する詳細は、「JavaScript SDK - Quickstart (JavaScript SDK - クイックスタート)」をご覧ください。

3. 埋め込み投稿タグを配置する

次に、ウェブサイトの任意の場所に埋め込み投稿タグを配置します。{your-post-url}は投稿のURLに置き換えます。

<div class="fb-post" data-href="{your-post-url}"></div>

4. テスト

ここまでの手順を終えたら、埋め込み投稿をテストできます。 すべてを統合すると次のようなコードになります。

<html>
  <title>My Website</title>
<body>
  <script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

テストサンプルでは次のスクリーンショットのような画面が表示されます。

5. カスタマイズする

サイズ、言語、その他の設定を変更する場合は、このページに後述されている手順に従います。

投稿のURLの取得

埋め込みコードがCMSによって生成されるケースでは、未加工の投稿URLのみが必要です。投稿のURLの取得には、次の2つの方法があります。

  1. ブラウザのアドレスバーからパーマリンクのURLをコピーする。
  2. 投稿の投稿日時を右クリックし、リンクアドレスをコピーする。

これらの方法の該当箇所は次のスクリーンショットに赤線でハイライト表示されています。

グラフAPI経由

埋め込み投稿をウェブサイトに自動的に統合する場合、グラフAPIを使用して投稿を集約させることもできます。たとえば、Page Feed APIエンドポイントfieldsパラメータのpermalink_urlを使用できます。

/{page-id}/feed?fields=permalink_urlへの要求の応答では、次のような応答が返されます。

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

デスクトップ版のレイアウト

デスクトップ版の埋め込み投稿の幅は、次のサンプルにあるように、埋め込み投稿タグのdata-width属性を使って変更できます。350750ピクセルの範囲で値を指定します。

プラグインのサイズの変更にはCSSスタイルタグを使用しないでください。表示エラーが発生することがあります。

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

携帯サイト版のレイアウト

携帯サイト版では、埋め込み投稿の幅は表示枠の幅に合わせて自動的に調整されます。

WordPress

WordPressサイトでJavaScript用Facebook SDKをすでに使用している場合は、投稿にfb-postタグを追加することで、埋め込み投稿プラグインを使用できます。

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Facebook SDK for Javascriptを使用していないWordPressサイトに、各Facebook投稿から取得できるスニペットをコピーして貼り付ける方法で投稿を埋め込むと、多くの場合、埋め込み投稿プラグインが表示処理を行いません。これは、WordPressではすべての&文字が#038;に変換されてしまい、プラグインが正しく認識されなくなることが原因です。

回避策として、次のコードを使用してプラグインを追加します。

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.10'
    });
  }; 
  (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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

今後、WordPressとより簡単に統合するための新たな方法がリリースされる予定です。

よくある質問

HTML5バージョンやXFBMLバージョンを使用している場合は、ライブラリのインスタンスを作成する際に言語コードを追加する必要があります。

SDKを読み込む際に「js.src」の値を調整してロケールを使用します。フランス語(フランス)の場合は、「en_US」をロケールの「fr_FR」で置き換えます。

// 例1:
'//connect.facebook.net/fr_FR/sdk.js';

// 例2: 
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6"; 

サポートされる言語については、FacebookLocales.xmlファイルをご覧ください。 使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳細については、「ローカライズと翻訳」ページをご覧ください。

埋め込み投稿には添付されているすべてのメディアが表示されるほか、その投稿へのいいね!、シェア、コメントの数も表示されます。投稿を埋め込むことで、ウェブサイトの訪問者はFacebook.comで表示される多彩な情報を閲覧でき、埋め込み投稿から直接コンテンツの作成者やFacebookページをフォローしたり、いいね!をしたりすることができます。