ワードプレスのサイドバー等に
Instagramのフィードをプラグインで表示させる方法です。
（トラブル対応事例あり）
料理やインテリアの写真が
来客動機に大きく関わるカフェや飲食店舗の場合
Instagramを運用しているお店は多いと思います。
もしあなたの店舗のサイトをwordpressで作成しているなら
簡単にサイト上にInstagramを表示させることができます。
Contents
ワードプレスにInstagramのフィードを表示させる手順（プラグイン使用）
プラグイン『Instagramフィード』をインストールする
『プラグインを追加』のページの
キーワードに『Instagram フィード』と記入します。
すると『Instagram フィード』のプラグインがでてきますので
『今すぐインストール』をクリックします。
そのまま『有効化』をクリックします。
プラグイン『Instagramフィード』の初期設定
有効化したらダッシュボードの『設定』の中に
『InstagramFeed』があるのでクリックします。
するとInstagramFeedの設定画面に変わります。
青色の部分
『Instagram Connect an Instagram Accoount』
クリックします。
表示させたいアカウントであることを確認して
『承認』をクリックします。
画面にでているのが
表示させたいアカウントか確認して
『Add to Primary Feed』をクリックして
『変更を保存』をクリックします。
これで初期設定は終了です。
まだ終わりじゃありません。
『Instagramフィード』の『Customize』設定を変更する
『Instagramフィード』に
『Customize』のページがあります。
その名の通り色々とカスタマイズが可能です。
基本そのままでも問題ないのですが
1か所だけ変更した方がお勧めな箇所があるので
表記しておきます。
まず画面上部の
『Customize』をクリックします。
すると下の画面になるので
ちょっとだけスクロールします。
すると
『Number of Photos』
（表示する投稿数）
の欄がでてくるので
『12』か『9』あたりに変更します。
さらに
『Number of Columns』
（表示する列の数）
を『3』に変更します。
初期設定だと
『Number of Photos』が15
でちょっと多いのと
『Number of Columns』が４だか５で
それだとInstagram感が少なく
Instagramアカウントの表示と
気づかれない可能性があるので変更しました。
あとはレイアウトとか
色合いとか変更できますので
お好みでカスタマイズしてください。
『Instagramフィード』の『Display Your Feed』からショートコードをコピーする
画面上部の
『Display Your Feed』をクリックします。
『[Instagram-feed]』をコピーします。
Instagramのフィードをワードプレスに表示させるための『ウィジェット』を作成する
ワードプレスのダッシュボードの
『外観』にカーソルを合わせて
『ウィジェット』をクリックします。
『テキスト』をクリックします。
Instagramを表示させたい箇所
（今回はメインサイドバー）
を選んで
『ウィジェットを追加』
をクリックします。
タイトルは任意で記入します。
『Display Your Feed』でコピーした
『[Instagram-feed]』
を枠内貼り付けます。
最後に『保存』をクリック
するのを忘れずに。
表示させたい位置に
移動させれば終了です。
（カーソルドラックで動きます）
こんな感じに表示されます。
【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法
実はすんなりと
『Instagram Feed』の設定が終わらないことがあります。
このサイトの設定の時もすんなりいきませんでした。
この画面がでて
『承認』をクリックしたのですが
画面に目的のInstagramアカウントが表示されません。
というか画面が変わりませんでした。
そんな時は
Instagramアカウント追加のボタンの横にある
『Button not working?』
をクリックします。
画面が変わるので
『Click here to get your Instagram ～』
をクリックします。
『Personal』にチェックが
付いているを確認して
『Connect』をクリックします。
下記の画面に変わるので
『Access Token』の右側の文字列
（これがAccess Tokenです）
をコピーします。
（赤の塗りつぶし箇所）
InstagramFeedの画面に戻って
『Manually Connect an Accoount』をクリックすると
枠が追加されるので
コピーしたAccess Tokenを貼り付けます。
するとアカウントが表示されます。
後は同じです。
【トラブル対応】Access Tokenが取得できない場合
普通ならこの対処法でいいのですが
まれに『Personal』にチェックが付いているを確認して
『Connect』をクリックしても
Access Tokenが取得できない場合があります。
何回やっても
『Instagram Connection Error』
がでることがあります。
そうなると少し手間がかかりますが
自分で『Instagram API』を設定して
そこの『Manage Clients』から
直接Access Tokenを取得する方法が早いかと思います。
（詳しくは『Instagram API Access Token取得』
あたりで検索してみてください）
コメント