インスタグラムの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 埋め込みサンプル
(画像です)

Instagram Feedの埋め込み

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

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

WordPress プラグイン Instagram Feed

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

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

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

wordpress instagram feed メニュー

Instagram Feed アカウント認証

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

wordpress instagram feed 認証

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

wordpress-instagram-feed-アクセストークン

Instagram のID(数字)を調べる場合

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

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

インスタグラムの数字IDを調べることができるサイト

テスト表示

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

instagram Feed 埋め込みサンプル
(画像です)

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

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

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

カスタマイズ画面

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

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

ヘッダー

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

ReadMoreボタンカスタマイズ

フォローボタン カスタマイズ

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

スポンサーリンク

コメントをどうぞ

  1. お返事ありがとうございます。
    表示されてないことに気付いた日の前後で、特に新たなプラグインを導入したりテーマ含めて更新もしておらず、phpをいじったりもしていなかったので、インスタの埋め込み仕様の変更かと思いインスタ公式を確認しましたが特に変更はされておらず・・・。
    んん~と思っていたところで誰かに聞いてみようと思い質問させていただきました。
    java scriptの設定というコメントに、iphone側の設定が変わってしまったのかと思って先ほど確認してみたら・・・昨日は表示されなかったインスタの埋め込み写真が表示されていました・・・。
    原因はつかめていませんが、なぜか復旧したようなのでしばらく様子をみてみることにします。
    お忙しい所、迅速で丁寧なコメントをいただきありがとうございました。
    取り急ぎ報告まで。

    1. >snow様
      ご連絡ありがとうございます。
      とりあえず復旧したようでなによりです。また何かあればコメント下さい!

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。