STUDIOにInstagramの投稿一覧を埋め込む方法｜Embedボックスで自動更新
STUDIOには「Instagram」用の埋め込みボックスがありますが、公式ヘルプで案内されているのは投稿を1件ずつ埋め込む方法です。新しい投稿をするたびに埋め込み直すのは手間がかかります。この記事では、STUDIOのEmbed(埋め込み)ボックスに Social Feed by grip space のタグを1行貼り、最新の投稿が一覧で自動的に並ぶようにする手順を説明します。STUDIO特有の「sandboxタイプ」で気をつけたい点(高さ、拡大表示、リンクの開き方)も、公式ヘルプの記載に沿ってまとめました。
更新日：2026年10月12日
STUDIOでInstagramを表示する2つの方法
STUDIOでInstagramの投稿をページに出す方法は、大きく分けて次の2つです。目的に合わせて選んでください。
| 方法 | 表示されるもの | 更新 | 向いている使い方 |
|---|---|---|---|
| STUDIOの「Instagram」埋め込みボックス(公式) | 指定した投稿1件 | 投稿ごとに埋め込みコードを差し替える | 特定のキャンペーン投稿など、決まった1件を見せたいとき |
| Embedボックス(Blank)+ウィジェットのタグ | アカウントの最新投稿の一覧(グリッドかスライダー) | Instagramに投稿すると一覧も更新される | トップページやフッターに「最近の投稿」を並べたいとき |
公式の手順は、Instagramアプリの投稿メニューから[埋め込み]を選んでコードをコピーし、STUDIOの[Instagram]埋め込みボックスに貼るというものです。1件ずつ指定するので、一覧を常に新しく保つ用途には向きません。一覧を自動で更新したい場合は、後者の方法を使います。サイトにInstagramを載せる理由や全体の流れは、Instagramの投稿を自社サイトに埋め込む方法で説明しています。
STUDIOのEmbedボックスとプランの条件
STUDIOの公式ヘルプによると、Embed(埋め込み)ボックスを使うと、ページ上にHTML・CSS・JavaScriptを含むコードを埋め込めます。追加パネルの[基本]タブにある[埋め込み]セクションから、外部ツール専用のボックスか[Blank]を選んで配置します。
Embedボックスのヘルプ記事には、利用できるプランの条件は書かれていません。一方、サイト全体やページの<head>・<body>にコードを追加する「カスタムコード」は、有料プランだけの機能と明記されています。今回の方法で使うのはEmbedボックスなので、カスタムコードは必要ありません。ただし、プランの内容は変わることがあるため、ご利用のプランをご確認ください。
準備: ウィジェットのタグを用意する
- Social Feed by grip space にメールアドレスで登録します。フリープランでもウィジェットを1つ作れます。
- 管理画面で「＋ Instagramアカウントを連携」を押し、Instagramのプロアカウント(ビジネスかクリエイター)を連携します。個人アカウントのままでは連携できません。
- 「設定・プレビュー」を開き、グリッドかスライダーを選んで、表示件数・列数・画像間の余白などをプレビューを見ながら決め、「設定を保存」を押します。
- 「WEBサイトにタグを設置」の欄で「コピー」を押します。タグは次のような1行です。
<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>このタグは、置いた位置に投稿の一覧を描きます。ページの読み込み完了(DOMContentLoaded)を待つ仕組みではありません。STUDIOの公式ヘルプには「DOMContentLoadedを前提とした処理は動作しない」と書かれていますが、このウィジェットはその影響を受けません。
STUDIOのEmbedボックスにタグを貼る手順
- デザインエディタで、投稿を表示したいページを開きます。
- ナビゲーションで追加アイコンをクリックし、追加パネルの[基本]タブを開きます。
- [埋め込み]セクションから[Blank]をクリックします。Embedボックスがスクリーン上に配置されます。
- 配置したEmbedボックスを選び、右パネルで[埋め込み]タブを選択します(右パネルが閉じている場合は開いてください)。
- [埋め込みコード]の入力欄で[エディタを開く]をクリックします。
- 左側のコードエディタに入っている文字を消し、コピーしたタグを貼り付けて[保存]をクリックします。
- Embedボックスを表示したい位置へ移動し、幅と高さを決めます(次の節で説明します)。
- サイトを公開、または公開済みのサイトなら更新して、公開後のページで表示を確認します。
埋め込みコードの編集画面は、左がコードエディタ、右がプレビューです。プレビューに一覧が出ることもありますが、最終的な見え方や動きは公開後のページで確認してください。公開済みのサイトでは、サイトを更新するまで変更は反映されません。
sandboxタイプで気をつけたいこと
STUDIOのEmbedボックスは、貼ったコードに応じて「iframeタイプ」か「sandboxタイプ」に自動で切り替わります。<iframe>タグだけでできたコードなどはiframeタイプ、それ以外のコードはsandboxタイプです。ウィジェットのタグは<script>なので、sandboxタイプになります。
公式ヘルプでは、sandboxタイプについて次の点が案内されています。
| 公式ヘルプの記載 | ウィジェットへの影響 |
|---|---|
| セキュリティ制限により、一部機能に制約が発生する場合がある | 拡大表示や「Instagramを開く」の動きに影響する可能性があります。公開後のページで確認してください |
| styleなどで設定したスタイルはEmbedボックス内だけに適用される | ウィジェットのスタイルがページ側のデザインに影響することはありません |
| DOMContentLoadedを前提とした処理は動作しない | ウィジェットは使っていないため影響はありません |
| リンクにtarget属性を設定しないと、Embedボックス内で遷移する | ウィジェットのリンク(フォローボタンなど)は新しいタブで開くよう指定しています |
つまり、ウィジェットはページから切り離された枠の中で動きます。これが、次に説明する「高さ」と「拡大表示」の注意点につながります。
Embedボックスの高さの決め方
STUDIOでは、ボックスの高さを右パネルの[ボックス]タブにある[レイアウト]メニューの[高さ]で設定します。単位はpx、%、auto、vhなどから選べます。一般的なボックスは高さをautoにすると中身に合わせて伸びますが、sandboxタイプのEmbedボックスの中身に合わせて高さが自動で決まるかどうかは、公式ヘルプには書かれていません。
そのため、次の手順で確かめるのが確実です。
- まずEmbedボックスの高さをautoにして公開し、一覧の下端まで表示されるか確認します。
- 下の投稿が切れる場合や、逆に大きな空白ができる場合は、高さをpxで指定し直します。表示件数と列数から、一覧全体の高さに少し余裕を持たせた値にします。
- パソコンとスマホの両方で公開後のページを開き、切れていないか確認します。STUDIOのレスポンシブ設定で、画面幅ごとに高さを変えることもできます。
高さの調整が難しい場合は、スライダーがおすすめです。スライダーは写真を1列で並べて左右に送る表示なので、表示件数を増やしても高さがほとんど変わりません。グリッドで行数が多いと、スマホでは列数が減って縦に長くなるため、高さのずれが起きやすくなります。
拡大表示とクリック時の動作
「設定・プレビュー」の「クリック動作」では、投稿をクリックしたときの動きを「拡大表示」「Instagramを開く」「何もしない」から選べます。
sandboxタイプでは、ウィジェットはEmbedボックスという枠の中で動きます。そのため、「拡大表示」を選ぶと、拡大した投稿が<strong>ページ全体ではなくEmbedボックスの枠の中だけに表示される可能性</strong>があります。枠が小さいと、写真やキャプションが窮屈に見えたり、閉じるボタンが見づらくなったりします。この点は実際のSTUDIOのページで確認できていないため、公開後のページで確認してください。
拡大表示が見づらい場合は、次のどちらかで対応できます。
- 「クリック動作」を「Instagramを開く」に変えます。クリックした投稿が新しいタブでInstagramに開きます。STUDIOの枠の大きさに左右されないので、最も確実です。
- 拡大表示を残したい場合は、Embedボックスの高さを十分に取ります。スライダーと組み合わせると高さが足りなくなりやすいので、その場合は「Instagramを開く」が向いています。
「Instagramを開く」を選んだ場合も、sandboxの制限で新しいタブが開かないことがないか、公開後のページで一度クリックして確認してください。拡大表示では動画をその場で再生でき、カルーセルも設定によって全枚数を送れますが、「Instagramを開く」ではInstagram側で見てもらう形になります。
公開後に確認するチェックリスト
| 確認すること | 見るポイント |
|---|---|
| 一覧が表示されるか | 公開後のページで投稿が並んでいるか。管理画面でウィジェットが「公開中」になっているか |
| 下が切れていないか | パソコンとスマホの両方で、最後の行まで見えるか |
| 空白が大きすぎないか | 一覧の下に不要な余白ができていないか |
| クリックの動き | 拡大表示が枠の中で窮屈になっていないか。「Instagramを開く」なら新しいタブで開くか |
| フォローボタン | クリックするとInstagramのプロフィールが開くか |
| 文字の見え方 | 背景が暗い場合は「文字色」を暗い背景用にしているか |
うまく表示されないとき
- 何も表示されない場合は、Embedボックスの埋め込みコードを開き、タグが1行まるごと貼られているか確認します。前後に余計な文字が入っていないかも見てください。
- STUDIOで編集したあとに、サイトを更新したか確認します。更新するまで公開中のサイトには反映されません。
- 管理画面でウィジェットが「非公開」になっていると、タグは何も表示しません。「公開」に切り替えます。
- 新しい投稿が出ない場合、フリープランではサイトへの反映が1日1回です。すぐに反映したい場合はライトプラン以上をご検討ください。また、絞り込み(リール、期間、キーワード)の設定で隠れていないかも確認します。
- Instagramのパスワードを変えたあとなどに表示されなくなった場合は、管理画面の「Instagramアカウントを再連携」で連携をつなぎ直します。連携を解除する必要はありません。
よくある質問
Q. STUDIOの無料プランでも使えますか?
A. STUDIOのEmbedボックスのヘルプには、プランの条件は書かれていません。カスタムコードは有料プランだけですが、今回の方法では使いません。最新の条件はSTUDIOの料金ページやご利用のプランをご確認ください。Social Feed by grip space はフリープラン(0円)で始められます。
Q. 同じ一覧を全ページのフッターに出せますか?
A. 同じタグを、表示したい各ページのEmbedボックスに貼れば表示できます。表示数はウィジェットが表示されるたびに1回と数えるため、全ページに置くと増えやすくなります。フリープランは月3,000回までなので、管理画面のグラフで表示数を確認してください。上限を超えても月末までは表示が続きますが、2か月続けて超えると翌月から表示が止まります。
Q. ページごとに違う投稿を見せたいです。
A. ウィジェットを複数作り、それぞれ絞り込み(キャプションのキーワードや期間など)を変えて、ページごとに別のタグを貼ります。作れる数はフリープランが1つ、ライトが3つまで、スタンダードは無制限です。料金は料金プランをご覧ください。
Q. ハッシュタグで集めた他の人の投稿を表示できますか?
A. できません。表示できるのは、連携した自分のアカウントの投稿だけです。
Q. 「Powered by Social Feed」の表記は消せますか?
A. フリープランでは必ず表示されます。ライトプラン以上で外せます。
まとめ
STUDIOで投稿の一覧を自動で更新したい場合は、[Blank]のEmbedボックスにウィジェットのタグを1行貼ります。Embedボックスはsandboxタイプになり、ページから切り離された枠の中で動くため、高さを確かめることと、拡大表示が窮屈なら「Instagramを開く」に切り替えることがポイントです。どちらも、公開後のページで確認してください。まずはSocial Feed by grip spaceのフリープランで試せます。
参考にした資料
Studio ヘルプ: Embed(埋め込み)ボックス
Studio ヘルプ: Instagramの投稿を埋め込む
Studio ヘルプ: Studioで HTMLの編集・追加・出力をしたい
Studio ヘルプ: サイト・ページにカスタムコードを追加する
Studio ヘルプ: ボックスのレイアウト:サイズ(幅・高さ)
Studio ヘルプ: Embedボックスの縦横比を固定するレスポンシブ設定
