カフェ・飲食店の為の軽減税率をふまえた売上の作り方セミナーバナー      

ワードプレスのサイドバー等に
Instagramのフィードをプラグインで表示させる方法です。
(トラブル対応事例あり)
料理やインテリアの写真が
来客動機に大きく関わるカフェや飲食店舗の場合
Instagramを運用しているお店は多いと思います。
もしあなたの店舗のサイトをwordpressで作成しているなら
簡単にサイト上にInstagramを表示させることができます。

ワードプレスにInstagramのフィードを表示させる手順(プラグイン使用)

プラグイン『Instagramフィード』をインストールする

『プラグインを追加』のページの
キーワードに『Instagram フィード』と記入します。
すると『Instagram フィード』のプラグインがでてきますので
『今すぐインストール』をクリックします。

プラグイン『Instagram feed』をインストールする

そのまま『有効化』をクリックします。

プラグイン『Instagramフィード』をインストールする

プラグイン『Instagramフィード』の初期設定

有効化したらダッシュボードの『設定』の中に
『InstagramFeed』があるのでクリックします。

プラグイン『Instagramフィード』の初期設定

するとInstagramFeedの設定画面に変わります。
青色の部分
『Instagram Connect an Instagram Accoount』
クリックします。

表示させたいアカウントであることを確認して
『承認』をクリックします。

プラグイン『Instagramフィード』の初期設定

画面にでているのが
表示させたいアカウントか確認して
『Add to Primary Feed』をクリックして
『変更を保存』をクリックします。

プラグイン『Instagramフィード』の初期設定

これで初期設定は終了です。
まだ終わりじゃありません。

『Instagramフィード』の『Customize』設定を変更する

『Instagramフィード』に
『Customize』のページがあります。
その名の通り色々とカスタマイズが可能です。
基本そのままでも問題ないのですが
1か所だけ変更した方がお勧めな箇所があるので
表記しておきます。

まず画面上部の
『Customize』をクリックします。

『Instagramフィード』の『Customize』設定を変更する

すると下の画面になるので
ちょっとだけスクロールします。

『Instagramフィード』の『Customize』設定を変更する

すると
『Number of Photos』
(表示する投稿数)
の欄がでてくるので

『12』か『9』あたりに変更します。
さらに
『Number of Columns』
(表示する列の数)
『3』に変更します。
初期設定だと
『Number of Photos』が15
でちょっと多いのと
『Number of Columns』が4だか5で
それだとInstagram感が少なく
Instagramアカウントの表示と
気づかれない可能性があるので変更しました。

『Instagramフィード』の『Customize』設定を変更する

あとはレイアウトとか
色合いとか変更できますので
お好みでカスタマイズしてください。

『Instagramフィード』の『Display Your Feed』からショートコードをコピーする

画面上部の
『Display Your Feed』をクリックします。

『Instagramフィード』の『Display Your Feed』からショートコードをコピーする

『[Instagram-feed]』をコピーします。

『Instagramフィード』の『Display Your Feed』からショートコードをコピーする

Instagramのフィードをワードプレスに表示させるための『ウィジェット』を作成する

ワードプレスのダッシュボードの
『外観』にカーソルを合わせて
『ウィジェット』をクリックします。

Instagramのフィードをワードプレスに表示させるための『ウィジェット』を作成する

『テキスト』をクリックします。

Instagramのフィードをワードプレスに表示させるための『ウィジェット』を作成する

Instagramを表示させたい箇所
(今回はメインサイドバー)
を選んで
『ウィジェットを追加』
をクリックします。

Instagramのフィードをワードプレスに表示させるための『ウィジェット』を作成する

タイトルは任意で記入します。
『Display Your Feed』でコピーした
『[Instagram-feed]』
を枠内貼り付けます。
最後に『保存』をクリック
するのを忘れずに。

『Instagramフィード』の『Display Your Feed』からショートコードをコピーする

表示させたい位置に
移動させれば終了です。
(カーソルドラックで動きます)

Instagramのフィードをワードプレスに表示させるための『ウィジェット』を作成する

こんな感じに表示されます。

Instagramのフィードをワードプレスに表示させるための『ウィジェット』を作成する

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

実はすんなりと
『Instagram Feed』の設定が終わらないことがあります。
このサイトの設定の時もすんなりいきませんでした。

この画面がでて
『承認』をクリックしたのですが

プラグイン『Instagramフィード』の初期設定

画面に目的のInstagramアカウントが表示されません。
というか画面が変わりませんでした。

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

そんな時は
Instagramアカウント追加のボタンの横にある
『Button not working?』
をクリックします。

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

画面が変わるので
『Click here to get your Instagram ~』
をクリックします。

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

『Personal』にチェックが
付いているを確認して
『Connect』をクリックします。

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

下記の画面に変わるので
『Access Token』の右側の文字列
(これがAccess Tokenです)
をコピー
します。
(赤の塗りつぶし箇所)

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

InstagramFeedの画面に戻って
『Manually Connect an Accoount』をクリックすると
枠が追加されるので
コピーしたAccess Tokenを貼り付けます。

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

するとアカウントが表示されます。
後は同じです。

プラグイン『Instagramフィード』の初期設定

【トラブル対応】Access Tokenが取得できない場合

普通ならこの対処法でいいのですが
まれに『Personal』にチェックが付いているを確認して
『Connect』をクリックしても
Access Tokenが取得できない場合があります。

【トラブル対応】『Instagram Feed』のアカウント接続エラーの場合の対処法

何回やっても
『Instagram Connection Error』
がでることがあります。

【トラブル対応】Access Tokenが取得できない場合

そうなると少し手間がかかりますが
自分で『Instagram API』を設定して
そこの『Manage Clients』から
直接Access Tokenを取得する方法が早いかと思います。
(詳しくは『Instagram API Access Token取得』
あたりで検索してみてください)

 

  CafeSK カフェサク お問い合わせ   note登録バナー 
おすすめの記事