Web制作コラム

gripspace Social Feed の使い方｜Instagramの投稿をWordPressにグリッド・スライダーで表示する

やり方・手順2026.10.13

Instagram の投稿を WordPress に並べるプラグイン「gripspace Social Feed」の使い方です。必要なアカウント、連携の手順、表示の設定項目、ショートコードでの設置、更新のタイミングまで、画面の表記どおりに説明します。

gripspace Social Feed は、Instagram の投稿を WordPress のページにグリッドまたはスライダーで表示するプラグインです。WordPress.org で無料で公開しています。

このプラグインは、当サイト（ワプラボ）を運営する ibis studio株式会社が開発しています。この記事では、インストールから設置までを、管理画面に出る表記どおりに順に説明します。

Instagram および Meta は Meta Platforms, Inc. の商標です。gripspace Social Feed は Meta Platforms, Inc. とは提携しておらず、承認や後援も受けていません。名称は接続先を説明するためにのみ使っています。

使う前に確認すること

Instagram はプロアカウントが必要

連携できるのは、Instagram のプロアカウント（ビジネスまたはクリエイター）だけです。個人アカウントのままでは連携できません。管理画面にも「連携できるのは Instagram のプロアカウント (ビジネスまたはクリエイター) のみです。」と表示されます。

これは Instagram 側の仕様によるものです。外部のサイトへ投稿を渡す仕組みが、プロアカウント向けにしか用意されていません。切り替えは Instagram アプリの設定から行えます。

Meta の開発者アカウントやアプリは不要

Instagram の投稿を外部サイトに表示するには、本来は Meta の開発者登録をして、アプリを作り、審査を通す必要があります。このプラグインでは、審査済みのアプリを grip space（当社のサービス）が持っていて、サインインの受け渡しだけを仲介します。そのため、利用者が開発者登録をする必要はありません。

受け取ったアクセストークンは、お使いの WordPress の中に保存されます。それ以降、投稿の読み込みはサイトのサーバーから Instagram へ直接行います。grip space はトークンを保持しません。読み取るのは、ご自身のプロフィールと投稿だけです。

grip space のアカウントは不要です。連携のための登録もいりません。

サイトが外から見える状態であること

連携を始める前に、grip space が「戻り先がたしかにこのサイトか」を外部から確認します。そのため、インターネットから届かないサイトでは連携できません。ローカル環境のほか、次の状態でも確認が通りません。

パスワード保護（Basic 認証）をかけている
メンテナンスモードや「近日公開」モードにしている
IP アドレスで閲覧を制限している

公開前のテスト環境で試す場合は、これらを一時的に外すか、トップページへの grip_ig_verify パラメータ付きのリクエストを通すように設定してください。

動作環境

項目	内容
WordPress	5.8 以上
PHP	7.4 以上
Instagram	プロアカウント（ビジネスまたはクリエイター）
料金	プラグインは無料（GPL）

※ 横にスクロールできます

インストールと有効化

管理画面の「プラグイン」→「新規プラグインを追加」で「gripspace Social Feed」を検索する
「今すぐインストール」を押し、続けて「有効化」を押す
左メニューに「ソーシャルフィード」が追加されたことを確認する

管理画面の日本語表示は、WordPress.org の翻訳（言語パック）で配信しています。サイトの言語が日本語なら、自動で日本語になります。

メニューの構成

メニュー	内容
ウィジェット	連携したアカウントと、作ったウィジェットの一覧。Instagram の連携もここで行う
連携中のウィジェット	grip space と連携したウィジェットの一覧（grip space を使う場合のみ）
新規追加	ウィジェットの作成。Instagram を連携するまでは表示されない
設定	grip space との連携（任意）

※ 横にスクロールできます

「設定」は grip space と連携するための画面です。Instagram の連携は「設定」ではなく「ウィジェット」の画面で行います。

Instagram アカウントを連携する

「ソーシャルフィード」→「ウィジェット」を開く（画面の見出しは「Instagram ウィジェット」）
「+ Instagram アカウントを連携」を押す
Instagram のサインイン画面が開くので、プロアカウントでサインインして許可する
自動で元の画面に戻り、「Instagram を連携しました。」と表示されれば完了

連携が済むと、一覧にアカウントのユーザー名（@から始まる名前）が表示されます。同じ画面の「+ 別の Instagram アカウントを連携」から、2つ目以降のアカウントも追加できます。

うまくいかないとき

「このサイトに外部から接続できないため、連携を開始できません。」と出る … 上で書いた Basic 認証やメンテナンスモード、IP 制限を確認します
「連携リクエストの有効期限が切れました。」と出る … 連携の開始から15分以内に戻ってこないと切れます。もう一度「+ Instagram アカウントを連携」からやり直します
サインインはできたが連携できない … アカウントが個人アカウントのままになっていないかを確認します

ウィジェットを作る

表示の設定は「ウィジェット」という単位で持ちます。1つのアカウントに対して、ウィジェットはいくつでも作れます。トップページ用はスライダー、専用ページ用はグリッド、のように場所ごとに分けて作れます。

「ウィジェット」の画面で、アカウントの欄にある「+ ウィジェットを追加」を押す
左側で設定を変えると、右側の「プレビュー (実寸)」にその場で反映される
決まったら「ウィジェットを保存」を押す

プレビューは、公開ページと同じプログラムで描いています。保存する前に、実際の見え方をここで確かめられます。

表示設定の項目

項目	選べる内容	初期値
レイアウト	グリッド／スライダー	グリッド
列数	1〜12	4
余白 (px)	画像どうしの間隔。0〜60	4
最大幅 (px)	0〜5000。0 にすると貼った場所の幅いっぱいに広がる	1500
表示する投稿数	1〜50	15
文字サイズ (px)	8〜40	14
動画	動画の投稿も含めるかどうか	含める

※ 横にスクロールできます

列数は上限として扱われます。スマートフォンやサイドバーなど、置いた場所が狭いときは、画像1枚の幅が100px を下回らないように、自動で列が減ります。

スライダーの動き

スライダーは、投稿を横一列に並べ、左右の矢印ボタンか横スクロールで送る形です。自動で流れる動きはありません。縦の場所を取らないので、トップページの途中などに差し込みやすい形です。

マウスを乗せたとき・クリック時

項目	選べる内容
マウスを乗せたとき	アイコンと件数を表示（いいね数・コメント数）／何もしない
クリック時	ライトボックスを開く／Instagram を開く／何もしない
ライトボックスの内容	キャプション、いいねとコメント（それぞれ表示するかを選ぶ）

※ 横にスクロールできます

「ライトボックスを開く」にすると、サイトを離れずに投稿を拡大して見せられます。「Instagram を開く」は、投稿のページを別のタブで開きます。

アカウントヘッダーとフォローボタン

「アカウントヘッダーを表示する」にチェックを入れると、投稿の上にアカウントの情報を出せます。出す内容は、アイコン画像、ユーザー名、投稿数から選べます。ヘッダーにはフォローボタンが付き、文言と色を変えられます。文言を空欄にすると「フォロー」と表示されます。

表示する投稿を絞り込む

項目	内容
表示する投稿の種類	すべての投稿／リールを除く／リールのみ
複数枚の画像がある投稿も含める	チェックを外すと、複数枚の投稿を出さない
最近の投稿のみ	指定した日数より古い投稿を出さない。0 で制限なし
キャプションのキーワード	これを含む投稿のみを表示／これを含む投稿を非表示

※ 横にスクロールできます

キーワードはカンマで区切って複数指定できます。大文字と小文字は区別せず、全角の＃は半角の # として扱います。たとえばハッシュタグを決めておけば、特定のキャンペーンの投稿だけを並べられます。

Instagram は、動画がリールかどうかを常に返すわけではありません。その情報がない投稿は、通常のフィード投稿として扱われます。

複数枚の画像がある投稿

複数枚の投稿は、Instagram と同じく、グリッドには1枚だけ表示され、右上に重なった四角の印が付きます。拡大したときの動きは「複数枚の画像がある投稿」で選べます。

1枚目の画像だけを表示する（初期値）
拡大したときに、すべての画像をめくれるようにする

再生できない動画について

著作権のある音源を使ったリールなど、Instagram が動画ファイルを返さない投稿があります。そうした投稿は再生マークを付けずに静止画として表示し、拡大したときに「Instagram で再生」のリンクを出します。

公開と下書き

「状態」の「公開する」のチェックを外すと、ショートコードを貼ってあってもサイトには何も表示されません。準備中のウィジェットはチェックを外しておけます。一覧の「複製」で作ったウィジェットは、下書きとして保存されます。

ページに設置する

設置はショートコードで行います。ウィジェットの編集画面の上部と一覧に、そのウィジェットのショートコードが表示されます。「コピー」を押して、表示したい場所に貼り付けてください。

ショートコード（id はウィジェットごとに異なる）

[grip_social_feed id="1"]

ブロックエディターでは、「ショートコード」ブロックを追加して貼り付けます。このプラグイン専用のブロックはありません。テーマのファイルに直接書く場合は、do_shortcode を使います。

テーマのテンプレートに書く場合

<?php echo do_shortcode( '[grip_social_feed id="1"]' ); ?>

同じウィジェットを1ページに2回貼っても、表示されるのは最初の1つだけです。同じページに2か所出したいときは、ウィジェットを複製して別の id にしてください。

投稿が反映されるタイミング

Instagram から取ってきた投稿は、サイトの中に15分間ためておきます（キャッシュ）。Instagram への問い合わせ回数を抑えるためです。そのため、Instagram に新しく投稿してから、サイトに出るまで最大で15分ほどかかります。

ウィジェットを保存したとき、アカウントを連携し直したとき、連携を解除したときは、このキャッシュを捨てて取り直します。すぐに反映させたいときは、ウィジェットを開いてそのまま保存すると早く反映されます。

ページキャッシュのプラグインや、サーバー側のキャッシュを使っている場合は、そちらの保存期間のぶんだけ反映が遅れることがあります。

連携の有効期限

Instagram のアクセス権には60日の有効期限があります。このプラグインは1日1回の定期処理で期限を確認し、残り10日を切ったら自動で延長します。一覧の「アクセス有効期限」で、いつまで有効かを確認できます。

この定期処理は WordPress の WP-Cron で動きます。WP-Cron はサイトへのアクセスをきっかけに動くので、ほとんど閲覧されないサイトや、WP-Cron を止めているサイトでは延長が遅れることがあります。期限が切れたときは、もう一度連携すれば元に戻ります。

連携を解除する

「ウィジェット」の画面で、アカウントの欄にある「このアカウントの連携を解除」を押します。作ったウィジェットは残りますが、もう一度連携するまでサイトには表示されません。

プラグインを削除（アンインストール）しても、ウィジェットと連携の設定は消えません。消えるのは一時的なキャッシュだけです。入れ直したときに、作ったウィジェットがそのまま使えます。

できないこと・制限

個人アカウントは連携できない（プロアカウントのみ）
表示できるのは、連携した自分のアカウントの投稿だけ。ハッシュタグ検索や、他のアカウントの投稿は表示できない
1つのウィジェットに出せるのは1アカウント分。複数アカウントの投稿を混ぜて1つに並べることはできない
1つのウィジェットで表示できる投稿は50件まで。「もっと見る」で続きを読み込む機能はない
専用のブロックはなく、設置はショートコードで行う
インターネットから届かない環境（ローカル環境、Basic 認証をかけたテスト環境など）では連携できない

grip space との連携（任意）

ここまでの機能は、grip space のアカウントがなくてもすべて使えます。grip space をすでにお使いの場合に限り、「設定」画面から連携キーでこのサイトをつなぐと、grip space で作った Instagram ウィジェットをこのサイトで使ったり、ウィジェットの表示回数を確認したりできます。

ウィジェットを grip と連携できるのは、grip space のスターター以上のプランです。連携を使わない場合は、プランを気にする必要はありません。