「インスタはよく更新しているけど、ホームページとうまく連携させたい」という方におすすめなのが、Smash Balloon Social Photo Feedというプラグインです。
設定が完了すれば、インスタに投稿するだけでホームページの写真が自動で更新されるようになります。本記事では、インストールから埋め込みまでの手順を解説します！
Smash Balloon Social Photo Feedとは？
WordPressにInstagramのフィード（投稿一覧）を表示できる無料プラグイン。
世界で100万以上のサイトで使われており、デザインのカスタマイズも柔軟にできます。
以前は「Instagram Feed」「Smash Balloon Instagram Feed」という名前でしたが、現在は「Smash Balloon Social Photo Feed」に変更されています。古い記事ではそれぞれ違う名前で紹介されていますが、すべて同じプラグインです。
インスタをプロアカウントに切り替える
2024年12月以降、個人アカウントでは連携ができなくなりました。事前にInstagramのアカウントをプロアカウントへ切り替えておく必要があります。
プロアカウントには2種類あります。
- ビジネスアカウント：企業・店舗・ブランド向け
- クリエイターアカウント：個人インフルエンサー・ブロガー向け
どちらでも連携できますので、お好きな方に変更ください。
切り替えに審査などはなく、無料ですぐに行えます。
Smash Balloon 導入のステップ
ステップ1：プラグインをインストール・有効化
WordPressの管理画面から「プラグイン → 新規追加」を開き、「Smash Balloon Social Photo Feed」を検索して「今すぐインストール」をクリック。インストール後に「有効化」をクリックします。
有効化すると、セットアップウィザードが起動されます。
もし起動されない場合は、管理画面の左メニューに「Instagram Feed」という項目が追加されるので、そこをクリックするとセットアップページが表示されます。
ステップ2：Instagramアカウントと連携する
セットアップウィザードから進むと、Instagramと連携するページが表示されます。
新規追加」をクリックします。
連携方法を選ぶ画面が表示されますので、「Business Basic」を選択して「Connect」をクリックしてください。
次のページで「Connect wigh Instagram」をクリックします。
ご自身のブラウザでInstagramにログイン済みの場合は、ログインしているアカウントと接続許可をする画面が表示されます。「許可」をクリックすると、WordPressとInstagramの連携が完了します。
上記処理の際にログアウト状態であれば、Instagramのログイン画面が表示されるので、連携したいアカウントでログインし、「許可」をクリックします。
この方法ではログインしているインスタグラムアカウントに連携してしまうため、自分以外のアカウントにログインする場合は、一度ログアウトしてから再度ログインする手間が発生します。そのためクライアントのアカウントを連携させる際は、シークレットモードで認証を進めるのをオススメします。
その後セキュリティ対策の関係で、接続する先のドメインが正しいか確認画面が表示されるので、「Yes, it is my domain」をクリックします。
以下のような画面が表示されます。連携したアカウントに誤りがないか確認し、「Next」をクリックします。
次のステップでは機能面の確認画面が表示されますが、ここから先は設定が不要なので、右上にある「設定を終了」をクリックします。
ステップ3：フィードを作成してデザインを設定する
連携が完了したら、フィードの見た目を設定します。
管理画面の「Instagram Feed」→「すべてのフィード」の画面にいき、「新規追加」をクリックします。
「ユーザータイムライン」を選択した状態で「次へ」をクリックします。
連携したいアカウントを選択し、「次へ」をクリックします。
以下のスクリーンショットの画面にて表示枚数・カラム数・余白・ボタンの表示など、基本的な設定は無料版でも変更できます。以下の通り簡単に説明させていただきます。
- フィードレイアウト：フィードのレイアウト、表示枚数、表示列数などを設定可能
- カラースキーム：背景の色やボタンの色の設定
- ヘッダー：プロフィール写真やプロフィール文の設定。非表示にする場合が多い。（後述）
- 投稿：画像の解像度の設定。デフォルトのままにする場合が多い。
- もっと読み込むボタン：投稿の下部に「もっと読み込むボタン」を表示させることも可能です。非表示にする場合が多い。（後述）
- フォローボタン：インスタグラムアカウントのフォローボタン。非表示にする場合が多い。（後述）
- Lightbox：pro版でしか使えない機能。投稿詳細をモーダルで表示できる。
設定が完了したら右上の「保存」をクリックしてください。
上記でボタンやヘッダーなどは非表示にすることが多いと記載しましたが、私が構築するサイトの場合、デザイナーさんがこだわって作っているサイトが多いです。
ヘッダーや下部のボタンは少しデザインのテイストが変わってしまいがちなため（CSSで設定可能ですが、打消しが多く発生する）、デフォルトのブロックエディタを使ってインスタグラムに遷移するボタンを実装することがほとんどです。
ステップ4：ホームページに埋め込む
フィード一覧画面で「埋め込み」をクリックすると、ショートコードが表示されます。
このショートコードを表示させたいページやウィジェットエリアに貼り付けるだけで、インスタのフィードが表示されます。
以下は投稿ページです。
実際のページでは以下のようにフィードが表示されます。
注意点：接続が切れることがあります
Smash Balloonで気をつけておきたいのが、WordPressやプラグインのアップデートをきっかけに、Instagramとの接続が切れてしまうことがあるという点です。
接続が切れると、ホームページ上に空白やエラー表示が出たり、古い投稿のまま更新がされなくなったりします。
接続が切れた場合は、「Instagram Feed → 設定 → ソースを管理」から再接続することで復旧できます！
こまめなメンテナンスが難しい場合は…
「更新のたびに確認するのは難しい」という方は、Smash Balloonのプラグインを使わず、インスタグラムへのリンクボタンを設置するだけという選択肢もあります。
「Instagramはこちら」のようなリンクを設置しておくだけでも、訪問者をインスタへ誘導することは十分できます。フィードを設置して壊れたまま放置するよりも、シンプルなリンクの方がかえって印象が良いこともあります。
運用状況に合わせて、無理のない方法を選んでみてくださいね！
Smash balloonプラグインを使用した実装事例
過去の制作事例になりますが、以下サイトのように投稿一覧を自動スクロールで表示させたことがあります。
CSSとJavaScriptを使用する必要がありますが、こういったカスタマイズも可能なので、必要でしたら是非お声がけくださいね。
ちなみにこちらのサイトはトップページの構築を依頼いただいたサイトになります！
まとめ
Smash Balloon Social Photo Feedを使えば、インスタに投稿するだけでホームページの写真が自動更新されるようになります。
インスタをメインに情報発信している方には特におすすめの方法です！
ただし定期的なメンテナンスが必要になるため、運用体制も合わせて検討してみてください。設定でお困りの際はお気軽にご相談ください！
