WordPress 記事内やサイドバーにインスタグラムを表示「Instagram フィード」

2017年8月17日プラグイン

WRXの燃費に関しての記事で使用している、記事内でグラフを表示するWordPressのプラグイン「M Chart」について、このブログで扱う内容とはちょっと違うと思いつつも、唯一ブログ内で紹介しています。しかしカテゴリーやタブ分けでWordPress関連の記事数「1」というのも寂しいので、このブログで使用しているプラグインについては少しずつ紹介してみようと思います。今回はインスタグラムを記事内やサイドバー(ウィジェット)に表示するプラグイン「Instagram フィード」についてです。

スポンサーリンク

プラグイン「Instagram フィード」

インスタグラム用のプラグインも数多くあるのですが、私が使用している「Instagram フィード」は比較的シンプルで簡単なプラグインだと思います。有料版の「Pro」もありますが、無料版の方です。シンプルな分、あまり凝った設定なども出来ない印象です。詳細については以下を見て下さい。ただしプラグイン本体を含めて日本語化はされていません(2017年8月現在)。

私はサイドバーにウィジェットとして置いています。どんな感じかは見て頂ければ一目瞭然かと思います。写真は自己アピールというよりも単に「写真置き場」なので、いわゆる見栄えする様な物は一切ありませんが・・・。

※2019年8月現在、プラグイン名が「Smash Balloon Social Photo Feed」に変更されています。ただしWordPressにインストールされたプラグイン名は「Instagram Feed」のままで、機能や設定自体に大きな違いは無い様子です。また「Smash Balloon Social Photo Feed」とは別に「Smash Balloon Social Post Feed」という同じ作者によるプラグインもありますが、こちらはFacebookに対応するプラグインになっている様です。

さらに同じ作者によるTwitterのプラグインもあるので、こちらもいずれ似た様な名称になるのかもしれません。

インストール

インストール方法は他のプラグインと同じです。WordPressのプラグイン新規追加で「Instagram Feed」と入力して検索しますが、同じ名前や似たような名前のプラグインが多くあります。

上記が今回のプラグインです。アイコンで見比べれば分かりやすいと思います。インストール後にプラグインを「有効化」します。

※2019年8月、先のプラグイン名称が変わった点がありますが、検索で「Instagram Feed」としても「Smash Balloon Social Photo Feed」が表示されます。

設定「1.Configure」

WordPress管理画面の左メニューに「Instagram Feed」が追加されます。クリックすると設定画面になります(通常のプラグイン一覧からInstagram Feedの「設定」でも可)。

まず最初に行う事は、インスタグラムからAccess TokenとUser IDを取得します。User IDの下に他にもありますが、こちらはPro版の機能なので今回は使用しません。「1.Configure」のタブ画面で青い大きなボタンをクリックします。

青いボタンをクリックするとインスタグラムへのログイン画面が出るので、ユーザーネームとパスワードを入力してログインします。既にログインしている場合はログイン画面は出ません。

インスタグラムへのログインが完了すると、先ほどクリックした青いボタンの下にAccess TokenとUser IDが表示されます。表示されたAccess TokenとUser IDをその下の入力欄にコピー&ペーストします。入力欄への記入をしたら一番下にある「変更を保存」をクリックします。

※インスタグラムへのログイン後(ログイン済みの時は青いボタンをクリック後)に今回のプラグインからのアクセス許可に関するウィンドウが出ます。「Authorize」をクリックしてプラグインからのアクセスを許可します。

※インスタグラムへのログイン後、あるいは青いボタンをクリック後に下記の様なエラーになってしまう場合がありました(私の場合はchromeブラウザ)。

この場合、青いボタンをクリックするのではなく、青いボタン上で右クリック後に「新しいタブで開く」で別のタブで開く事でAccess TokenとUser IDが取得出来ました。この現象は何でしょうね?

2018年9月追記

現在のバージョンではAccess TokenとUser IDの入力方法が少し異なっている様です。

上記で一番上の大きなボタンからAccess TokenとUser IDを取得する方法は変わりませんが、私の場合、ボタンのクリックや前回では上手くいった右クリックから別ウィンドウ(タブ)で開いても、今回はエラーとなってしまいました。この場合はボタンの隣にある「Button not working?」をクリックします。

するとプラグイン作成元のHPが開き、Access TokenとUser IDを表示させる事が出来ます。先にPC上でInstagramにログインしておいた方が良いかもしれません。

表示されたAccess Tokenを先の「2」の「Manually Connect an Account」ボタンを押し、表示された入力欄にコピペして「Connect This Account」ボタンを押します。その後はその上の「3」にアカウントが表示されるので、隣の「Add to Primary Feed」を押すと「2」の下にある「Show Photos From」にアカウント名が追加されます。「User ID」のコピペは必要ありませんでした。

また現在のバージョンでは、他のInstagramアカウントも複数扱える様ですが、私は1つしか持っていないので試していません。

スポンサーリンク

設定「2.Customize」

Access TokenとUser IDを設定、保存したら「2.Customize」のタブを選択して表示の設定を行います。色々項目がありますがPro版でなければ使えない機能が多くあるので、実際に設定出来る項目は少ないです。

↑私は特にデフォルトから変更していません。プラグイン側でレスポンシブ対応がなされているので、デスクトップでもスマホでも問題無く表示されています。

↑表示の順番、表示する写真の数、列数、写真の大きさ、写真同士のすき間など。表示順に関しては新しい順かランダムかの2択です。ここでは主に写真の数と列数を設定する事になるでしょう。

↑ヘッダーは自分の名前や紹介文の部分です。色も選べます。

↑Load Moreは表示されている写真からさらに多く(続き)の写真を表示させるボタンです。私の場合は2*2で4枚の写真を表示していますが、「Load More」をクリックするとその下に表示されていない別の写真が追加で表示されます。・・・しかし追加するのは良いけど、減らせないですね。どんどん伸びる一方です。

↑フォローボタンはそのままの意味です。各設定が出来たら「変更を保存」をクリックして保存して下さい。

2018年9月追記

Customizeの項目内も現在のバージョンでは少し異なっています。内容自体には大きな変更は無さそうですが、ヘッダーに関して設定出来る内容が少し増えたでしょうか。Custom CSSやJavaScriptの記述なども出来る様になっています。

ただしV1.10にしてから「Load More」のボタンが、「表示」にチェックを入れても表示されていません。またこれはアプリ側の問題かと思いますが、スマホのOperaブラウザでは設定でデータ圧縮を有効にしていると、Instagramフィードが表示出来ません(ロード中のまま)。

※V1.10.1で「Load More」のボタン非表示は解消されました。それでも表示されない場合はWebブラウザのキャッシュも一旦クリアした方が良さそうです。

設定「3.Display your Feed」

ショートコードを記事やウィジェットに貼る事で、「2.Customize」で設定した内容でインスタグラムの写真が表示される様になります。

基本的にはショートコードとして上記矢印のコードを貼るだけですが、ショートコード内に追記する事が出来るオプションがその下に記載されています。この場合は「2.Customize」で設定した内容よりも優先して反映されると思いますが、こちらのオプションも半分くらいはPro版のみです。私は全く使っていません。

その他

このプラグインは本当にインスタグラムの写真を表示するだけの機能です。Pro版や他のプラグインでは「いいね!」の数やコメントの表示、ハッシュタグを用いた表示の設定も可能の様です。私の様に「インスタグラムもやってます」程度の紹介であれば十分だと思います。肝心のインスタグラムの写真をあまり更新していませんけど・・・。