埋め込み投稿

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

コードジェネレーター

投稿のURL

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

投稿全文を含める

設定

設定	説明	デフォルト
`data-href`	投稿の絶対URL。	`n/a`
`data-lazy`	`true` を指定すると、`loading="lazy"` iframe属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。`true` または `false` (デフォルト)を指定できます。	`false`
`data-width`	投稿の幅。最小`350`ピクセル、最大`750`ピクセルです。空のままにすると、可変幅が使用されます。	可変幅
`data-show-text`	写真投稿に適用されます。`true`に設定すると、Facebook投稿のテキスト(ある場合)が追加されます。	`false`

投稿からのコードの取得

1.投稿に移動する

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

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

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

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

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

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

コードの手動追加

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

1.投稿のURLを取得する

まず、シェアしたい投稿のURLを取得する必要があります。投稿は公開されている必要があります。その投稿の公開日時のすぐ横には、グレーの地球儀のアイコンが表示されています。

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

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

2.JavaScript SDKを読み込む

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

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

JavaScript SDKの実装方法に関する詳細は、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 async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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つの方法があります。

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

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

グラフ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属性を使って変更できます。350～750ピクセルの範囲で値を指定します。

プラグインのサイズの変更には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をすでに使用している場合は、WordPress投稿にfb-postタグを追加するだけで、埋め込み投稿プラグインを使用できます。

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

JavaScript用Facebook SDKを使用せずに、各Facebook投稿から取得できるスニペットをコピーして貼り付ける方法で投稿を埋め込んだ場合、埋め込み投稿プラグインがレンダリングしない可能性が高くなります。これは、WordPressではすべての&文字が#038;に変換されるため、プラグインが機能しなくなることが原因です。

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v21.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></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に置き換えます。

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

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

サポートされる言語については、FacebookLocales.xmlファイルをご覧ください。

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

パーマリンク

埋め込み投稿にはどのような内容が表示されますか。

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

パーマリンク

投稿が削除されたり、投稿の共有範囲選択ツールが変更されたりした場合はどうなりますか。

埋め込み投稿の代わりに次のメッセージが表示されます。

パーマリンク