WordPressへのFacebook埋め込み完全ガイド！初心者向けに徹底解説！

2025年8月17日

「WordPressにFacebookの投稿を埋め込みたいけれど、何から始めればいいのかわからない……」
「公式プラグインと手動コード、どちらが簡単？プラグインなしで埋め込めるの？」
「埋め込んだはずなのに、スマホで表示が崩れてしまう……」
「OGP設定って聞くけれど、本当に必要なの？」

そんなお悩みを抱える初心者のあなたへ──

本記事では、Facebookの投稿・ページ・イベントをWordPressサイトにスムーズに埋め込む手順を、コード例を交えながら丁寧に解説します！

プラグインを使わない手動方法から
公式ページプラグインの設定ポイント、
イベントカレンダーやタイムラインフィードの埋め込み、
デザイン調整やスマホ対応まで、

すべてひと通りマスターできる完全ガイドです。

この記事を読めば、複雑に感じていたFacebook連携がグッと身近に！

さっそく始めましょう✨

Facebook連携の基礎知識

できることと導入メリット

FacebookとWordPressをつなげると、以下のような多彩な機能が使えます。

📣 自動シェア
投稿を公開すると同時にFacebookページやグループへ自動で投稿。手動漏れを防ぎ、作業時間を短縮します。
🔗 OGP（Open Graph）設定
記事ごとにサムネイル画像やタイトル、説明文を最適化。SNS上での見栄えが良くなり、クリック率↑。
🖼️ フィード埋め込み
Facebookページのタイムラインや個別投稿をサイト内に表示。最新情報を常に自動更新できます。
📅 イベントカレンダー連携
Facebookイベントをカレンダー形式で埋め込み。セミナー・勉強会などの告知に便利。

メリット比較表

スクロールできます

機能	メリット
自動シェア	・投稿忘れ防止・SNS拡散力アップ
OGP設定	・リンクプレビューの最適化・CTR向上
フィード埋め込み	・最新情報を自動反映・ユーザー滞在時間増加
イベント連携	・告知効率化・参加者増加

注意すべきポイント・デメリット

連携の便利さと引き換えに、以下の注意点もあります。

⚠️ 表示スピードの低下
多数の外部リクエスト（API呼び出し）が発生し、ページ読み込みが重くなる場合があります。
🔐 プライバシー設定の制限
Facebook側で「公開範囲」が限定されている投稿は埋め込めないことがあります。
🛠️ プラグイン依存リスク
プラグイン更新停止や非対応PHPバージョンなどで動作が不安定になることも。
⚙️ トラブル対応が煩雑
埋め込みが反映されない、認証エラーなど、原因究明にSNS・WordPress双方の知識が必要です。

デメリットまとめ

スクロールできます

デメリット	対策
表示速度の低下	・キャッシュ導入・必要箇所だけ埋め込み
プライバシー制限	・公開範囲の確認・別途スクリーンショット活用
プラグイン依存	・信頼性あるプラグイン選定・定期バックアップ
トラブル対応	・ログ確認・公式ドキュメント参照

自動投稿を行う設定手順

OGP／Metaタグの準備

サイトをFacebookに最適化するため、まずはOGP（Open Graph Protocol）タグを用意します。

テーマの<head>内に手動で追加する方法

   <meta property="og:title" content="ここに記事タイトル">
   <meta property="og:description" content="ここに記事概要">
   <meta property="og:image" content="https://example.com/サムネイル.jpg">
   <meta property="og:url" content="https://example.com/記事のURL">
   <meta property="og:type" content="article">

プラグインで一括設定
- All in One SEO や Yoast SEO などでOGP項目を入力
- 画像・タイトル・説明文を個別記事ごとに上書き可能

ポイント

サムネイル画像は推奨サイズ1200×630pxを用意
デフォルト値を設定しておくと、未設定記事も漏れなくシェア可能 🎯

FacebookアプリIDの取得方法

自動投稿機能にはFacebookアプリIDが必要です。

Facebook for Developers にログイン
「マイアプリ」→「アプリを作成」 をクリック
アプリ名・メールアドレスを入力し、ビジネス利用の場合はビジネスアカウントを選択
ダッシュボードで 「設定」→「基本設定」 を開き、App ID をコピー
アプリの公開ステータスを有効（ライブ）に切り替え

注意点

開発モードのままだと、自分以外のページではテスト投稿しかできません
プライバシーポリシーURLの設定も必須 😌

SEOプラグインでの自動共有設定（例：All in One SEO）

All in One SEO（AIOSEO）を例に、自動投稿を有効化する手順です。

AIOSEO をインストール & 有効化
管理画面の 「AIOSEO > ソーシャルネットワーク」 を開く
Facebook タブ で先ほど取得した App ID を入力
自動投稿の スイッチをオン に切り替え
投稿タイプ（投稿／固定ページ）ごとに、
- デフォルトOGP設定
- カスタム投稿時のシェア文言
  を登録

スクロールできます

設定項目	説明
App ID	FacebookアプリID
デフォルト画像	シェア時のサムネイル
シェア文言フォーマット	`{title} – {excerpt}` などのテンプレート

ヒント

カスタム投稿タイプにも対応可能
テスト投稿ボタンで動作確認を忘れずに ✔️

Jetpackなど代替プラグインの活用

All in One SEO以外にも自動共有ができるプラグインがあります。

スクロールできます

プラグイン名	特長
Jetpack	簡単セットアップ＆複数SNS対応
Social Auto Poster	Facebook／Twitter／LinkedIn など同時投稿
WP to Buffer	Buffer経由で柔軟な投稿スケジュール管理

Jetpack の場合
- 「Jetpack > 設定 > 共有」 をオン
- Facebookアカウントを連携し、公開先ページを選択
Social Auto Poster
- 各SNSの認証情報（App ID／APIキーなど）を登録
- 投稿タイプごとのスケジュール設定

選び方のポイント

投稿頻度が高いなら スケジューリング機能 を持つもの
複数SNS同時投稿なら 一括管理プラグイン

記事更新時のFacebook投稿フロー

投稿・更新のたびにスムーズにシェアできるよう、フローを明確化しましょう。

記事公開 or 更新
OGP情報の自動挿入（プラグインが実行）
Facebook API経由でシェアリクエスト
Facebook上で公開
管理画面で履歴を確認

flowchart LR
  A[記事公開／更新] --> B[OGPタグ生成]
  B --> C[自動シェアリクエスト]
  C --> D[Facebookに投稿]
  D --> E[履歴・エラー確認]

チェックリスト

OGP画像・文言が意図どおりか ✅
シェア履歴に表示されているか ✅
エラー発生時はログを確認 🔍

投稿・ページの埋め込み手順

埋め込みコードの生成方法

個別投稿／タイムライン用コードの取り出し

Facebook投稿を表示したいページ（投稿またはタイムライン）に移動
右上の「…（詳細）」メニューから 「埋め込み」を選択
ポップアップ内のコードをコピー

   <blockquote class="fb-post" 
     data-href="https://www.facebook.com/{ページID}/posts/{投稿ID}" 
     data-show-text="true">
   </blockquote>
   <script async defer src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v13.0"></script>

イベント／グループ表示向けコード

イベントページまたはグループのフィードを開く
ページ右上から 「埋め込み」を選択（イベントは「イベントを埋め込む」）
表示オプション（幅、高さ、タブ選択など）を調整し、コードを取得

   <!-- イベント埋め込み例 -->
   <div class="fb-event" 
     data-href="https://www.facebook.com/events/{イベントID}" 
     data-width="500" data-height="700">
   </div>
   <script async defer src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v13.0"></script>

プラグインを使った埋め込み（Feed Pro, EmbedSocialなど）

プラグインを利用すると、シンプル設定で複数投稿を自動更新できるメリットがあります。

スクロールできます

プラグイン名	特長	料金プラン例
Smash Balloon Social Post Feed (旧：Feed Pro)	多彩なレイアウト・フィルタ機能レスポンシブ対応	無料版／Pro版：\$49～
EmbedSocial	複数SNS統合可 UGC収集機能	無料トライアル有り
Custom Facebook Feed	シンプル＆軽量コード埋め込みも可能	無料版／プレミアム版

設定の流れ（例：Feed Pro）

プラグインをインストール＆有効化
「Facebook Feed」の認証画面でアカウント連携
フィードタイプ（投稿／イベントなど）を選択
レイアウト・フィルタを設定
生成されたショートコードをコピー

[custom-facebook-feed feed=1 num=5 cols=3]

手動でコードを貼り付ける方法

ブロックエディター（Gutenberg）での挿入

投稿編集画面で「＋」をクリック
「カスタムHTML」ブロックを選択
コピーした埋め込みコードをペースト
プレビューで表示を確認し、公開

クラシックエディタ／ウィジェット領域への貼り付け

クラシックエディタ
1. テキストタブに切り替え
2. 任意の位置に埋め込みコードを貼り付け
ウィジェット（サイドバー・フッター）
1. 「外観」＞「ウィジェット」を開く
2. 「カスタムHTML」ウィジェットを追加
3. コードを貼り付けて保存

✨ これで手動／プラグインいずれの方法でも簡単にFacebookの投稿やイベントをWordPressに埋め込めます！

専用ウィジェット＆ページプラグインの活用

Facebookページプラグインの設定項目解説

Facebookが提供する公式「ページプラグイン」を使えば、手軽にページ全体を埋め込めます。

主な設定項目は次の通りです。

表示タブの切り替え

タイムライン、イベント、メッセージなど、見せたいコンテンツを選択
タブごとにアクセス数やエンゲージメントが変わるので、目的に合わせて切り替えましょう 🎯

幅・高さ・レスポンシブ対応

幅（width）、高さ（height）をピクセル単位で指定
スマホ対応させる場合は data-adapt-container-width="true" を有効化
固定幅＋レスポンシブ＝ PCでは広く、モバイルでは自動調整

ヘッダー／カバー画像の表示制御

data-hide-cover="true" でカバー画像を非表示に
data-show-facepile="false" と併用するとシンプルな見た目に
ブランドロゴやカラーリングが際立つレイアウトに最適

友達リスト表示オプション

data-show-facepile="true" で友達のアイコンを表示
初回来訪者に安心感を与え、信頼性アップに繋がる 👍

設定項目まとめ

スクロールできます

設定キー	説明	推奨値例
data-href	埋め込み対象のページURL	`https://www.facebook.com/YourPage`
data-tabs	表示タブ（例：`timeline, events`）	`timeline`
data-width / data-height	幅・高さ（px）	`500` / `700`
data-adapt-container-width	レスポンシブ対応	`true`
data-hide-cover	カバー画像の非表示	`true`
data-show-facepile	友達リスト表示	`true`

サイドバー／フッターへの固定配置例

サイトのサイドバーやフッターに常設すると、ユーザーの目に留まりやすくなります。

サイドバーに設置
- 「外観 > ウィジェット」から 「カスタムHTML」 を追加
- 下記コードを貼り付けて保存
<div class="fb-page" data-href="https://www.facebook.com/YourPage" data-tabs="timeline" data-width="300" data-height="600" data-hide-cover="false" data-show-facepile="true"> </div> <script async defer src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v13.0"></script>
フッターに設置
- テーマの footer.php またはウィジェット「フッター」領域に同様のHTMLを追加
- 幅を広め（例：data-width="800"）に設定し、サイト全体のフッター幅に合わせる

ヒント

サイドバー：縦長にして最新投稿をスクロール表示 🎢
フッター：幅広くしてページ終端に目立つレイアウト ✨

これで「公式ページプラグイン」を活用した、簡単かつ効果的な常設表示が可能になります！

イベント・タイムラインフィードの表示

イベントカレンダー埋め込みの手順

Facebookイベントをカレンダー形式でサイトに表示する手順です。

セミナーやワークショップなどの告知に最適！

イベントページでコード生成
- Facebookのイベントページを開き、右上「…」→「埋め込みコードを取得」を選択
- 幅・高さを設定し、必要に応じて小見出し・参加ボタンの表示をON/OFF
HTML埋め込み
- コピーしたコードを、WordPressの埋め込みたい場所に貼り付け
- ブロックエディターなら「カスタムHTML」、クラシックエディタなら「テキスト」タブへ

   <div class="fb-event" 
     data-href="https://www.facebook.com/events/1234567890" 
     data-width="500" data-height="700" 
     data-hide-cover="false" 
     data-show-text="true">
   </div>
   <script async defer src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v13.0"></script>

スタイル調整（任意）
- 外観に合わせて CSSで余白や背景色を調整
- カレンダー枠の 幅をレスポンシブ にする場合は、親要素に max-width:100%; を適用

ポイント表

スクロールできます

項目	内容
data-hide-cover	カバー画像を非表示にするか
data-show-text	イベント詳細をテキスト表示
data-width／height	埋め込み領域のサイズ（px）
CSSカスタマイズ	背景色・余白・枠線などでサイトと馴染ませる

タイムラインフィードをサイトに載せる方法

Facebookページの最新投稿をタイムライン形式でサイトに自動表示する手順です。

常に最新情報を発信可能！

公式埋め込みコードの取得
- Facebookページのトップで「…」→「埋め込み」を選択
- 「Tabs」に timeline を指定してコードをコピー
ショートコード or HTML貼り付け
- プラグイン不要なら、同じく「カスタムHTML」ブロックへ貼り付け
- プラグインを利用する場合は以下のようなショートコードを使う例も◎
[custom-facebook-feed feed=1 tabs=timeline num=5]
表示件数・レイアウト調整
- ショートコードの num= で表示件数を設定
- 表示幅やカラム数をパラメータで変更可能（プラグイン依存）
レスポンシブ対応
- data-adapt-container-width="true" を有効化
- 親要素に width:100%; を設定し、画面幅に合わせて自動リサイズ

✨ Tip: タイムラインフィードは“生きたコンテンツ”なので、サイト訪問者の滞在時間アップ＆再訪率向上に効果的です！

デザイン調整とカスタマイズ術

CSSで見た目を細かく制御する

WordPressに埋め込んだFacebookコンテンツは、追加のCSSで細部までカスタマイズできます。

外枠の余白・背景色を整える

   .fb-page, .fb-post, .fb-event {
     margin: 20px auto;       /* 上下余白20px・中央揃え */
     background-color: #f9f9f9; /* 背景を薄いグレーに */
     padding: 10px;           /* 内側余白 */
     border-radius: 8px;      /* 角丸 */
   }

レスポンシブ対応

   .fb-page, .fb-post, .fb-event {
     max-width: 100%;  /* 親要素幅に合わせる */
     height: auto;     /* 高さは自動調整 */
   }

ボタンやリンクの色を統一

   .fb-page a, .fb-post a {
     color: #0078ff;      /* サイトテーマに合うリンク色 */
     text-decoration: none;
   }
   .fb-page a:hover {
     text-decoration: underline;
   }

影をつけて立体感UP

   .fb-page {
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   }

ポイント

テーマの子テーマやカスタムCSSプラグインで管理すると安全
ブラウザの開発者ツールでクラス名を確認しながら調整しましょう 🔍

多言語サイト・言語切替対応

多言語サイトでは、Facebookプラグインの言語を切り替えることで、訪問者に最適な表示を提供できます。

SDK読み込みの言語コードを変更

   <script async defer 
     src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v13.0">
   </script>
   <!-- ja_JP を en_US や zh_CN などに変更 -->

ユーザーのブラウザ言語に合わせる方法

   <?php
   $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
   $fb_locale = [
     'ja' => 'ja_JP',
     'en' => 'en_US',
     'zh' => 'zh_CN',
     // 必要に応じて追加
   ];
   $locale = $fb_locale[$lang] ?? 'en_US';
   ?>
   <script async defer 
     src="https://connect.facebook.net/<?php echo $locale; ?>/sdk.js#xfbml=1&version=v13.0">
   </script>

多言語プラグインとの連携
- Polylang／WPMLなどの言語切替プラグインを利用
- 各言語ページに合わせて、ロケールパラメータを動的に切り替える

スクロールできます

言語コード	Facebookロケール	備考
日本語	ja_JP	デフォルト
英語	en_US	アメリカ英語
中国語	zh_CN	簡体字
スペイン語	es_ES	スペイン

ヒント

キャッシュ設定に注意し、言語ごとのSDKを適切に読み込む
ユーザー体験を向上させるため、言語切替時のリダイレクトや表示確認を忘れずに 🌐

よくあるトラブルと解決策

埋め込みが反映されない主な原因

SDKが読み込まれていない
埋め込みタグの下にあるFacebook SDKスクリプトが正しく挿入されていないと、表示されません。

  <script async defer src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v13.0"></script>

上記コードが</body>直前などにあるか確認しましょう。

URLが間違っている
埋め込み用のdata-href属性に指定するURLは、正確な投稿またはページのURLでなければなりません。
- コピー元で「埋め込み」を選ぶ際、URLが途中で切れていないかチェック
- https://が抜けていないか確認
公開範囲が限定されている
シェア範囲が「友達のみ」や「非公開」に設定されている投稿は、埋め込めません。
- 該当投稿を「公開」に変更
- Facebookページであれば「全員」にアクセス権を設定
プラグインやテーマの干渉
他のJavaScript最適化プラグインやキャッシュ系プラグインで、Facebookスクリプトが遅延・省略される場合があります。
- 一時的にキャッシュをクリア
- 最適化プラグインの設定でconnect.facebook.netを除外

表示速度の低下を防ぐには

スクロールできます

対策項目	内容
遅延読み込み	`async defer`を付与し、ページ表示後にSDKを取得
埋め込み箇所の絞り込み	本当に必要なコンテンツだけを埋め込む（例：トップページには設置しない）
キャッシュ利用	プラグイン（例：WP Super Cache）でHTMLキャッシュを有効化
スクリプト結合の回避	他の外部スクリプトと一緒に結合せず、個別に読み込む

遅延読み込みにより、ファーストビューへの影響を最小限に。
キャッシュを設定すると、再訪ユーザーへのロードが高速化します。

権限設定・プライバシー制限の注意点

FacebookアプリIDの権限チェック
自動投稿やプラグイン連携で使うApp IDには、必要な権限（publish_pagesなど）が付与されているか確認。
アクセストークンの有効期限
使い回しているトークンが期限切れになると、自動投稿やプラグイン連携が停止します。
- 開発者ダッシュボードでトークンの期限を再確認
- 必要に応じて長期トークンに切り替え
プライバシー設定の整合性
Facebook側で非公開設定の投稿は埋め込めず、エラー表示のままになることも。
- 「公開」に設定してから再度埋め込みコードを取得
- ページ全体を公開にし、必要に応じて個別投稿を非表示に

これらの対策を行うことで、埋め込み時の表示トラブルやパフォーマンス低下を抑え、安定した連携表示を実現できます。

FAQ

Q1. プラグインなしで埋め込みたい場合は？

プラグインを使わず、手動でFacebookコンテンツを埋め込む手順は以下のとおりです。

埋め込みコードを取得
- Facebook投稿やページの「…」→「埋め込み」を選択
- 表示オプション（幅・タブなど）を調整し、コードをコピー
カスタムHTMLブロック／ウィジェットに貼り付け
- Gutenberg：カスタムHTMLブロックを追加し、コードをペースト
- クラシックエディタ：テキストタブで貼り付け
- ウィジェット：外観＞ウィジェット＞カスタムHTMLにコードを挿入

ポイント

レスポンシブ化したい場合は、data-adapt-container-width="true"を必ず設定
埋め込みスクリプトは</body>直前に置くと安定 🛠️

Q2. スマホでうまく表示されないときは？

モバイル表示が崩れる主な原因とその対策です。

スクロールできます

原因	対策
埋め込み幅が固定（px指定のみ）	`max-width:100%;` を親要素に設定し、自動リサイズを有効化
SDKスクリプトが読み込めていない	`<script async defer>`タグが正しく挿入されているか確認
キャッシュや最適化プラグインの影響	該当スクリプトを除外設定し、キャッシュをクリア
テーマのCSSが干渉している	開発者ツールで`.fb-page`などに適用されているスタイルを調整

Tip

メディアクエリで細かい調整を行うと、よりスマートに最適化できます 📱

Q3. 複数コンテンツを同時に見せるには？

タイムライン、イベント、投稿などをまとめて表示したい場合は以下の方法が便利です。

スクロールできます

方法	説明
ショートコード＋Feedプラグイン	`[custom-facebook-feed feed=1 tabs=timeline,events num=5]`
EmbedSocialなどの統合ツール	複数ソースをまとめて一括表示。UGC収集もできる
手動で複数HTMLブロック挿入	それぞれの埋め込みコードを別ブロックに貼り付け

ショートコード例

  [custom-facebook-feed feed=1 tabs=timeline,events num=3 cols=2]

EmbedSocialの活用
1. アカウント作成→Facebook連携
2. レイアウトテンプレートで「複数タブ」設定
3. 生成コードをサイトに貼り付け

メリット比較

スクロールできます

方法	メリット	デメリット
プラグイン利用	手軽＆自動更新	有料プランが必要な場合あり
統合ツール	デザイン性高＆複数SNS対応	月額費用が発生する
手動挿入	完全無料＆軽量	更新が手間

複数コンテンツを効果的に見せることで、サイトの情報量と滞在時間をアップさせましょう！