---
title: "Facebookページや投稿をウェブサイトやブログに埋め込む方法"
date: 2021-05-11
modified: 2024-12-11
canonical_id: how-to-embed-facebook-page-posts
locale_slug: how-to-embed-facebook-page-posts
author: "esbasicmath"
category:
  - blog
  - tutorials
tags:
  - embed-facebook-feeds
summary: "フェイスブックをPRツールとして利用しているなら、ぜひウェブサイトと連携させてみましょう。双方を連携すれば、フェイスブックに投稿するだけでウェブサイト上のPRコンテンツを自動で更新でき、効率的なメディア運用が可能になります。そこで今回は、フェイスブックページの投稿をウェブサイトに埋め込み連携表示する方法をご紹介します。"
draft: false
seo:
  title: "Facebookページや投稿をウェブサイトやブログに埋め込む方法"
  description: "フェイスブックをPRツールとして利用しているなら、ぜひウェブサイトと連携させてみましょう。双方を連携すれば、フェイスブックに投稿するだけでウェブサイト上のPRコンテンツを自動で更新でき、効率的なメディア運用が可能になります。そこで今回は、フェイスブックページの投稿をウェブサイトに埋め込み連携表示する方法をご紹介します。"
  og_image: "https://embedsocial.jp/hp/wp-content/uploads/2021/05/AdobeStock_117420444-scaled.jpeg"
  og_image_width: 2560
  og_image_height: 1707
  structured_data: article
---

フェイスブックページをPRツールの一つとして利用し、情報発信を行っている皆さんは多いと思いますが、ウェブサイトやブログと連携をとっていますか？  
フェイスブックとウェブサイト等を自動で連携させれば、フェイスブックへの投稿一回でウェブサイト上のPRコンテンツの更新を行うことが出来て効率的です。  
そこで今回はフェイスブックの投稿をウェブサイトに埋め込む方法、中でも専門知識が不要な、誰でも簡単にできる方法をご紹介します。

## 公式コードを使って投稿を1つずつ埋め込む方法

公式アプリからフェイスブックの投稿ごとに埋め込みコードを取得・コピーして、ウェブサイトやブログに貼り付けて埋め込む方法です。フェイスブックページに投稿した中から一部だけを投稿したい場合に使える方法です。なお投稿はフェイスブックページの公開投稿のみです。個人アカウントのページの投稿は埋め込むことが出来ないのでご注意ください。

以下、パソコンを使ってワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。

### 投稿から埋め込み用のコードを取得する

フェイスブックページの各投稿の右上にある3つの点をクリックするとプルダウンメニューが出てきますので、「埋め込み」をクリックします。  
![three-dots-facebbok-post](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Frame-1-3.jpg)  
クリックすると「外部へ埋め込む」というポップアップが出てきます。もし特にカスタマイズを行わない場合は、「コードをコピー」をクリックします。これで埋め込み用のコードを取得できました。もし埋め込む投稿の幅を変えるなどのカスタマイズを行う場合は、ポップアップ内の「詳細設定」をクリックしてください。  
![copy-code-facebook](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Frame-2-1.jpg)

### 埋め込み投稿のカスタマイズを行う（オプション）

「詳細設定」をクリックすると、自動的にMeta for Developersの「埋め込み投稿」ページに移動します。このページには「コードジェネレーター」というツールがあり、先ほど「埋め込み」をクリックした投稿のURLが自動的に入力されているのが確認できます。  
このページでは、投稿の幅を調整したり、投稿全文を含めるかどうかを選択し、「コードを取得」をクリックします。  
![meta-dev-embed-facebook-code](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Frame-4.jpg)  
なお、「埋め込み投稿」のページには、様々な埋め込み方法につてのガイドが載っていますので、ページ右上の目次を確認してみてください。

### 埋め込みコードを選び、コピーしてウェブサイトの掲載したい場所に貼り付ける

「コードを取得」をクリックすると、コードが2種類出てきます。どちらも基本的にはコピー&ペーストで埋め込みが完了して簡単です。埋め込んだ先での加工性を考えるとおすすめはJavascriptですが、ただ投稿画面を埋め込むだけという場合はiFrameでもよいでしょう。ここではiFrameを使った方法をご紹介します。  
![facebook-iframe-code](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Frame-5-2.jpg)  
コードをコピーしたら、ウェブサイトやブログでフェイスブック投稿を埋め込みたいところに貼り付けます。ワードプレスではテキストエディタ画面にして貼り付けます。  
![wp-editor-embed-code](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Frame-6-1.jpg)  
これで、フェイスブックページの投稿がウェブサイトやブログで表示されるようになりました。  

### フェイスブックページの公開範囲に制限があると埋め込みができない

ウェブサイトに埋め込みが可能な投稿はFacebookページとプロフィールの公開投稿のみです。フェイスブックページの投稿でも、公開範囲が非公開になっていたり、国別制限や年齢制限をかけていると、埋め込むことが出来ません。  
自分のフェイスブックページの公開範囲の設定を確認する場合は、フェイスブックページのホーム画面右上のプロフィール写真をクリックして、「設定とプライバシー」＞「設定」＞「プライバシー設定」と進んでください。  
![facebook-page-privacy-setting](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Frame-8.jpg)

## 公式ページプラグインを使ってフェイスブックページごと埋め込む方法

フェイスブック公式のページプラグインを使って、フェイスブックページをウェブサイトやブログに埋め込む方法です。

以下、パソコンでワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。

### フェイスブック公式プラグインページでコードを取得する

フェイスブックページを埋め込むにはまず、フェイスブックの開発者向けサイトFACEBOOK for Developers内の「[ページプラグイン](https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP#page-tabs)」ページを開きます。（もしページの途中が表示される場合は、「ページプラグイン」ページの一番上までスクロールします。）

FacebookページのURLの入力欄がありますので皆さんのFacebookページのURLを入力してください。埋め込んだページのプレビューが出てきます。既にお使いのパソコンでフェイスブックにログインしたことがあると、自動でURLが入力されていることもあります。

特に設定を変えない場合は、「コードを取得」をクリックします。なお、大きさを変えたり、投稿を含まない表示にしたりなどの変更をする場合は次のパートで説明します。  
![get-embed-code-on-page-plugin](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Group-5.png)  
「コードを取得」をクリックすると、埋め込みコードが2種類出てきます。どちらもコピー＆ペーストでウェブサイトやブログに貼り付けるだけです。どちらを選択してもよいのですが、ここでは、Java Script SDKを選択します。  
![select-javascript-sdk-for-embedding](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Group-7.png)

### ページ埋め込みコードをコピーしてウェブサイトの埋め込みたい場所に貼り付ける

コードの部分をクリックすると全選択になりますので、右クリックでコピーをし、ウェブサイトやブログに貼り付けます。

ワードプレスを使ったブログの例では、編集画面をテキストエディタで開きコードを貼り付けます。

まず本文にステップ1のコードを貼り付けます。場所はどこでもよいのですが、コード取得画面で推奨されているので、本文のすぐ後が良いでしょう。ちなみにこのコードは本番画面上では見えません。

次に、埋め込みたい場所にステップ2のコードを貼り付けます。これで、ページの埋め込みは完了です。  
![paste-javascript-code-on-wordpress](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Group-8-1.png)  
以上のステップでフェイスブックページを埋め込むとこのようになります。

> [EmbedSocial Japan](https://www.facebook.com/embedsocialjapan/)

### タブやサイズの変更などデフォルトの表示設定を変える方法

フェイスブックページの埋め込みは、いくつかカスタマイズが出来ます。ここではその方法をご紹介します。

#### タイムライン、イベント、メッセージタブの設定

埋め込んだフェイスブックページにはタイムラインだけでなく、イベントとメッセージのタブを表示することができます。タブはこのような感じで表示されます。  
![customize-tabs-embedded-facebook-page](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Group-11-2.png)

-   　**タイムライン (timeline)**：フェイスブックページのタイムライン上の投稿が表示されます。デフォルトではtimeline（タイムライン）が入力されていますので、タイムライン投稿を表示したくない場合は、タブ欄から消すと表示されません。
-   　**イベント (event)**：タブをクリックすると予定されているイベントが表示され、そこからイベント詳細ページにリンクすることが出来ます。
-   　**メッセージ(messages)**：タブをクリックするとフェイスブックページを埋め込んだウェブサイトから直接メッセージを送信できます。

「ページプラグイン」ページのタブ欄に、timeline,event,messageと入力すると、埋め込みコードにも反映されますので「コードを取得」をクリックして、先ほどと同じように埋め込みコードをコピー&ペーストしてください。  
![facebook-page-plug-in](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Frame-9.jpg)

(参考）もしこのタブ欄がうまく作動しない場合は、少しだけコードを編集する必要があります。コピー＆ペーストで出来るので、コード知識がなくても簡単ですのでご安心ください。  
方法は以下の通りです。

埋め込みコードを取得し（方法は上のパートでご確認下さい。）、メモ帳やワードプレスのテキストエディタ等、コードを編集できる場所に貼り付けます。  
![edit-embed-code-for-tabs](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Group-9.png)  
Javascript SDKのステップ2でコピーしたコードの中の「data-tabs=”timeline”」の箇所を編集します。タイムライン、イベント、メッセージで表示したいタブを、カンマ区切りで入力します。例えば3つのタブを表示したい場合は、

`data-tabs="timeline,events,messages"`

に変更します。

変更したコードをウェブサイトに貼り付けると、先ほどお見せしたように3つのタブが並んだ形で表示されます。

> [EmbedSocial Japan](https://www.facebook.com/embedsocialjapan)

#### 幅・高さ

埋め込んだフェイスブックページのウェブサイト上でのサイズを調整できます。  
こちらはページプラグインの入力欄で設定できますので、コードを取得する前に希望するサイズを入力します。  
![change-size-facebook-plugin](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Group-12.png)  
入力するとプレビューが自動で変更されるので、確認しながら設定できます。

#### その他

その他にも「ページプラグイン」では、以下の設定が可能です。チェックのオン/オフで設定が可能です。

-   　**スモールヘッダーを使用**：ヘッダーの高さが低くなります
-   　**カバー写真を非表示にする**：カバー写真がなくなりページ名のみが表示されます
-   　**plugin containerの幅に合わせる**：プラグイン（埋め込みページ）の可変幅が親コンテナの幅(最小180px/最大500px)に合わせて設定されます。オフにすると親コンテナの幅に関係なく、埋め込んだプラグインは指定した幅で表示されます。
-   　**友達の顔を表示する**：ページのヘッダーの下にフェイスブックページの友達のプロフィールを表示します。

\[include file='blog\_cta'\]

## SNS埋め込みツールを使って複数の投稿を一度に埋め込む方法

公式機能を使えばフェイスブックページや投稿の埋め込むことは可能ですが、投稿を一つ一つ埋め込むなど作業が面倒であったり、拡張性やデザインに制限があります。

そこでこれらの難点を解決したい場合は、**SNS埋め込みツール**の利用をおすすめします。  
SNS埋め込みツール[EmbedFeed](https://embedsocial.jp/product/embedfeed/)を使うと簡単にFacebookページの投稿をウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します。

### ステップ1: EmbedFeedアカウントの作成

まずスタートする前に、EmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、[7日間無料トライアル](https://embedsocial.jp/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget)を始めて、以下のステップに進んでください。

ログインすると、Facebookをソースとして追加するためのソースセクションに移動します。

### ステップ2: 収集元プラットフォームとしてFacebookを選ぶ

ソース（収集元）選択画面で、Facebookを選びます。  
![embedfeed-select-platform-facebook](https://embedsocial.jp/hp/wp-content/uploads/2021/05/embedfeed-select-platform-facebook-1024x569.jpg)

### ステップ3: Facebookアカウントを接続する

Facebookから投稿を収集するためには、FacebookアカウントとEmbedSocialを接続する必要があります。  
Facebookを接続するをクリックして、画面の指示に従ってください。  
![Connect-facebook-to-embedsocial](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Connect-facebook-to-embedsocial-1024x569.jpg)

### ステップ4: Facebookのソースタイプ（収集元）を選択する

EmbedFeedはFacebookから、みなさんが管理するFacebookページからアップされた投稿、皆さんにメンションされた投稿、ビジターの投稿、3つの方法で投稿を収集することができますので、お好みのソースを入力してください。  
![embedfeed-select-facebook-source](https://embedsocial.jp/hp/wp-content/uploads/2021/05/embedfeed-select-facebook-source-1024x569.jpg)

### ステップ5: Facebookを表示するレイアウトのテンプレートを選択する

Facebookの投稿をウェブサイトに表示させるレイアウトをテンプレートから選びます。テンプレートを使わないで自分でデザインを一から作ることもできます  
テンプレートを選択すると、ウィジェット（Facebookの埋め込みパーツ）の編集画面に進みます。ここで、Facebookの投稿をウェブサイトに埋め込むデザインのカスタマイズや投稿の並べ替えなどをします。

### ステップ6: FacebookをWEBサイトに埋め込む用のコードをコピーする

![enbedfeed-copy-code-embed-facebook](https://embedsocial.jp/hp/wp-content/uploads/2021/05/enbedfeed-copy-code-embed-facebook-1024x569.jpg)

### ステップ7：コピーしたコードをウェブサイトに貼り付ける

ウェブページのコードを編集できるプラットフォームを使用している場合、Facebookウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。

WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます：  
![embed-code-instagram-feed](https://embedsocial.jp/hp/wp-content/uploads/2020/09/embed-code-instagram-feed-1.jpg)  
設定は以上です。これで以下の様にFacebookの投稿をWebサイトに埋め込み表示することができます。  
![Embed-facebook-on-web-example](https://embedsocial.jp/hp/wp-content/uploads/2021/05/Embed-facebook-on-web-example-1024x692.jpg)

### SNS埋め込みツール「エンベッドソーシャル」ならFacebookはもちろんほかのSNSの投稿も簡単に埋め込むことが出来ます

こちらが埋め込みツール「エンベッドソーシャル」を使ってフェイスブックページの投稿を埋め込んだ例です。デザインはこれ以外にもたくさんのオプションがあります。この例では、各投稿をクリックするとライトボックスで詳細が表示され、ヘッダーの「フォロー」ボタンをクリックすると当社のフェイスブックページにリンクするように設定してみました。

また、投稿内にCTAボタンを設置し、クリックすると関連したサイトにリンクさせることも可能です。ウェブサイト上に埋め込まれた投稿を見てすぐに、購入や問い合わせといったアクションにつなげやすくなります。

{{embedsocial-hashtag:d61141fe5bfdf8d2ff53378c67c7a28569bbfbe0}}

本製品の詳しい機能は[こちらから](https://embedsocial.jp/function/)ご確認下さい。

もちろんほかにもたくさん埋め込みツールが出ています。価格帯も機能も様々ですので、ぜひ皆さんに合うツールを探してみてください。

## SNSとウェブ連携でSNS非利用者にも同じメッセージを一度に届けることができる

フェイスブックをはじめとするSNSは、情報を幅広く届けるのに大変強力で、欠かせないツールになっています。一方で、今でもSNS（LINEを除く）を使わない人が多くいることも事実です。  
そこでSNSの情報をウェブサイトやブログと連携しておけば、SNSを利用していないこれらの人々にも同じ情報を簡単に届けることが出来ます。しかもわざわざ別のコンテンツを作成したりウェブサイトを編集したりする必要もありません。

SNSとウェブサイトやブログの連携方法として有効な「埋め込み」テクニック。ぜひ皆さんの活動に役立ててみてください。

SNS埋め込みツール「エンベッドソーシャル」についてのお問い合わせは[こちら](https://embedsocial.jp/contact/)までぜひ！

\[include file='blog\_cta'\]