【WordPress】Instagramの投稿を表示するプラグイン「Smash Balloon Social Photo Feed」の使い方

スマホで撮影した写真 ホームページ作成

SNSで集客することが当たり前となり「ホームページはあまり更新しないけれどInstagramはマメに更新している」という人も増えています。
WordPressでホームページを作成している場合、プラグインを使用することで、Instagramの投稿一覧を簡単にホームページに表示することができます。

今回は、Instagramの投稿を表示するプラグイン「Smash Balloon Social Photo Feed」の使い方をご紹介します。

スポンサーリンク

「Smash Balloon Social Photo Feed」とは

プラグイン「Smash Balloon Social Photo Feed」は、WordPressのページ上でInstagramの投稿一覧を表示することができるプラグインです。
難しい設定は不要!Instagramのアカウントと連携することで、自動的に最新のInstagram投稿一覧を表示することができます。

Smash Balloon Social Photo Feed は何度か名前が変わっていて、以前は以下のような名称でした。

  • Instagram Feed
  • Smash Balloon Instagram Feed
  • Smash Balloon Social Photo Feed

今時点(2022年7月)でも、インストール後のプラグイン一覧に表示されるプラグイン名は「Smash Balloon Instagram Feed」になっています。
プラグインの解説ブログは色々ありますが、上記名称のプラグインは全て同じプラグインを指していると思って下さい。

Smash Balloon Social Photo Feedの使い方

プラグインの基本的な設定は、以下の4ステップで完了します。

  • STEP1
    プラグインをインストール・有効化
  • STEP2
    Instagramアカウントと連携
  • STEP3
    Instagramフィードを作成
  • STEP4
    表示したいページに設定する

STEP1:プラグインをインストール・有効化

プラグイン -> 新規追加
「Smash Balloon Social Photo Feed」を検索し「今すぐインストール」ボタンクリック
その後「有効化」ボタンクリック

WordPress管理画面キャプチャ

インストール済みプラグイン一覧に「Smash Balloon Instagram Feed」の名前で追加されます。
WordPressメニューにも「Instagram Feed」が追加されます。

WordPress管理画面キャプチャ

STEP2:Instagramアカウントと連携

インストール済みプラグイン一覧から「設定」クリック
(または Instagram Feed -> 設定

WordPress管理画面キャプチャ

「ソースを追加」ボタンクリック

WordPress管理画面キャプチャ

ポップアップが表示されるので、そのまま少し待ちます。

smashballoonキャプチャ

自動的にInstagramへの接続画面になります。
「Login with Instagram」ボタンクリック

smashballoonキャプチャ

Instagramアカウントが表示されます。
「ログイン」ボタンクリック、または「アカウントを切り替える」で必要なInstagramアカウントへ切り替えます。

※既にInstagramログイン済みのパソコンの場合、この画面は表示されません。

Instagramログイン画面

Instagramアカウントへの権限許可の画面になります。
「許可する」ボタンクリック

Instagram認証画面

自動的にWordPress管理画面に戻り、先ほど設定したInstagramアカウントが「接続されたInstagramアカウント」として表示されます。
以上で、Instagramアカウントとの連携は完了です。

WordPress管理画面キャプチャ

STEP3:Instagramフィードを作成

続いて「フィード」という、WordPressページに表示するInstagram投稿一覧の設定をしていきます。
WordPress管理メニュー -> Instagram Feed -> すべてのフィード
「新規追加」ボタンクリック

WordPress管理画面キャプチャ

フィード作成画面になります。
特に何も変更せず「次へ」ボタンクリック

WordPress管理画面キャプチャ

先ほど登録したアカウントが表示されているので、チェックONにして「次へ」ボタンクリック

WordPress管理画面キャプチャ

設定画面になり、説明文が3つ出るので、読みながら「次へ」ボタンクリック、「終了」ボタンクリック

WordPress管理画面キャプチャ
WordPress管理画面キャプチャ
WordPress管理画面キャプチャ

説明文の表示が消えて、フィードの設定画面になります。
以上で、Instagramフィードの作成は完了です。

WordPress管理画面キャプチャ

STEP4:表示したいページに設定する

フィード設定画面右上の「埋め込み」ボタンクリック

WordPress管理画面キャプチャ

ショートコードが表示されるので「コピー」ボタンクリック

WordPress管理画面キャプチャ

Instagramの投稿一覧を表示したい固定ページなどに、コピーしたショートコードを貼り付けます。
ページを編集したら忘れずに、画面右上の「更新」ボタンクリック

※そのまま貼り付ければ、自動的にショートコード用のブロックで貼り付けされます。

WordPress管理画面キャプチャ

以上で、WordPressの指定のページにInstagramの投稿一覧が表示されます。

Instagramフィード表示結果

Smash Balloon Social Photo Feedのカスタマイズ

デフォルト設定だと、20件の投稿が表示されます。
パソコンだったらこのままでも良いのですが、スマホで見るときに20件は多すぎますよね。

表示する投稿数、列数、その他色の変更などが設定できるので、順番にカスタマイズしていきます。
※設定した固定ページの方は自動的に設定変更が反映されます。

設定できること
  1. 表示する投稿数、列数の変更
  2. 色の変更
  3. ヘッダーの設定(ヘッダー非表示、表示アイコン設定、文字色・自己紹介の変更)
  4. もっと見るボタン、フォローボタンの変更

①表示する投稿数、列数の変更

Instagram Feed -> すべてのフィード -> 先ほど作成したフィードクリック

WordPress管理画面キャプチャ

「フィードレイアウト」クリック

WordPress管理画面キャプチャ

無料版ではレイアウトは「グリッド」以外は選択できません。
表示する「投稿数」「列数」は変更できます。

【投稿数】

デスクトップ(パソコン)とモバイルでそれぞれ設定することができます。
モバイルは「8」くらいでしょうか。
デスクトップ(パソコン)は初期設定の20件でも良いですが、スマホと揃えて4列2行で「8」でも良いですね。

設定を変更したら忘れずに画面右上の「保存」ボタンクリック
画面左上の「CUSTOMIZE」クリックでカスタマイズメニュー選択に戻ります。

WordPress管理画面キャプチャ

②色の変更

Instagram投稿一覧の背景色・ボタン色を変更することができます。

配色 選択

WordPress管理画面キャプチャ

配色「カスタム」を選択すると、背景色、ボタン1(Load More)、ボタン2(Follow on Instagram)の色変更ができます。

設定を変更したら忘れずに画面右上の「保存」ボタンクリック
画面左上の「CUSTOMIZE」クリックでカスタマイズメニュー選択に戻ります。

WordPress管理画面キャプチャ

③ヘッダーの設定(ヘッダー非表示、表示アイコン設定、文字色・自己紹介の変更)

Instagram投稿一覧のヘッダー部分(表示アイコンの設定や、文字色・自己紹介の変更、そもそもヘッダーの非表示)を設定することができます。

ヘッダー 選択

WordPress管理画面キャプチャ

「有効」チェックOFFにすると、ヘッダーを非表示にすることができます。

WordPress管理画面キャプチャ

ヘッダーを有効にしている場合、デフォルトでは黒丸にInstagramアイコンの味気ないアイコンになっています。
こちらのアイコンは、WordPressにアップロードした画像を設定することが可能です。

「画像を追加」クリック

※Instagramビジネスアカウントの方はInstagramで設定しているアイコンが自動的に取得されるようです。

WordPress管理画面キャプチャ

ファイルをアップロードする画面になります。
アイコンに設定する画像をアップロード

WordPress管理画面キャプチャ

メディアライブラリから画像を選択して、画面右下の「投稿に挿入」ボタンクリック

WordPress管理画面キャプチャ

アップロードした画像がアイコンに設定されました。

WordPress管理画面キャプチャ

アイコン横にはアカウント名が表示されています。その下に「自己紹介」を表示することができます。

WordPress管理画面キャプチャ

自己紹介上の「テキスト 色」の設定で、文字色を設定することができます。

WordPress管理画面キャプチャ

設定を変更したら忘れずに画面右上の「保存」ボタンクリック
画面左上の「CUSTOMIZE」クリックでカスタマイズメニュー選択に戻ります。

WordPress管理画面キャプチャ

④もっと見るボタン、フォローボタンの変更

その他、「もっと見るボタン」「フォローボタン」の表示する文字、文字色や背景色を設定することができます。

※「ライトボックス(写真の拡大表示)」は有料版のみの機能です。

WordPress管理画面キャプチャ
WordPress管理画面キャプチャ
WordPress管理画面キャプチャ

まとめ:プラグインで簡単にInstagram投稿をホームページに表示しよう!

ホームページの更新は慣れなくてどうしても放置してしまう……という方も、Instagramの投稿はマメに行っている方もいると思います。
放置しているホームページでは訪問者に不安を与えてしまう可能性がありますが、最新のInstagram投稿を表示することで、少しでも動きのあるホームページに見せることができます。

プラグインを使用すれば簡単に、WordPressホームページにInstagramの投稿一覧を表示することができます。
是非活用してください。

タイトルとURLをコピーしました