新潟県妙高市を拠点とする、ホームページと広告の相談相手

MENU [+]閉じる [×]
【WordPress】Instagramの投稿表示するプラグイン「Instagram Feed」の使用法&表示されない場合の注意点

今回は「WordPressとInstagramの連携の方法」についてです。

WordPressのサイト内にInstagramの最新投稿を表示させるとき、皆さんはどうしていますか?

Instagramの投稿を1件だけWordPressの記事本文に表示させる場合はInstagramの側に「埋め込み」の機能がありますが、記事本文以外の場所、例えばサイドバーや記事下に表示させる場合はプラグインを使って表示させる方法が一般的です。

今回はその中でも「Instagram Feed(インスタグラム・フィード)」についてのご紹介です( ^∀^)

この記事の目次

WordPressプラグイン「Instagram Feed」について

今回使用するのは「Instagram Feed」というプラグインです。

類似の名前のプラグインが多数存在していますが、ここでご紹介するのは、こちらのURLで紹介されているプラグインです。

本稿執筆時点(2017年10月13日)の最新版である「WordPress4.8.2」までテスト済みとの記述が見られます。

それ以降の更新に関しては、上記のリンク先をご確認ください。

また、下記のサイトでは「Instagram Feed」の設定方法を詳細に紹介されています。

Instagramをブログに埋め込むWordPressプラグイン【Instagram Feed】の設定方法!

インスタの写真をアップ!WordPressでInstagramの写真を表示する方法【初心者向け】

ページの先頭へ戻る

インストール&有効化から設定画面へ

手順1:「Instagram Feed」をインストール&有効化する

まずは「Instagram Feed」をインストールして、完了し次第表示される「有効化」ボタンをクリックします。

注意点としては、似たような名称のプラグインと間違えないようにしてください、くらいです。

有効化すると、WordPressの管理画面の左側の[設定]の近くに「Instagram Feed」をいう項目が、カメラのアイコン付きで表示されるかと思いますので、そこをクリックしてください。

手順2:「1.Configure」で「アクセストークン」と「ユーザーID」なるものを取得する

「Instagram Feed」の設定画面に移動すると、初期状態で「1.Configure」なるタブの内容が表示されているはずです。

(表示されていない場合は「1.Configure」のタブをクリックしてください。)

すると、Instagramのロゴのついた青い横長ボタンが表示されているかと思います。

2番目の手順ではそのボタンを押して「アクセストークン」と「ユーザーID」を取得します。

「ユーザーID」というワードは、ときどき聞きますよね?

「アクセストークン」に関しては、ここでは「WordPressのサイト管理者とInstagramのアカウント管理者とが同一人物か、あるいは連動させることに問題ありません」ということを示すパスワードのようなもの、とお考えください。

ボタンを押してWordPressの管理画面上にアクセストークンとユーザーIDが表示されたら、それらをコピー&ペーストします。

アクセストークンは「Access Token」という欄に。

ユーザーIDは「Show Photos From」というラジオボタンで「User ID(s)」を選択した状態で、右のテキストボックスにユーザーIDをペーストします。

気をつけたいのが、「ユーザーID」に入力するのは、WordPress管理画面に表示された青いボタンを押して表示される「数値」であって、皆さんそれぞれがインスタグラムで使用している「アカウント名」の方ではないという点です。

意外とつまづきやすいのでご注意を(^^;)

手順3:表示用のショートコードを取得する

続いて、「Instagram Feed」の設定画面の「3.Display Your Feed」というタブをクリックします。

すると「Copy and paste the following shortcode …」という文言があり、その下に[instagram-feed]のように表示されているかと思います。

そちらをコピーして、サイドバーや記事下などにペーストしてみてください。

記事内に表示させることも可能です。

また、「Instagram Feed」の設定画面に「2.Customize」というタブがあります。

そちらでは、画像の表示領域の幅や大きさ、色などの設定もできます。

独自のものにカスタマイズしてみてください(^^)

ページの先頭へ戻る

問題発生!?表示エリアでアイコンがぐるぐる回る件の原因と解決案

さて、上記の手順だけで無事に表示されれば、それで完了です!

でも!!

場合によっては「アイコンのようなものがぐるぐる回り続けるだけで、Instagramの投稿が全然表示されない」という現象が発生する場合があります。

原因にはいくつか考えられますが、こちらの記述を見直すことで解決できる場合があります。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.x.x/jquery.min.js"></script>

なんとjQueryの読み込みです!

WordPressでは標準で、そのテーマに応じて読み込んでいるjQueryがありますが、特に独自デザインのWebサイトをWordPressで作る場合に、それらの読み込みを停止して、[header.php]に上記のコードを記述する場合があります。

その場合に、「Instagram Feed」の処理との相性の関係でうまくいかず、読み込みができなくなっている可能性があるのです。

なので、あくまで他の機能も検討した上で、問題なければWordPressで標準で読み込んでいるjQueryに戻すことで解決する場合もあります。

ただ、これだけで解決しない場合もありますので、注意が必要です。

jQueryをWordPress標準のものに戻して解決しない場合は、ふたたび作業前のjQueryの読み込みに戻した上で、別の方法をお試しくださいm(__)m

ページの先頭へ戻る

この記事の感想をお寄せください

[【WordPress】Instagramの投稿表示するプラグイン「Instagram Feed」の使用法&表示されない場合の注意点]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

いいね!と思っていただけたらSNSでシェアしてください♪

関連記事一覧:【WordPress】Instagramの投稿表示するプラグイン「Instagram Feed」の使用法&表示されない場合の注意点

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ