WordPressにInstagramを埋め込む2+1つの方法

Instagramをお持ちなら「もっと多くの人にアカウントを認知してもらいたい」と考える方も少なくないだろう。

そこで活用したいのがホームページへのInstagram埋め込みだ。
Instagramの埋め込みを行うことで、Instagramアカウントの存在をホームページを訪問したユーザーにアピールすることができ、またInstagramアカウント持たないユーザーにも投稿内容を見せることができる。

本記事では、WordPressサイトにInstagramを埋め込む方法を解説する。
特定のインスタ投稿の埋め込みとインスタ投稿一覧を埋め込む方法の両方を解説するのでぜひ最後までご覧になっていただければと思う。

WordPressへInstagramを埋め込む2通りのパターン

WordPressにInstagramを埋め込むには下記2つのパターンがある。

• 特定のインスタ投稿を埋め込む
• インスタ投稿の一覧を埋め込む

それぞれの完成イメージは以下の通り。

インスタ投稿一覧を埋め込む場合は、Instagramの更新に合わせて埋め込みの表示内容も自動更新される。
更に表示させる投稿数（列・行）や背景色なども簡単にカスタム可能だ。

ではさっそく上記2パターンの埋め込み方法について順に解説したいと思う。

特定のInstagram投稿をWordPressへ埋め込む方法

まずは特定のインスタ投稿をブログページ等へ埋め込む方法になる。
ちなみに埋め込みたい投稿がフィード投稿（写真）でもリール動画でも埋め込み方法は全く同じである。

以上が、WordPressにInstagramのフィード投稿を埋め込む手順となる。
ちなみに、テストで埋め込みを行ったInstagram投稿は下記のようになる。

この投稿をInstagramで見る

UNIQLO Global(@uniqlo)がシェアした投稿

プラグインを使ってInstagram投稿一覧を埋め込む方法

続いてインスタ投稿一覧を埋め込んで表示させる方法の解説になる。
インスタ投稿一覧を埋め込む場合は「Smash Balloon Social Photo Feed」というプラグインを使用していく。
大まかな手順は下記のとおり。

1. 「Smash Balloon Social Photo Feed」をインストールする
2. WordPressとInstagramアカウントを連携させる
3. 埋め込みフィードの作成
4. ショートコードの取得
5. ショートコードを貼り付ける

複雑な作業は必要なく10分ほどで完了するはずなので、一緒に進めてみよう。

【おまけ】ウィジェット（サイドバーやフッター）にインスタ投稿一覧を埋め込む方法

次に、ウィジェットなどにインスタ投稿一覧を埋め込む方法も解説したい。

まず、ウィジェットのカスタマイズを行う場合は下記画面にある[外観]>[ウィジェット]をクリックする。
下記画面では右側にブログ・お知らせなどが並んでいるが操作できるメニューはテーマによって異なるので注意しよう。

今回はブログ（ブログページのサイドバー）にInstagramタイムラインを埋め込みたいと思う。

まずはブログ項目の[+]>[ショートコード]をクリックしてブロックを追加する。

続いて、先ほどSmash Balloon Social Photo Feedで作成した埋め込みフィードのショートコードを貼り付ける。
最後に画面右上の[更新]をクリックして完了となる。

実際にブログページを見てみよう。Instagramのフィード埋め込みが反映されているはずだ。

【上級者向け】APIでInstagram投稿一覧を埋め込む方法

※ 上級者向けです。最終的にCSSを使ってデザインを調整する必要があります。

API（アプリケーション・プログラミング・インターフェイス）：
ソフトウェアやアプリケーションなどの機能の一部を外部から利用できるようにするための決まり事のこと

プラグインを使わずにインスタ投稿一覧を表示させる方法の解説する。大まかな手順は以下のとおり。

1. InstagramプロアカウントとFacebookページを用意
2. InstagramとFacebookページを連携させる
3. Meta for Developersでアプリ作成の準備
4. アクセストークンを取得
5. InstagramビジネスIDを取得
6. インスタ投稿の表示

操作自体は簡単だが、慣れていないと作業時間が長かかるのでまとまった時間を確保して進めるといいだろう。

InstagramプロアカウントとFacebookページを用意

InstagramとFacebookページを連携させる

続いてInstagramアカウントとFacebookページを連携させる。

Meta for Developersでアプリ作成の準備

Meta for Developers：FacebookやInstagramのデータを外部から使用するために必要なツール

続いてInstagramが公開しているAPI「Instagram グラフ API」を使って以下の2つを取得する。

• アクセストークン
• InstagramビジネスアカウントID

アクセストークンを取得

アクセストークン：アプリケーションがデータ利用を許可するために発行する文字列

ここから3段階でアクセストークンを取得することになる。少し長くなるが頑張ってついてきてほしい。

InstagramビジネスIDを取得

グラフAPIエクスプローラ画面で以下の項目を入力し、画面右上の「送信」をクリック。

• 画面上フォーム部分：me?fields=instagram_business_account
• アクセストークン：【3つ目のアクセストークン】

文字列が表示される。下記に該当する場所がInstagramビジネスアカウントIDだ。

{
   "instagram_business_account": {
      "id": "【InstagramビジネスアカウントID】"
      // 以下略

インスタ投稿を表示

最後に取得した【3つ目のアクセストークン】と【InstagramビジネスアカウントID】を使ってサイト上にインスタ投稿を表示させる。

WordPressのソースファイルに下記の内容を記載すると、最新のインスタ投稿を指定した件数分表示してくれる。デザインはCSSを使って調整してみてほしい。

<ul class="insta_list">
    <?php
    $insta_media_limit = '【表示件数】';
    $insta_business_id = '【InstagramビジネスアカウントID】';
    $insta_access_token = '【3つ目のアクセストークン】';

    $json = file_get_contents("https://graph.facebook.com/【Instagram グラフ APIのバージョン】/{$insta_business_id}?fields=name%2Cmedia.limit({$insta_media_limit})%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D&access_token={$insta_access_token}");

    $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $obj = json_decode($json, true);

    $insta = [];

    foreach ($obj['media']['data'] as $k => $v) {
        if ($v['thumbnail_url']) {
            $data = [
                'img' => $v['thumbnail_url'],
                'caption' => $v['caption'],
                'link' => $v['permalink'],
            ];
        } else {
            $data = [
                'img' => $v['media_url'],
                'caption' => $v['caption'],
                'link' => $v['permalink'],
            ];
        }
        $insta[] = $data;
    }
    foreach ($insta as $k => $v) {
        echo '<li><a href="' . $v['link'] . '"><img src="' . $v['img'] . '"></a></li>';
    }
    ?>
</ul>

こちらサイトで詳しく解説されています。

どこまでもだらけるとりとん

【PHP/JavaScript】Instagramを自動更新で埋め込む方法～取得方法から画像付きで紹介～ 1.インスタの投稿写真(動画の場合はサムネ)の情報を「Instagram Graph API」を使って取得する方法。2.取得した情報をWebページに表示させるためのPHPとJavaScriptそれぞれ...

WordPressに埋め込みしたInstagram投稿が表示されない場合

また、WordPressへインスタ投稿を埋め込んでみたものの、下記画面のように上手く表示されないといったご相談も富山工房へよく寄せられる。

インスタ投稿の埋め込みが表示されない原因は下記のとおり。

iPhone・Macでのsafariにおけるプラバシー保護機能が原因

表示されない場合、safariの設定画面で[サイト越えトラッキングを防ぐ][IPアドレスを非公開]の2つをoffにすれば解決する。

しかしインスタ投稿の埋め込みが表示されずにお困りの方はサイト運営者の方が多く、訪問者へsafari設定の指示まで出すことはできないだろう。

WordPressサイト運営者側にできる対策として、アフィリエイターのラック氏が有益な方法を紹介してくださっている。

解決方法は非常に簡単で、下記コードをサイトフッターに記載するだけで良い。

<script async src="https://www.instagram.com/static/bundles/es6/EmbedSDK.js/2fe3a16f6aeb.js"></script>

※上記解決策は2019年の情報なので注意

参照：インスタの埋め込み画像が表示されないのを解決した話

Instagramの投稿埋め込みに関するよくある質問

その他にもよくあるトラブルや質問についてまとめてみたのでご覧頂きたい。

埋め込んだタイムラインは自動更新されますか？

インスタの投稿に合わせて自動更新されるが、WordPress上での更新頻度が1日1回なのでタイムラグは発生します。

埋め込み投稿のサイズ変更はできますか？

埋め込みコードの内にある「max-width:540px;」の箇所の数値を変更することで可能。数字の大きさに比例し、320程度がPC・スマホのどちらにも合うのでお勧めです。

Instagramのプロフィールを埋め込みできますか？

InstagramはtwitterやFacebookと違いアカウントプロフィールの埋め込みはできません。

他人の投稿を埋め込むのは著作権侵害にあたりますか？

Instagram運営会社であるMETA社から下記の公式見解が発表されています。埋め込み前に投稿者の許可を取ることをお勧めします。

同社が第三者へサブライセンスを付与することは可能だが、埋め込みAPIに対しては与えていない。

同社のプラットフォーム・ポリシーでは、第三者が投稿を使用する場合、著作権者から適切な権利を得ることを求めている。

Instagramの埋め込みまとめ

以上、WordPressサイトへInstagramを埋め込む方法をご紹介させて頂いた。

WordPressのプラグインなどを使えば無料で簡単に可能なので是非試してみよう。

また、インスタ集客で運用などでお困りの方は是非富山工房へご相談いただけると幸いだ。
あなたのお力になれる日をお待ちしている。