WordPressとInstagramを連携させる方法！初心者でも安心のステップバイステップ

2025年10月31日

結論

WordPressでInstagramを埋め込む方法は4通りあります。個別投稿の「埋め込みコード」を貼る、Meta公式のoEmbed APIを使う、外部ウィジェットを使う、WordPressプラグインを使う、の4つです。要件と更新頻度で最適解が変わります。

理由

2020年10月24日以降、WordPressコアにあったInstagram埋め込みの仕組みが使えなくなりました。MetaがoEmbedの一般公開を終了し、Facebook開発者アカウントとアクセストークンが必須になったためです。Make WordPress+1

具体例

1枚の投稿だけ表示したい場合は、Instagramの「埋め込みコード」を貼る方法で十分です。インスタグラムヘルプセンター+1
サイト内で最新のフィードを自動更新したい場合は、外部ウィジェット（LightWidgetなど）か、プラグイン（例：WPZOOM Social Feed）を使います。lightwidget.com+2lightwidget.com+2

WordPressとInstagramを連携させる方法

WordPressとInstagramの連携とは？

Instagramの投稿やプロフィール、ハッシュタグの写真一覧をWordPressページに表示することです。目的は最新写真の自動掲載やUGCの活用による信頼性の向上です。

なぜWordPressにInstagramフィードを埋め込むのか？

写真中心の実績や雰囲気を可視化できます。
更新をInstagram側に集約でき、運用負荷を下げられます。
UGCを示して社会的証明（ソーシャルプルーフ）を高められます。

初心者向け！連携のメリットとデメリット

メリット

運用がシンプル
サイトの鮮度を維持
クリック・滞在時間の改善が期待

デメリット

外部スクリプトで表示速度が低下しやすい
プライバシー保護・同意管理が必要
公式API利用時は開発者登録が必要（審査含む）developers.facebook.com+1

埋め込みの基本：先に知っておくべきこと

公開アカウントの投稿のみ埋め込めます。非公開は不可です。インスタグラムヘルプセンター
個別投稿は「埋め込みコード」を貼れば表示できます。フィードの自動更新は別手段が必要です。インスタグラムヘルプセンター
速度対策とCookie同意バナーの用意が無難です。

Instagramブロックおよび対応策について

WordPress 5.6以降、コアの「Instagramブロック」は廃止済みです。回避策は以下の通りです。gutenbergtimes.com+1

プラグインで代替（WPZOOM Social Feed など）。WordPress.org 日本語
公式oEmbed APIを自前で実装（Facebook App＋アクセストークン）。developers.facebook.com
外部ウィジェットのscriptを貼付（LightWidget等）。lightwidget.com

WordPressにInstagramを埋め込む手順

準備：Instagramアカウントの設定

公開アカウントに切り替え
プロフィールのURLと投稿URLを控える
ブランド名・アイコン・紹介文を整える

埋め込みコードの取得方法（個別投稿）

埋め込みたい投稿を開く
右上の「…」→「埋め込み」→「埋め込みコードをコピー」インスタグラムヘルプセンター
WordPressの投稿・固定ページにカスタムHTMLブロックを追加し貼り付け

サンプル（Instagramが発行する形式の例）

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXXXXXX/"></blockquote>
<script async src="https://www.instagram.com/embed.js"></script>

HTMLを使用したInstagramフィードの埋め込み

個別投稿は上記コードで表示できます。
プロフィール全体のフィードは外部ウィジェットやプラグインを使います（HTMLブロックに埋め込み）。lightwidget.com+1

プラグインなしでの自動更新設定

現実的な選択肢

外部ウィジェットを使う（例：LightWidget）。管理画面でウィジェットを生成し、発行されたiframe/scriptをHTMLブロックに貼るだけです。無料プランでも自動更新に対応します。lightwidget.com+1

上級者向け（コード構築）

MetaのInstagram oEmbedを使い、サーバー側でHTMLを取得→キャッシュ→表示。Facebook Appとトークン管理、レビュー要件を満たす必要があります。developers.facebook.com+1

埋め込み後のフィードのカスタマイズ

列数・余白・ホバー・キャプション有無などは外部ウィジェットやプラグインの設定で調整できます。lightwidget.com
デザイン基準：アイキャッチとの余白、見出し直下の配置、Lazy Load設定、クリック先の挙動（新規タブ）を統一

よくあるトラブルとその解決法

Instagramフィードが表示されない理由

投稿が非公開
スクリプトや第三者Cookieがブラウザでブロック
旧式のWordPress埋め込み仕様に依存（2020/10以降は無効）WordPress.org 日本語

対処

公開設定を確認
外部スクリプトを許可
コア依存をやめ、ウィジェット/プラグイン/公式APIへ切替

画像だけが埋め込まれる問題の対処法

scriptの読み込み漏れ、もしくはセキュリティ系プラグインのブロックが原因のことがあります。<script src="https://www.instagram.com/embed.js">の有無、CSP（Content Security Policy）設定、キャッシュのクリアを確認します。インスタグラムヘルプセンター

自社サイトへの適したレイアウト選択

1列の大判写真＝作品訴求
2〜4列のグリッド＝情報量重視
サイドバー1列＝ブログ補助

速度向上のための最適化方法

Lazy Loadの有効化
遅延読み込み用スクリプトの活用
scriptのdefer指定
表示領域外の投稿数を絞る
ウィジェットの軽量テーマを選ぶ（LightWidgetは軽量で設定豊富）lightwidget.com

Instagramの活用法とプランの選択

UGC（ユーザー生成コンテンツ）の具体例

来店写真やレビュー投稿をハイライト
ハッシュタグキャンペーンで作品を収集
著作権・利用許諾の明確化でトラブル回避

Instagram広告のメリットと活用法

リーチ拡大と認知向上
来店・予約の導線強化
既存投稿を広告化して素材作成コストを削減

自動投稿の設定方法とツール紹介

Metaの公式ツールやサードパーティのスケジューラーを活用
投稿カレンダーを作り、週次で運用を定着
画像テンプレートを用意し制作時間を短縮

プラン別のインスタグラム活用術

規模	目的	埋め込み方法	更新	補足
個人〜小規模	実績紹介	個別投稿の埋め込み	手動	最小コスト。まずはこれで十分インスタグラムヘルプセンター
小〜中規模	自動で最新表示	外部ウィジェット	自動	貼るだけで運用が軽い lightwidget.com
中規模以上	デザイン統一・柔軟性	プラグイン	自動	ブロック/ウィジェットで配置が簡単 WordPress.org 日本語
大規模・開発体制あり	細かな制御	公式oEmbed＋自前実装	自動	App登録と審査が必要 developers.facebook.com+1

まとめしっかりとした連携でユーザーを引き込む

結論

目的が「個別投稿の見せ方」なら埋め込みコード、「最新フィードの自動更新」なら外部ウィジェットかプラグイン、「拡張性とブランド統制」なら公式oEmbedの実装が最適です。

理由

WordPressコアのInstagramブロックは廃止済みで、Metaの仕様変更により認証が求められるためです。安定表示と運用効率の両立に合わせて手法を選ぶことが重要です。gutenbergtimes.com+1

具体例

スピーディに導入：LightWidgetのコードを貼るだけで自動更新付きフィードを表示。lightwidget.com
WordPress内で完結：WPZOOM Social Feedでブロックから配置。WordPress.org 日本語
開発リソースあり：Instagram oEmbedをサーバーで取得・キャッシュして表示。developers.facebook.com

今後のアップデートに注目

MetaのAPI仕様や審査要件は変動します。最新情報で手順を保守してください。developers.facebook.com

効果的なヘルプの活用法

Instagramヘルプの「埋め込み」手順で正しいコードを取得します。インスタグラムヘルプセンター
WordPress公式の告知やプラグイン開発元のドキュメントで変更点を確認します。Make WordPress

持続可能なInstagram運用のために

週次の投稿計画とテンプレを用意
サイト速度を監視（PageSpeed測定）
UGCの権利確認とガイドライン整備

付録：方式ごとの早見表

方式	できること	自動更新	難易度	コスト	根拠
埋め込みコード（個別投稿）	単発表示	なし	低	無料	Instagram公式ヘルプで埋め込み可能インスタグラムヘルプセンター
外部ウィジェット	フィード表示	あり	低	無料〜少額	LightWidget等でHTML貼付のみ lightwidget.com
プラグイン	フィード表示＋ブロック配置	あり	低〜中	無料〜	WPZOOM Social Feed等 WordPress.org 日本語
公式oEmbed実装	高度な制御	あり	高	開発工数	Facebook App＋トークン必須 developers.facebook.com+1