ジャンルや年代によってはWeb検索よりもインスタで情報を探すという方も多くなったインスタグラム。女性起業家が活用するSNSの最有力候補ではないでしょうか。
インスタグラムへの投稿が日々の活動を表している方にとって、ホームページにもその投稿内容を掲載したいですよね。
そこで、インスタグラム投稿をホームページに掲載するプラグイン『Smash Balloon Social Photo Feed(Instagram Feed)』の設定方法をご紹介します。
事前準備
プラグインのインストール・設定を行う前に、同じブラウザでインスタグラムを開き、表示させたいご自身のアカウントでログインしておいてください。
プラグインをインストールする
WordPressにログインし、左側のメニュー一覧から「プラグイン」-「プラグインを追加」を選択します。
右上に「プラグインの検索」という検索ボックスが表示されるので、そこに「Smash Balloon Social Photo Feed」と入力します。

検索結果画面に「Smash Balloon Social Photo Feed」が表示されるので、右上の「今すぐインストール」ボタンを押します。

ボタンの表示が「有効化」に変わるので、「有効化」ボタンを押します。
インスタグラムのアカウントと接続しよう

プラグインの設定画面へ移りますので、「セットアップウィザードを起動」ボタンをクリックします。

「新規追加」ボタンをクリックします。

「Business Basic」にチェックを入れて、「Connect」ボタンをクリックします。

「Connect with Instagram」ボタンを押します。

「許可」ボタンを押します。

インスタグラムの情報を提供するドメインの確認画面です。画面に表示されているドメイン(画像では青く塗りつぶしてある箇所)が、今回インスタグラムを掲載するドメインであることを確認して、「Yes, It is my domain」ボタンを押します。

Instagram アカウントに接続画面にご自身のインスタグラムのアカウントが表示されたことを確認して、「Next」ボタンを押します。
プラグインの設定をしよう

必要だと思う機能をインストールします。私は、「Instagramユーザーフィード」と「ダウンタイムの防止」にチェックを入れて進んでいます。
「画像の最適化」「ソーシャルフィードコレクション」「カスタマーレビュープラグイン」は、必要だと思ったらチェックを入れてください。
チェックを入れたら、右下の「Next」ボタンで進みます。
- 「Pro Features」は有料プランのみになります。

クッキー規制に対応したプラグインをインストールするかどうかという画面です。ヨーロッパでは、「EU一般データ保護規則」(GDPR)があるため、ヨーロッパを相手にしたホームページの場合、必要となりますが、それ以外が対象であれば今のところ不要です。(日本では、規制の対象となるのは、主として電気通信役務(サービス)を提供する事業者のため)
なので、ここではチェックを外して、「Install Selected Plugins」を押します。(WPConsentというプラグインはインストールしません)

「準備がすべて整いました!」という画面が表示されます。
間に有料プランへの案内が表示されますが、今回はスルーして、一番下の「Complete Setup Without Upgrading」ボタンを押します。
インスタグラムに表示させるための設定をしよう

「新規作成」ボタンを押します。

「ユーザータイムライン」にチェックが入っていることを確認して、右上の「次へ」ボタンを押します。

ホームページに表示させるインスタグラムアカウントを選んでチェックを入れて、「次へ」ボタンを押します。

フィードをホームページに埋め込む手順のチュートリアルが出てきます。「次へ」ですべて確認してもいいですし、右上の「×」ボタンですぐに閉じても大丈夫です。

左側のカスタマイズメニューから、どのように表示させるかの設定ができます。
例えば、「フィードのグリッドは何列×何行にするか」や、「インスタグラムのヘッダーの表示はさせるか」などがあります。お好みで設定してください。

設定が終わったら、右上の「保存」ボタンを押して、設定を保存します。
そして、その横の「埋め込む」ボタンをさらに押します。

ホームページに埋め込む用のしょーどコードが表示されるので、「コピー」ボタンを押します。
さらに、埋め込みたい箇所のボタンを押します。例えば、「ウィジェットに追加」ボタンを押すと、ウィジェットページにジャンプします。
「ページに追加」ボタンを押すと、固定ページ一覧が表示されるため、埋め込みたい固定ページにチェックを入れて、「追加」ボタンを押すと、その固定ページが開きます。

ウィジェットでも固定ページでも、ショートコードブロックを追加して、枠内にコピーしたショートコードを貼ってください。
「Instagram フィードに問題があります」や「!」が出ている場合
インスタグラム側の仕様で、定期的に接続し直さないと、下記のように赤い「!」が付いていたり、管理者だけに見える状態でエラー表示が出ている場合があります。



Instagram フィードに問題があります。
API エラー 190: Error validating access token: Session has expired on Sunday, 19-Jan-25 23:29:41 PST. The current time is Tuesday, 01-Jul-25 21:10:28 PDT.
さらに、「Instagram Feed」-「Setting」をクリックし、設定ページを開くと、下記のような注意事項も表示されていると思います。

Instagram Feedエラーを直すには
設定画面をスクロールすると、「ソースを管理」という項目があります。

この「再接続」をクリックすると、上記の「インスタグラムのアカウントと接続しよう」の「STEP3:接続する種類を選択します」の画面が出てきますので、再度、インスタグラムのアカウントを接続し直してください。
- 事前に対象のインスタグラムアカウントにブラウザでログインしておいてください。
再接続してもエラーが消えないなどがありましたら、いったんプラグインを削除して、プラグインをインストールするところから始めてみてください。
▼「実際に画面を見ながら操作方法を直接教えてほしい」というときは、ぜひ、Web作業サポート会をご活用くださいね。
