WordPressにFacebookの投稿やページを埋め込む方法

2021/1/5 情報を更新いたしました。

WordPressサイトにFacebookの投稿やページを表示している方多いですよね。

Facebookのページ（タイムライン等）を埋め込めば、サイトの訪問者にFacebookアカウントを認知してもらえます。当記事では、Facebookの投稿とページをサイト上に表示する方法について解説していきます。

WordPressにFacebookを埋め込む手順

埋め込むにあたって、専門的な知識やプラグイン等は必要ありません。下記の2つの手順でサイト上にFacebookを表示できますので、順番にみていきましょう。

1. Facebookから埋め込みコードを取得
2. WordPressサイトに埋め込みコードを貼り付ける

Facebookの埋め込みコードを取得する方法２つ

まずは、Facebook上から埋め込みコードを取得する必要があります。しかし、Facebookの投稿を表示するのか、ページ（タイムライン）を表示するのかで、その取得方法が異なります。

下記に各埋め込みコードの取得手順を記載しましたので、参考にしてください。

Facebookの投稿を埋め込む

特定の投稿を表示する場合は、Facebookの埋め込み機能を使用します。Facebookへアクセスし、埋め込みたい投稿の三点リーダーをクリックして、「埋め込み」を選択してください。

Facebookのコードジェネレーターに遷移するので、各値を調整して「コードを取得」を押します。

ここで、埋め込み用のコードが表示されるので、「IFrame」を選択し、iframeタグをコピーします。これで埋め込みコードを取得できました。

Facebookのページ（タイムライン等）を埋め込む

タイムラインを表示する場合は、ページプラグインを使用して埋め込みコードを取得する必要があります。下記より、ページプラグインへアクセスしてください。

ページプラグイン

下記の画面になるので、「FacebookページのURL」に表示したいFacebookのページURLを記入して「コードを取得」をクリックします。（例：https://www.facebook.com/wptcd）

埋め込み用のコードが表示されるので、「IFrame」を選択し、iframeタグをコピーしましょう。

表示するページのデザインを調整したい方は、様々なオプションが用意されているので、下記を参考に各値を調整してから、埋め込みコードを取得してください。

埋め込みコードをWordPressに貼り付ける

埋め込みコードを取得した後は、サイトの表示したい場所に貼り付けていきます。下記に表示する場所やエディタごとに埋め込み方法を記載してますので、参考にしてください。

• ブロックエディター（Gutenberg）
• 旧エディター（Classic Editor）
• ウィジェット（サイドバーやフッター）

2020年10月24日からFacebook・InstagramのoEmbedの仕様変更により、「埋め込み」ブロックを使用できなくなりました。（詳細はこちら）

ブロックエディター（Gutenberg）

ブロックエディターをお使いの方は、「カスタムHTML」ブロックを追加して、下記のように埋め込みコードを記入します。

旧エディター（Classic Editor）

Classic Editorプラグイン等を使い、旧エディターを使用されている方は、テキストエディターに埋め込みコードを記入します。

ウィジェット（サイドバーやフッター）

サイドバーやフッターにFacebookを表示する場合は、ウィジェットを利用します。（テーマによってウィジェットエリアは異なります。）

外観 > ウィジェットより、表示したいページのウィジェットエリアに「カスタムHTML」を追加して、下記のように埋め込みコードを記入します。

FacebookのOGP設定はお済みですか？

Facebookをサイト上に表示する際に、合わせて設定しておきたいのがFacebookのOGP設定です。

こちらを設定すると、Facebook上でページをシェアした際に、URL以外にタイトルや説明文、サムネイル画像まで自動で表示されます。そのため、ウェブページに興味を持ってもらいやすくなるんですね。

下記にOGP設定に必要なFacebook App IDの取得方法について解説してますので、ぜひご覧ください。