2026年9月2日

WordPressのInstagram埋め込みが表示されない

エラー・白い画面

はじめに

Instagramの投稿を直接WordPressサイトで見せたいことはよくあります。しかし、インスタグラムの埋め込みがうまく表示されない場合があります。この記事では、その原因と対処方法について説明します。

症状・背景

Instagramの投稿をWordPressの記事内で表示しようとするとHTMLタグがそのまま表示される
フィードバックやコメント欄に「Instagramの埋め込みが見つかりません」というメッセージが出る
インスタグラムのURLを直接貼り付けただけでは、プレビュー画面でインスタグラムの画像は表示されない

手順・設定方法

ステップ1: InstagramのJavaScript APIを使用する

# WordPressサイトにJavaScriptを追加します。functions.phpファイルを開きます。
nano wp-content/themes/yourtheme/functions.php

# 以下のスニペットをfunctions.phpに追加します。
function add_instagram_script() {
    echo '<script src="https://www.instagram.com/embed.js"></script>';
}
add_action( 'wp_head', 'add_instagram_script' );

ステップ2: Instagramの埋め込み用ショートコードを作成

# WordPressにショートコードを追加します。functions.phpファイルを開きます。
nano wp-content/themes/yourtheme/functions.php

# 以下のスニペットをfunctions.phpに追加します。
function instagram_embed_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'url' => '',
    ), $atts));

    return '<blockquote class="instagram-media" data-instgrm-version="10" style="background:#fff; padding:0;"><a href="' . esc_url($url) . '" tabindex="-1"></a></blockquote>';
}
add_shortcode( 'instagram', 'instagram_embed_shortcode' );

ステップ3: インスタグラムの投稿をショートコードで表示

# WordPress記事内でインスタグラムの投稿を表示します。
# 記事エディタに以下のショートコードを挿入します。インスタグラムのURLは適宜変更してください。
[instagram url="https://www.instagram.com/p/example_post_id/"]

ステップ4: インプラグメントを使用する

# Instagram Shortcode Plusというプラグインをインストールして有効化します。
# WordPressの管理ダッシュボードから「プラグイン」→「新規追加」で検索し、インストールと有効化を行います。

# プラグインをインストールしたら、インスタグラムの投稿を表示するショートコードを使用できます。
# 例: [instagram_shortcode id="example_post_id"]

注意事項

インターネット接続が安定していないとInstagram APIは正常に動作しない可能性があります
プラグインを使う場合は、そのプラグインの更新によりショートコードや設定が変更される場合があるので注意が必要です。
信頼性のあるソースからJavaScriptを取得し、セキュリティチェックを行ってください。
サイトパフォーマンスに影響を与えないよう、適切なキャッシュプラグインを使用することを検討してください。

まとめ

1. JavaScript追加: InstagramのJavaScript APIをサイトに追加することで、埋め込み機能が利用可能になります。

2. ショートコード作成: WordPress記事内でInstagramの投稿を表示するためのショートコードを作ります。

3. プラグイン活用: インスタグラムの投稿を簡単に表示できるプラグインを利用しましょう。

4. インターネット接続: Instagram APIが正常に動作するには安定したインターネット接続が必要です。

5. セキュリティチェック: JavaScriptファイルやショートコードの安全性を確認してください。

Post Views: 9