Web集客の迷子を脱出!申し込まれる仕組みの作り方はこちら

ホームページにインスタグラムを載せたい。ワードプレスプラグイン『Smash Balloon Social Photo Feed(Instagram Feed)』で設定しよう。

ホームページにインスタグラムを載せたい。ワードプレスプラグイン『Smash Balloon Social Photo Feed(Instagram Feed)』で設定しよう。

ジャンルや年代によってはWeb検索よりもインスタで情報を探すという方も多くなったインスタグラム。女性起業家が活用するSNSの最有力候補ではないでしょうか。

インスタグラムへの投稿が日々の活動を表している方にとって、ホームページにもその投稿内容を掲載したいですよね。

そこで、インスタグラム投稿をホームページに掲載するプラグイン『Smash Balloon Social Photo Feed(Instagram Feed)』の設定方法をご紹介します。

『Smash Balloon Social Photo Feed(Instagram Feed)』は有料契約するとさまざまな機能が使えて便利ですが、ここでは無料で使える部分をご紹介します。

『Smash Balloon Social Photo Feed(Instagram Feed)』で、プラグイン画面で赤い「!」が付いていたり、ホームページ画面で「Instagram フィードに問題があります」「Instagramフィードで重大な問題」という表示が出ている場合があります。その場合は、接続のし直しをしてみてください。( 詳細はこちら

目次

事前準備

プラグインのインストール・設定を行う前に、同じブラウザでインスタグラムを開き、表示させたいご自身のアカウントでログインしておいてください。

プラグインをインストールする

STEP
プラグイン追加画面を開き、検索する。

WordPressにログインし、左側のメニュー一覧から「プラグイン」-「プラグインを追加」を選択します。

右上に「プラグインの検索」という検索ボックスが表示されるので、そこに「Smash Balloon Social Photo Feed」と入力します。

STEP
プラグインをインストールする。

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

STEP
プラグインを有効化する。

ボタンの表示が「有効化」に変わるので、「有効化」ボタンを押します。

インスタグラムのアカウントと接続しよう

STEP
セットアップウィザードを進めます。

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

STEP
インスタグラムのアカウントに接続します。

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

STEP
接続する種類を選択します。

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

STEP
インスタグラムと接続します。

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

STEP
アクセスリクエストを許可します。

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

STEP
ドメインの確認をします。

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

STEP
アカウントが接続されたことを確認します。

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

プラグインの設定をしよう

STEP
機能の設定をします。

必要だと思う機能をインストールします。私は、「Instagramユーザーフィード」と「ダウンタイムの防止」にチェックを入れて進んでいます。

「画像の最適化」「ソーシャルフィードコレクション」「カスタマーレビュープラグイン」は、必要だと思ったらチェックを入れてください。

チェックを入れたら、右下の「Next」ボタンで進みます。

  • 「Pro Features」は有料プランのみになります。
STEP
追加プラグインの設定画面

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

なので、ここではチェックを外して、「Install Selected Plugins」を押します。(WPConsentというプラグインはインストールしません)

STEP
設定準備が整いました。

「準備がすべて整いました!」という画面が表示されます。

間に有料プランへの案内が表示されますが、今回はスルーして、一番下の「Complete Setup Without Upgrading」ボタンを押します。

インスタグラムに表示させるための設定をしよう

STEP
フィードを表示させる設定を始めます。

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

STEP
フィード形式の種類を選択します。

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

STEP
表示させるアカウントを選択します。

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

STEP
表示手順のガイドが出てきます。

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

STEP
表示設定をします。

左側のカスタマイズメニューから、どのように表示させるかの設定ができます。

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

STEP
設定を保存する。

設定が終わったら、右上の「保存」ボタンを押して、設定を保存します。

そして、その横の「埋め込む」ボタンをさらに押します。

STEP
埋め込み用のショートコードをコピーします。

ホームページに埋め込む用のしょーどコードが表示されるので、「コピー」ボタンを押します。

さらに、埋め込みたい箇所のボタンを押します。例えば、「ウィジェットに追加」ボタンを押すと、ウィジェットページにジャンプします。

「ページに追加」ボタンを押すと、固定ページ一覧が表示されるため、埋め込みたい固定ページにチェックを入れて、「追加」ボタンを押すと、その固定ページが開きます。

STEP
ショートコードブロックで追加する

ウィジェットでも固定ページでも、ショートコードブロックを追加して、枠内にコピーしたショートコードを貼ってください。

「Instagram フィードに問題があります」や「!」が出ている場合

インスタグラム側の仕様で、定期的に接続し直さないと、下記のように赤い「!」が付いていたり、管理者だけに見える状態でエラー表示が出ている場合があります。

Instagram Feedに「!」
「Instagram フィードで重大な問題 Instagramフィードが更新されない問題があります」
このエラーメッセージは WordPress の管理者にだけ表示されます
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でエラーが発生し、次の理由でフィードが更新されない可能性があります

Instagram Feedエラーを直すには

プラグイン『Smash Balloon Social Photo Feed(Instagram Feed)』に更新(アップデート)が入っている場合は、最新にアップデートしてからお試しください。

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

この「再接続」をクリックすると、上記の「インスタグラムのアカウントと接続しよう」の「STEP3:接続する種類を選択します」の画面が出てきますので、再度、インスタグラムのアカウントを接続し直してください。

  • 事前に対象のインスタグラムアカウントにブラウザでログインしておいてください。

再接続してもエラーが消えないなどがありましたら、いったんプラグインを削除して、プラグインをインストールするところから始めてみてください。

▼「実際に画面を見ながら操作方法を直接教えてほしい」というときは、ぜひ、Web作業サポート会をご活用くださいね。

  • URLをコピーしました!

この記事を書いた人

半沢 まり子のアバター 半沢 まり子 Web集客の伴走パートナー/Webライター/ウェブ解析士

「表現力×解析力×時短」を活かしたWebライティング集客術で、ひとり起業の女性の堅実的で継続的なWeb集客をサポートしている。また、主婦向けWebライティング講座を実施し、自宅で働きたい子育て中の女性の在宅ワークを支援している。

ホームページ作り・SEOライティングからデータ解析・改善提案や時短術を含めたトータルサポート、会社員時代のユーザーサポート経験による丁寧で分かりやすいサポートが好評。行政が強いジャンルでGoogle検索結果の上位獲得や大手メディアへの寄稿実績あり。

ライフステージの変化に合わせて仕事も家庭も心地よく両立したい女性をサポートすることで、ゆとりのある家庭を増やし、子育てしやすい環境を育むことが目標。横浜在住の二人の娘を持つシングルマザー。

目次