ラッコサーバー

ラッコサーバーでサイトを管理すると売却時の価値を高く保てます!
サイト/ドメインの売却をシームレスに実現します。

ラッコサーバー詳細
オンライン事業売買
WordPressサイト売買
ドメイン売買
データを読み込み中...
データを読み込み中...
データを読み込み中...

【WordPress】InstagramフィードをサイトにLive表示する方法(Smash Balloon Instagram Feed)

【WordPress】InstagramフィードをサイトにLive表示する方法(Smash Balloon Instagram Feed)アイキャッチ

WordPressサイトにInstagramのフィードを表示して、常に最新の投稿を自動で見せたい!

Instagramのフィードを貼り付けても、毎回手動で更新するのは大変ですよね。Smash Balloon Social Photo Feed(スマッシュバルーン)を使えば、Instagramと連携するだけで、新しい投稿が自動的にWordPressサイトへ反映されます。

この記事では、WordPressへのInstagramフィード埋め込みを「Smash Balloon Social Photo Feed」プラグインで実現する方法を、画像つきで手順ごとに解説します。

この記事でできるようになること:

  • WordPressサイトにInstagramフィードを自動表示できる
  • フィードのレイアウト・投稿数・カラム数をカスタマイズできる
  • 記事・固定ページ・サイドバーにショートコードで簡単に埋め込める
動作確認バージョン
この記事の手順は、WordPress 6.x + Smash Balloon Social Photo Feed 6.x(2026年6月時点)で動作確認済みです。
参照元:Smash Balloon Social Photo Feed(WordPress.org公式)
ラッコサーバー

ラッコサーバーでサイトを管理すると売却時の価値を高く保てます!
サイト/ドメインの売却をシームレスに実現します。

ラッコサーバー詳細
オンライン事業売買
WordPressサイト売買
ドメイン売買
データを読み込み中...
データを読み込み中...
データを読み込み中...

Smash Balloon Social Photo Feedとは

Smash Balloon Social Photo Feedは、WordPress用のInstagramフィード表示プラグインです。Instagramアカウントと連携するだけで、サイト上に最新の投稿を自動表示できます。

公式サイトによると、世界100万人以上のユーザーが利用しており(参照:WordPress.org公式)、WordPressのInstagramプラグインの中でも定番の選択肢です。

無料版でできること(主な機能):

  • Instagramフィードのリアルタイム表示(投稿が自動反映)
  • 複数のInstagramアカウントを登録・表示
  • レイアウト・幅・高さ・投稿数・カラム数・背景色などをカスタマイズ
  • 「Instagramでフォロー」ボタンの表示
  • 「さらに読み込む」ボタンによる追加読み込み
  • サイドバー・フッターなどウィジェットエリアへの表示
  • レスポンシブ対応(PC・スマートフォン両対応)
MEMO

Instagramのハッシュタグフィードや、リール・ストーリーズの表示はPro版が必要です。通常の投稿フィードを自動表示する目的であれば、無料版で十分対応できます。

事前準備:必要なもの

作業を始める前に、以下を用意してください。

  • WordPressサイト(管理者権限アカウント)
  • Instagramアカウント(個人アカウントまたはビジネスアカウント)
注意

非公開(鍵付き)のInstagramアカウントはフィードの連携ができません。必ず公開アカウントで連携してください。

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

まずはWordPress管理画面から「Smash Balloon Social Photo Feed」プラグインをインストールします。

1. プラグインを検索する

WordPress管理画面の左メニューから 「プラグイン」→「新規プラグインを追加」 をクリックします。画面右上の検索窓に 「Instagram Feed」 と入力して検索します。

WordPress管理画面—「プラグインを新規追加」ボタン
▲ 管理画面「プラグイン」→「新規プラグインを追加」の画面

2. インストール・有効化する

検索結果に表示された「Smash Balloon Social Photo Feed」の「今すぐインストール」ボタンをクリックします。インストールが完了したら、「有効化」ボタンに変わるのでクリックします。

Smash Balloon Social Photo Feedプラグイン—「今すぐインストール」ボタン
▲ 「Smash Balloon Social Photo Feed」を「今すぐインストール」する

有効化が完了すると、管理画面の左メニューに「Instagram Feed」の項目が追加されます。

WordPress管理画面左メニュー—「Instagram Feed」メニューが追加された状態
▲ 有効化後、左メニューに「Instagram Feed」が追加される

STEP2:Instagramアカウントを連携する

プラグインのインストールが完了したら、次はInstagramアカウントとWordPressを連携します。

1. 新規フィードを作成する

管理画面左メニューの「Instagram Feed」をクリックすると、フィード管理画面が表示されます。「新規追加」ボタンをクリックしてフィード作成を開始します。

Instagram Feed管理画面—「新規追加」ボタン
▲ 「新規追加」でInstagramフィードの作成を開始する

フィード形式の選択画面が表示されます。無料版では「ユーザータイムライン」のみ選択可能です。そのまま右上の「次へ」をクリックします。

Instagram Feedフィード形式選択画面—「ユーザータイムライン」が選択されている状態
▲ 無料版では「ユーザータイムライン」を選択して「次へ」

2. Instagramアカウントにログインして連携する

ソースを追加」ボタンをクリックすると、Smash BalloonのサイトにInstagramアカウントのログイン画面が表示されます。

Instagram Feedソースを追加画面—「ソースを追加」ボタン
▲ 「ソースを追加」でInstagramアカウントとの連携を開始する

連携したいInstagramアカウントのユーザー名・パスワードを入力してログインし、アクセス許可リクエストで「許可する」をクリックします。連携が完了すると自動的にWordPressの管理画面に戻ります。

MEMO

連携するInstagramアカウントが「個人アカウント」か「クリエイターアカウント(ビジネスアカウント)」かを選択する画面が表示されます。ご自身のアカウントの種類に合わせて選択してください。

連携完了後、アカウント名にチェックを入れて「次へ」をクリックすると、フィードのカスタマイズ画面に進みます。

STEP3:フィードをカスタマイズする

フィードのカスタマイズ画面では、投稿の表示数・列数・レイアウトなどを設定できます。左側のメニューから各項目を変更し、右側のプレビューでリアルタイムに確認できます。

1. レイアウト・投稿数・列数を設定する

左メニューの「フィードレイアウト」をクリックすると、投稿の表示枚数や列数を変更できます。デフォルトではPC・モバイルともに20件表示される設定です。

設定項目 デフォルト 推奨設定例
投稿数(PC) 20件 9〜12件
投稿数(モバイル) 20件 6〜9件
列数(デスクトップ) 4列 3〜4列
列数(タブレット) 2列 2〜3列
列数(モバイル) 1列 2列

設定が完了したら右上の「保存」ボタンをクリックして設定を保存します。

Instagram Feedフィードレイアウト設定画面—投稿数・列数の設定エリア
▲ 「フィードレイアウト」で投稿数・列数を変更する

2. ヘッダー・フォローボタン・配色を設定する

左メニューの各項目から、さらに詳細な見た目の設定が可能です。

  • ヘッダー:アカウント名・プロフィール画像の表示/非表示、大きさを設定
  • フォローボタン:「Instagramでフォロー」ボタンのテキスト・色を変更
  • 配色:フィード全体の背景色・テキスト色をカスタマイズ

変更後は都度「保存」をクリックして設定を反映させてください。

STEP4:サイトにInstagramフィードを埋め込む

カスタマイズが完了したら、ショートコードを使ってサイトにフィードを埋め込みます。

1. ショートコードを取得する

Instagram Feed」→「すべてのフィード」から、作成したフィードの一覧が表示されます。右側にある「</> 埋め込み」ボタンをクリックすると、ショートコードが表示されます。

Instagram Feed「すべてのフィード」画面—「埋め込み」ボタン
▲ フィード一覧の「</> 埋め込み」ボタンからショートコードを取得する

ショートコードは以下のような形式です。

[instagram-feed feed=1]

「コピー」をクリックしてショートコードをコピーします。

2. 記事・固定ページに貼り付ける

Instagramフィードを表示したい投稿ページまたは固定ページの編集画面を開きます。テキストモード(HTMLモード)で、表示させたい位置にショートコードをそのまま貼り付けます。

[instagram-feed feed=1]

「更新」または「公開」をクリックすれば、ページ上にInstagramフィードが表示されます。

ショートコードを貼り付けて「更新」をクリックすると、ページにInstagramフィードが表示されるようになります。

アフター(フィード設置後):

WordPressページ—InstagramフィードをWordPressに埋め込んだ状態

▲ ショートコードを貼り付けた後:Instagramの最新投稿が自動で表示される

ブロックエディター(Gutenberg)をお使いの方
ブロックエディターでは「ショートコード」ブロックを追加し、その中にコードを貼り付けるか、「Instagram Feed」専用ブロックをそのまま挿入する方法もあります。

3. サイドバー(ウィジェット)に表示する

サイドバーやフッターなどのウィジェットエリアにも、Instagramフィードを表示できます。

WordPress管理画面の「外観」→「ウィジェット」を開き、表示させたいエリアに「Instagram Feed」ウィジェットをドラッグ&ドロップするだけです。

WordPressウィジェット管理画面—「Instagram Feed」ウィジェット
▲ 「外観」→「ウィジェット」から「Instagram Feed」ウィジェットを追加する

ウィジェットの設定欄に表示されるショートコード(または専用ウィジェット)をそのまま利用すれば、サイドバーへの表示も完了です。

よくある質問

Q. 無料版でできることはどこまでですか?

無料版では、Instagramの投稿フィード(タイムライン)をWordPressサイトに自動表示する機能が利用できます。投稿数・列数・背景色・ヘッダー・フォローボタンなどのカスタマイズも無料で可能です。ハッシュタグフィードやリール・ストーリーズの表示はPro版が必要です。(参照:WordPress.org公式

Q. Instagramアカウントを連携できない場合はどうすればいいですか?

連携できない主な原因として、非公開(鍵付き)アカウントの使用が挙げられます。非公開アカウントはフィードの表示に対応していません。アカウントを公開設定に変更してから再度お試しください。また、Instagramのログインセッションが切れている場合は、ブラウザのキャッシュをクリアしてから再接続をお試しください。

Q. フィードが表示されない(表示されなくなった)原因は?

フィードが表示されなくなる主な原因は、Instagramとの連携トークンの期限切れです。管理画面の「Instagram Feed」→「設定」から再認証(再連携)することで解決するケースが多いです。また、Instagramアカウントのパスワードを変更した場合も、再連携が必要になります。

Q. 複数のInstagramアカウントを連携できますか?

はい、無料版でも複数のInstagramアカウントを登録できます。アカウントごとに別々のフィードを作成して、異なるページに表示することも可能です。(参照:WordPress.org公式

Q. スマートフォンでも正しく表示されますか?

はい、レスポンシブ対応のため、PC・タブレット・スマートフォンいずれでも見栄えよく表示されます。デバイスごとに表示列数や投稿数を個別に設定できる点も特徴です。(参照:WordPress.org公式

Q. 個人アカウントとビジネスアカウント(クリエイターアカウント)の違いはありますか?

無料版での基本的なフィード表示機能は、個人アカウントでもビジネスアカウントでも同様に利用できます。連携時にアカウントの種類を選択する画面が表示されますので、お使いのアカウント種類に合わせて選択してください。

Q. Instagramの新しい投稿はどのくらいの頻度でサイトに反映されますか?

Smash Balloonはキャッシュを利用してInstagramのAPIを定期的に呼び出すことで、投稿を自動更新します。公式の明確な更新頻度の記載はありませんが、通常は数時間以内に最新の投稿がサイトに反映されます。すぐに反映させたい場合は、管理画面の「Instagram Feed」→「設定」からキャッシュをクリアすることで手動更新が可能です。(公式には明記されていませんが、キャッシュクリア機能の存在は公式UIで確認済みです)

まとめ

Smash Balloon Instagram Feedを使うと、WordPressサイトにInstagramフィードをかんたんに埋め込めます。無料版でも投稿の自動表示・グリッドレイアウトなど基本的な機能がそろっており、多くのサイトで活用されています。

設定の流れをまとめると:

  • STEP1:プラグインをインストール・有効化する
  • STEP2:Instagramアカウントを連携する
  • STEP3:フィードをカスタマイズする
  • STEP4:サイトにInstagramフィードを埋め込む

フィードが表示されない・連携できないという場合は、まずInstagramアカウントの種別(個人→プロフェッショナルへの切り替え)とキャッシュのクリアを試してみてください。

💡 サイトのパフォーマンスも気になる方へ

Instagramフィードを埋め込むと画像の読み込みが増え、サイトの表示速度に影響することがあります。高速なサーバー環境があると、フィードを表示しながらも快適なページ表示が維持しやすくなります。

ラッコサーバーでは、高速WebサーバーLiteSpeed・HTTP/3対応・SSDを採用し、99.99%以上の稼働率で安定した表示性能を提供しています。WordPressの自動インストール・SSL設定も自動化されており、申し込み後数分でサイト運営を始められます

ラッコサーバーなら、別のサーバーからの乗り換えも「かんたんWordPress移行」機能でスムーズに行えます。月額330円(税込)〜から利用でき、30日間の無料お試し期間中に移行を試すことも可能です。