WordPressにインスタグラムを表示させるプラグイン
「Smash Balloon Social Photo Feed」がアップデートされました。
あわせて、UIも大きく変わりました!
改めて、使い方を解説していきます。
![](https://0forest.com/blog/wp-content/uploads/2021/09/210905_1.png)
以前、使っていた方はアップデート後、Instagramフィードが表示されなくなってしまったかもしれません。再度設定していきましょう。
プラグインのインストール
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_01.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_01.jpg)
管理画面のプラグイン>新規追加から、Smash Balloon Social Photo Feedをインストールし、有効化します。
インスタグラムのアカウントと連携
Instagram Feed>設定をクリック
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_02.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_02.jpg)
Manage SourcesからAdd Sourceをクリックします。
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_03.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_03.jpg)
「Login with Instagram」をクリック。
その下の「Receive our Get Started emails(開始メールを受け取る)」はお好みでチェック。
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_04.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_04.jpg)
インスタグラムにログインして、許可するをクリック。
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_05.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_05.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_06.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_06.jpg)
アカウントが追加されました。
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_07.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_07.jpg)
フィードのレイアウトをカスタマイズ
Instagram Feed>すべてのフィードをクリックします。
新規追加をクリック
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_08.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_08.jpg)
カスタマイズ画面でフィードの表示を調整して保存します。
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_09.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_09.jpg)
![](https://0forest.com/blog/wp-content/uploads/2021/09/210905_1.png)
![](https://0forest.com/blog/wp-content/uploads/2021/09/210905_1.png)
![](https://0forest.com/blog/wp-content/uploads/2021/09/210905_1.png)
フィードレイアウトではパソコン、タブレット、スマホ別に列数や表示する投稿数を設定できます。
保存すると一覧に作成したフィードが表示されます。ショートコードはフィードを表示する際に使うのでコピーしておきましょう。
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_10.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_10.jpg)
Instagramフィードを表示させる
外観>ウィジェットをクリック
共通サイドバーのインスタグラムを表示している箇所のショートコードを書き換え。
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_11.jpg)
![](https://0forest.com/blog/wp-content/uploads/2022/03/ss_instagramfeed_3291_11.jpg)
これで、指定されたウィジット上にインスタグラムが表示されます!