インスタグラムのfeedを埋め込むWordPress プラグイン Instagram Feed 使い方やカスタマイズ、数字ID（User ID）の調べ方など

質問者snow様から「iphoneでWordPressサイトに埋め込んだインスタ画像が表示されない」というご質問を頂きました。

解決策となるかはわかりませんが、インスタグラムのfeedをWordPressに埋め込むプラグイン Instagram Feedの設定フローをご紹介します。

実際の画像埋め込みや画像feedも表示しているので、iPhoneで表示されているか確認してみてください。原因を絞りこむ基準にはなると思います。

WordPressサイトに埋め込んだインスタ画像がiPhoneで表示されない

snow

はじめまして。
WordPressで作成したwebサイトにインスタグラムを埋め込み表示しており、今までは問題なく表示されていましたが、本日iphoneで確認したところ、インスタの表示枠は表示されているんですがpicが表示されていませんでした。PC上では現在もちゃんと表示されているので、iphoneまたはスマホに限っての状態だと思われます。
自分のサイトだけでなく、他のサイトの埋め込みインスタpicも同様の現象が見られます。
現象や対処方法などご存知ないでしょうか？
※私のスマホに限っての現象でしたら申し訳ありません。
宜しくお願いいたします。

＞snow様
コメントありがとうございます！
僕がiPhoneもinstagramも使っていないので何とも言えないのですが、他のサイトを見ても表示されていないのであれば、snow様のiPhoneの問題の可能性が高いでしょうか。
（JavaScriptがOFFになっているなど？？）

他に
1.現在のインスタ埋め込みの方法の問題
2.プラグインの競合
なども考えられます。

例えば、
・埋め込みの方法・仕様が変わっていないか
・他にインスタなどSNS系のプラグインを入れていないか
・iframeや埋め込みに関するコードをfunctions.phpに記述していないか
などなど。

一応以前使ったことのある「Instagram Feed」や普通の埋め込み方法を記事にまとめたのでこちらでも画像が表示されているか確認してみてください。（Androidでは問題ありませんでした）

※埋め込みなどはそのうち画像に置き換え、プラグインもOFFにすると思いますので、確認後にコメント等頂けると助かります。

通常のインスタグラム画像の埋め込み

通常の埋め込みとFeedの埋め込みでも話が違ってきますので、まずは通常の埋め込みから。

通常の埋め込みは許可されていれば誰の画像でも埋め込みコードを取得できます。

1.画像をクリックして
2.右下のメニューをクリック

3.埋め込みを選択

4.コードをコピーして貼り付け

このようになります。（実際の埋め込みイメージ）

（画像です）

Instagram Feedの埋め込み

個別のインスタグラム画像の埋め込みに対してfeedの埋め込みにはAPI・アクセストークンが必要です。

ご紹介するInstagram Feedプラグインは、ユーザーのフィードを埋め込み、画像の自動取得・表示ができます。

WordPress プラグイン Instagram Feed

Instagram Feed はプラグインはこちら
https://ja.wordpress.org/plugins/instagram-feed/

インストール・有効化をしましょう。

設定画面に移動すると思いますが、メニューにもInstagram Feed が表示されます

Instagram Feed アカウント認証

「log in and get my Access Token and User ID」をクリックし、インスタグラムにログインしていなければログイン画面になるのでログインしましょう。

ログインが成功すると、自動的に元の設定画面に戻り、アクセストークンと自分のアカウントのユーザーIDが取得されます。

Instagram のID（数字）を調べる場合

User IDを入力しなくても、このままで自分のUser IDは取得できているので、ショートコード[[instagram-feed]]で自分のフィードを埋め込み表示することは可能です。

別アカウントを表示するには、以下のサイトなどでユーザーネームを入力し、IDを取得して入力しましょう。
https://smashballoon.com/instagram-feed/find-instagram-user-id/

テスト表示

サンプル画像です。ID名の部分など、サイトのCSSの影響を受けている所もあります。

（画像です）

表示件数や表示列の変更・フォローボタンの表示など、Feedをカスタマイズ

Instagram Feedメニューから、「Customize」でインスタ画像の表示件数を始めとしたカスタマイズが行えます。

「Display Your Feed」からショートコードのカスタマイズが行えるので、ここでIDなどを指定することもできるようです。（こちらは試したことないです）

Layout
Number of Photos 4
Number of Columns 4
なら4列表示で4枚です。

Header
プロフィールアイコンの表示・非表示

Read more や Follow でボタンの表示やテキストの変更も行えます。

原因が特定できないので完全な解決にはならないかもしれませんが、今後の参考になれば幸いです。