WordPressへのInstagram埋め込み完全ガイド！おすすめプラグインなど徹底解説！

2025年8月17日

「Instagramの投稿をサイトに表示させたいけど、どうやればいいの？」
「プラグインを入れたら表示速度が落ちるって聞いたけど、本当？」
「公式埋め込みとプラグイン、どちらを選べばいいかわからない……」
「スマホでもきれいに見せる方法が知りたい！」

こんな疑問を抱えているあなたへ──

WordPressでInstagramを簡単かつキレイに埋め込む方法を、ゼロから丁寧に解説します。

プラグイン不要のシンプル手順
定番＆おすすめプラグインのメリット・デメリット
サイト速度を犠牲にしないコツ
モバイル対応やデザイン調整のポイント

初心者の方でも迷わないよう、具体的な手順を交えながら進めていきますので、ぜひ最後までご覧ください😊

埋め込み導入のメリット

ユーザーの注目維持とサイト滞在時間延長

WebページにInstagram投稿を埋め込むと、動きのあるビジュアルが加わり、スクロール中のユーザーを惹きつけます。

視覚的アクセント：静的なテキストだけでなく、写真や動画が自然と目に飛び込んでくる
インタラクティブ性：投稿をクリックするとポップアップで拡大表示されるため、サイト内に留まりやすい
滞在時間の向上：ページ滞在時間が平均20～30％アップした事例も！

Tip:
投稿をセクションごとに配置し、“続きを見る”リンクと組み合わせると、さらに回遊率が上がります😊

Instagram上の反応をウェブサイト上で可視化

Instagramの「いいね！」「コメント数」をそのまま表示できるため、社会的証明（Social Proof）が得られます。

信頼感の醸成：実際のユーザー反応を見せることで、新規訪問者にも安心感を提供
リアルタイム性：最新の反応が自動更新され、サイトが“生きている”印象に
エンゲージメント向上：反応を見たユーザーが自分も参加したくなる心理を喚起

スクロールできます

指標	埋め込み前	埋め込み後
平均いいね数	50	75 (+50%)
平均コメント	10	18 (+80%)

自社アカウントのフォロワー獲得支援

サイト訪問者が気に入った投稿をそのままフォローできる導線を設置し、フォロワー増加を後押しします。

ワンクリックフォロー：埋め込み内の「フォロー」ボタンで離脱なくアクション完了
キャンペーン告知：新商品やイベント情報を告知した投稿を目立たせ、フォロー動線を強化
クロスプロモーション：ブログ記事と連動した投稿を組み合わせることで、フォロワー獲得率を最大化

ポイント整理

フォロー誘導は記事中盤よりも、最後のまとめ部分に置くと効果的
CTA（Call To Action）文言は**「最新情報を見逃さない」**などベネフィットを強調する

Instagram未登録ユーザーにも投稿を届けられる

Instagramアカウントを持たない人にも、投稿の内容をそのまま閲覧させることが可能です。

HTML埋め込み：アカウント不要で画像＆キャプションを表示
サードパーティウィジェット：ログイン画面を挟まず全投稿をプレビュー
アクセシビリティ対応：alt属性を適切に設定し、視覚障がいのあるユーザーにも配慮

スクロールできます

方法	ログイン不要	カスタマイズ性	メンテナンス負荷
oEmbed（公式埋め込み）	○	△	低
ウィジェットツール	○	◎	中
自作コード	○	◎	高

以上のように、Instagram埋め込みは視覚的訴求・信頼性向上・フォロワー増加を同時に実現できる強力な施策です。

埋め込み時に気をつけたいポイント

ページ読み込み速度への影響リスク

Instagramの埋め込みは外部サーバーへのリクエストが増えるため、ページの表示速度を大きく左右します。

読み込みが重いと直帰率アップ：初回アクセス時に何秒も待たされると、ユーザーは離脱しやすくなります⚠️
対策
- 遅延読み込み（Lazy Load）の導入
- キャッシュプラグインで外部リクエストを一時保存
- 埋め込み数を制限し、必要な投稿だけ表示

メンテナンスや表示トラブルの可能性

Instagram側のAPI仕様変更やプラグイン・テーマのアップデートで、突然表示が崩れる／非表示になるリスクがあります。

定期チェックの重要性
- サイト公開後も週に一度は埋め込み部分を確認
- プラグインの最新バージョンを適用
フェールセーフの実装
- 埋め込み失敗時は「最新情報はこちら」のリンク表示
- カスタムメッセージや代替画像を用意👍

著作権・肖像権の確認必須

埋め込む投稿が第三者の写真・動画を含む場合、権利者の許可を得る必要があります。

公式アカウントのみ埋め込むようにする
キャプション内にクレジット表記を残す
利用範囲（商用利用可否など）を事前にチェック

ポイント：不安な場合は、Instagramの投稿オーナーにDMで確認を！✉️

一部コンテンツ（ストーリーズ等）は取得できない場合

公式のoEmbedや多くのプラグインでは、投稿フィードのみ対応で、Stories・Reelsなどは埋め込めないケースがあります。

スクロールできます

コンテンツ種類	oEmbed対応	プラグイン対応	備考
投稿（画像・動画）	○	◎	標準機能でほぼ問題なく表示可能
ストーリーズ	×	△	一部有料プランやAPI実装でのみ可
Reels	×	△	外部APIを組み合わせるか有料プラグインが必要
IGTV／ライブ配信	×	×	別途スクリーンショットなどで代替

Tip:
どうしてもStoriesやReelsを見せたい場合は、静止画キャプチャ＋リンクで誘導する方法がおすすめです📲

プラグイン不要でInstagramを埋め込む方法

oEmbed機能を利用したシンプル埋め込み

WordPressには標準でInstagramのoEmbed機能が搭載されています。

投稿URLをそのままエディタに貼り付けるだけで、自動的に埋め込みが完了🚀

手順
1. Instagramで埋め込みたい投稿を開く
2. 右上の「…」から「リンクをコピー」
3. WordPress投稿・固定ページエディタにペースト
メリット
- 手間ゼロ：コード編集不要
- 自動更新：キャプション・いいね数も反映
注意点
- 貼り付けは「ビジュアルエディタ」「ブロックエディタ」どちらでもOK
- URLの前後に余計なスペースを入れない

カスタムHTMLで画像＋キャプションを設置

細かいレイアウト調整や装飾をしたいときは、Instagramの埋め込みコードを直接利用👩‍💻

Instagram投稿の「埋め込みコードを取得」
コピーした <blockquote> タグ一式を「カスタムHTML」ブロックに貼り付け
必要に応じてスタイル（幅、高さ、レスポンシブ対応）を追加

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXXXXXXX/" style="max-width:540px; margin: auto;">
  <!-- Instagram公式コード -->
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

カスタマイズ例

スクロールできます

カスタマイズ項目	設定例
最大幅	`style="max-width:100%; height:auto;"`
キャプション非表示	`<script>window.instgrm.Embeds.process();</script>`
境界線（枠線）追加	`blockquote { border:1px solid #ddd; padding:10px; }`

ポイント

<script> はフッターにまとめて読み込むとパフォーマンス向上
レスポンシブ化にはCSSのmax-widthを活用

サイドバー／フッターなどウィジェット領域への配置

固定表示したい投稿やフィードを、ウィジェット領域に貼り付けて常時表示🌟

WordPress管理画面 → 外観 → ウィジェット
「カスタムHTML」ウィジェットをサイドバー・フッターに追加
oEmbed URL または埋め込みコードを貼り付け
タイトルや余白を調整してデザインに馴染ませる

レイアウトのコツ
- サイドバー幅に合わせて max-width を設定
- 複数投稿を並べる場合は列レイアウト（Flexbox）を活用
メリット
- サイト全体で一貫表示
- アカウントの最新投稿を自動で表示可能

/* ウィジェット内Flexbox例 */
.widget_instagram {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.widget_instagram blockquote {
  flex: 1 1 calc(50% - 10px);
}

Tip

ウィジェットの追加・削除だけで簡単に表示内容を切り替えできる
レスポンシブ対応を忘れずに！スマホでは1列表示に切り替えると◎

プラグインを活用した埋め込み手順

プラグインの導入と有効化

プラグイン検索
- 管理画面の「プラグイン」→「新規追加」で「Instagram Feed」や「Smash Balloon Social Photo Feed」を検索🔍
インストール&有効化
- 「今すぐインストール」をクリック後、「有効化」を押すだけで準備完了！
バージョン管理
- 定期的に最新バージョンにアップデートし、セキュリティや機能を常に最新状態に保ちましょう✨

Instagramアカウントとの連携設定

API連携用トークン取得
- プラグイン設定画面で「Instagramアカウントを接続」あるいは「Connect an Instagram Account」を選択
- Instagramのログイン画面が開くので、ビジネスアカウント／クリエイターアカウントで認証🛡️
権限確認
- 「投稿を見る」「統計を取得する」など、必要な権限を許可
接続ステータスの確認
- 設定画面に戻り、「接続済みアカウント」として表示されればOK！

フィード（投稿一覧）の作成・デザイン調整

新規フィード作成
- 「Add New Feed」ボタンをクリック
- 表示タイプ（グリッド／カルーセル／マイストリーム）を選択🎨
レイアウト設定
- カラム数、行数、画像サイズ、余白などを直感的なスライダー＆プレビューで調整
ビジュアルカスタマイズ
- 枠線・影・ホバーエフェクトなど、CSS不要で設定可能
- 写真キャプションの表示・非表示もワンクリックで切り替え
フィルター機能
- 特定のハッシュタグやキーワードで投稿を絞り込むと、ターゲットに合わせたフィードが作成できます

ショートコードやウィジェットでページに表示

ショートコード発行
- 作成したフィードの横に表示されるショートコード（例：[instagram-feed id=1]）をコピー📋
投稿・固定ページへの貼り付け
- ブロックエディタの「ショートコード」ブロック、あるいはクラシックエディタの本文にペースト
ウィジェットへの配置
- 管理画面「外観」→「ウィジェット」で「テキスト」または「カスタムHTML」ウィジェットにショートコードを貼り付け
表示確認と微調整
- 実際のページを確認し、レイアウトが崩れていないかチェック
- 必要に応じてフィード設定画面で「マージン」「パディング」を微調整

スクロールできます

手順	主な操作	ポイント
プラグイン導入	プラグイン検索 → 有効化	セキュリティのため定期更新
アカウント連携	認証画面でログイン → 権限許可	ビジネス／クリエイター必須
フィード作成	デザイン設定 → プレビュー確認	ターゲットユーザーを意識する
表示方法適用	ショートコード or ウィジェット貼付	ページ表示後に動作チェックを忘れずに

🚀 これであなたのサイトにもおしゃれ＆動的なInstagramフィードが簡単に組み込めます！

外部サービス／ツールで実装する方法

無料ツール例：EmbedSocial、LightWidget、Social Feed Gallery

各種外部サービスを使うと、コードを書くことなく手軽にInstagramフィードを表示できます。

EmbedSocial
- インストール不要：ウェブ上でウィジェット作成→生成されたコードを貼り付け
- シンプルなグリッド表示🚀
- 無料プランでも最大3つのフィードを管理可能
LightWidget
- レスポンシブ対応済みでスマホでも見やすい📱
- フィルター機能（ハッシュタグ絞り込み）を無料で使える
- CSSカスタマイズ用プロパティを提供
Social Feed Gallery
- 複数アカウントの同時埋め込みが可能
- レイアウトテンプレートをプリセットで選択
- 初心者向けのウィザード形式で設定が完了

ポイント：無料ツールは手軽さ重視、表示カスタマイズは限定的なので、必要に応じて設定画面をチェックしておきましょう。

定番プラグイン：Smash Balloon Social Photo Feed

WordPress専用プラグインとして高い信頼性を誇る「Smash Balloon」は、公式API連携で安定した表示を実現します。

インストール＆有効化
アカウント連携（認証画面で許可を与えるだけ）
フィード作成：グリッド、カルーセル、モザイクなど多彩なレイアウト
高度なデザイン設定：影、境界線、ホバー効果をドラッグ操作で調整
キャッシュ機能でリクエストを最適化し、高速表示をキープ

おすすめポイント

安定性◎：公式アップデートでInstagram仕様変更にも迅速対応
サポート充実：日本語ドキュメント＆フォーラムあり
拡張性：有料アドオンでストーリーズ表示など機能追加

有料ソリューションの機能比較ポイント

ビジネス要件が厳しい場合は、有料サービスの導入も検討しましょう。

以下の観点で比較すると選びやすいです。

スクロールできます

比較項目	EmbedSocial Pro	LightWidget Pro	Smash Balloon Pro
ストーリーズ対応	○	×	○
Reels埋め込み	○	△	△
デザインテンプレート	◎	○	◎
サポート対応	24/7	メールのみ	メール＋フォーラム
価格（月額）	¥1,200〜	¥800〜	¥1,500〜
APIコール制限緩和	○	×	○

🚀 選び方のコツ

ストーリーズやReelsを見せたい→EmbedSocial Pro
ローコストで基本機能を押さえたい→LightWidget Pro
WordPressプラグインにこだわりたい→Smash Balloon Pro

以上を参考に、自分のサイト運営スタイルや予算に合った外部サービスを選んでみてください！

自動投稿連携（WordPress→Instagram）の組み立て

Instagramをビジネスアカウントに切り替え

個人アカウントの確認
- アプリのプロフィール画面右上のメニューをタップ
- 「設定」→「アカウント」→「プロアカウントに切り替える」を選択
ビジネスアカウントの設定
- カテゴリ（例：ブログ、クリエイター）を選ぶ
- 連絡先情報やプロフィールリンクを入力
メリット
- 投稿分析機能が使える
- API連携時に必要な「ビジネス認証」がスムーズに

Tip:
切り替え後すぐにFacebookページと連携すると、管理が一元化できて便利です📈

Facebookページとの接続設定

Facebookページ作成／選択
- Facebookでビジネス用ページを新規作成（または既存ページを使用）
Instagramとリンク
- Facebookページの「設定」→「Instagram」タブ→「アカウントをリンク」
- Instagramビジネスアカウントの認証情報を入力
確認
- 両アカウントで「リンク済み」と表示されることをチェック

BufferやNelio Contentなど外部サービスの登録

Buffer
1. サイトで新規アカウント登録🔐
2. 「Connect an Instagram Account」をクリックし、Facebook経由で認証
3. 投稿スケジュールをカレンダーからドラッグ＆ドロップ
Nelio Content
1. WordPressプラグインをインストール＆有効化
2. Nelioダッシュボードで「Social Profiles」→「Instagram」を追加
3. 投稿編集画面でシェア用メッセージを作成

スクロールできます

サービス名	登録方法	特徴
Buffer	Webサイト上で完結	直感的なスケジュール管理😊
Nelio Content	WordPress内完結	記事作成～共有の一元管理🔄

予約投稿の運用ポイント

投稿プランの作成
- 週次・月次でテーマを決め、カレンダー化しておく
最適な投稿時間
- ユーザーのアクティブ時間帯に合わせて高エンゲージメントを狙う⏰
キャプション＆ハッシュタグの事前準備
- テンプレート化しておくと作業がスピードアップ
リマインダー設定
- 予約直前に最終チェック用リマインダーを入れておくと安心

ワンポイント
投稿後24時間以内のインサイト確認をルーチン化し、次回の改善に役立てましょう！

Instagram APIを使って独自実装する場合

Instagram Graph APIの基礎知識

Instagram Graph APIは、Facebookが提供する公式APIで、ビジネス・クリエイターアカウントを対象に投稿データやインサイト取得を行えます。

アクセストークン
- 有効期限付きのユーザーアクセストークンまたは長期トークンを取得
- 定期的にリフレッシュが必要🔄
主要エンドポイント
- /me/media：投稿一覧の取得
- /media/{media-id}：特定投稿のメタデータ取得
- /insights：いいね数・コメント数などの統計データ取得
権限（パーミッション）
- instagram_basic（プロフィール・投稿の読み取り）
- instagram_manage_insights（インサイト取得）
- pages_show_list や pages_read_engagement（Facebookページ連携）

ポイント

ビジネスアカウント必須：個人アカウントでは利用できません
テスト環境でAccess Token Debuggerを活用し、トークンの有効性を確認

自作API導入のメリット／デメリット

独自実装には柔軟性がありますが、開発・運用コストもかかります。

以下の表で比較してみましょう。

スクロールできます

比較項目	メリット	デメリット
カスタマイズ性	完全制御：表示形式やフィルターを細かく設定可能	開発工数が増大
リアルタイム性	リクエスト毎に最新データを取得できる	リクエスト制限（レートリミット）に要注意 🚧
パフォーマンス	キャッシュ戦略次第で高速表示が可能	キャッシュ設計・管理が必要
依存関係	外部プラグインに依存しない	Facebook API仕様変更対応が必須 🔄
セキュリティ	認可フローを自前で実装できる	トークン管理・脆弱性対策が必要

ワンポイント

短期構築ならプラグイン利用が手軽。
長期運用／高自由度を重視すると、自作APIが最適です。😊

導入前の評価基準とおすすめツール一覧

導入目的・埋め込みメディアの種類で選ぶ

サイトでどのような見せ方をしたいかを明確にしましょう。

単一投稿の強調：ひとつの写真や動画を目立たせたい → oEmbed やカスタムHTMLでシンプル埋め込み
フィード形式で一覧表示：複数投稿を並べて見せたい → プラグイン／外部ツールのグリッド機能
カルーセル表示：限られたスペースでスライド表示 → Smash Balloon や EmbedSocial のカルーセル機能
ストーリーズ・Reels対応：動的コンテンツを埋め込みたい → 有料プランまたはAPI実装が必要

日本語対応やサポート体制のチェック

初心者は特に日本語のマニュアルや問い合わせサポートがあるか要確認。

日本語ドキュメント：設定手順が日本語で解説されているか
サポートチャネル：メール・チャット・フォーラムなど、問い合わせ方法の豊富さ
コミュニティ：ユーザー同士のQ&Aやナレッジベースが充実しているか

パフォーマンスへの影響度合い

埋め込み数や外部リクエスト回数が多いほど、ページ表示速度に影響が出やすくなります。

キャッシュ機能：ツール内で自動キャッシュしてくれるか ✅
遅延読み込み対応：Lazy Load が標準で備わっているか ⏳
レスポンシブ最適化：モバイル表示でも余計なリクエストが発生しない設計か 📱

スクロールできます

ツール名	キャッシュ機能	Lazy Load	モバイル最適化
Smash Balloon Social Feed	○	○	○
EmbedSocial	○	△	○
LightWidget	×	△	○
Social Feed Gallery	△	×	△

無料／有料プランのコスパ比較

必要な機能と予算を照らし合わせて選択しましょう。

スクロールできます

ツール名	無料プランの制限	有料プランの主な追加機能	月額相場
EmbedSocial	フィード数3つまで	ストーリーズ対応・高度カスタマイズ	¥1,200〜
LightWidget	埋め込み数制限なしだがReelsは非対応	ハッシュタグフィルターの強化	¥800〜
Smash Balloon	グリッドのみ・キャッシュ期間短め	カルーセル表示・ライブ更新・Reels対応	¥1,500〜
Social Feed Gallery	複数アカウント非対応	複数アカウント管理・テンプレート増加	¥1,000〜

選び方のヒント

低予算でまず試したい → LightWidget
多機能＆安定性重視 → Smash Balloon
ストーリーズやReels必須 → EmbedSocial Pro 以上

以上を参考に、自分のサイトに合ったInstagram埋め込みツールを選び、効果的なビジュアル運用を始めましょう！

まとめ

本記事では、WordPressサイトにInstagramを埋め込むための各種手法を網羅的にご紹介しました。

oEmbed機能で手軽に埋め込む方法
カスタムHTMLでデザインを細かく調整するテクニック
おすすめプラグイン（Smash Balloonなど）の導入手順と設定ポイント
外部ツール・サービスでよりリッチなフィード表示を実現する方法
速度対策や権利確認など運用時の注意点

👣 次のステップとしては、実際にあなたのサイトで一度テスト表示を行い、

レイアウトの崩れがないか
読み込み速度に支障がないか
モバイルでの見え方

をチェックしてみてください。

これであなたのWordPressに、魅力的なInstagramフィードがしっかり馴染み、読者の滞在時間やエンゲージメントをグンとアップさせるはずです！🚀

この記事を参考にしながらぜひいくつかの方法を試し、あなたのサイトにぴったりな埋め込みスタイルを見つけてみてください✨