WixにInstagramの投稿一覧を表示する方法｜HTML埋め込みにタグを1行
Wixのサイトに、Instagramの最新投稿を一覧で載せたい。そんなときは、Wixの「HTML 埋め込み」にSocial Feed by grip space のタグを1行貼るだけで表示できます。ただしWixの公式ヘルプにあるとおり、HTML 埋め込みはiFrame(ページの中の別の枠)で表示されます。そのため、枠の高さを自分で決める必要があり、投稿をクリックしたときの拡大表示も枠の中に収まる可能性があります。この記事では、Wix エディタでの手順と、iFrameならではの注意点を公式ヘルプの記載に沿って説明します。
更新日：2026年10月12日
Wixで使う機能は「HTML 埋め込み」
Wixには外部のコードを入れる方法がいくつかあります。今回のウィジェットは「表示したい場所に一覧を出す」ものなので、ページ上に置ける「HTML 埋め込み」を使います。サイトにInstagramを載せる理由や全体の流れは、Instagramの投稿を自社サイトに埋め込む方法をご覧ください。
| Wixの機能 | 公式ヘルプでの説明 | このウィジェットに使うか |
|---|---|---|
| HTML 埋め込み | コードスニペットを埋め込み、ページにウィジェットを表示する。iFrameで表示される | 使う(この記事の方法) |
| カスタムコード(設定 → 開発・統合設定) | ページのヘッダーまたはボディに入れる。訪問者には表示されない用途(所有権の確認、計測など) | 使わない。置いた位置に一覧が出ないため |
| カスタム要素 | プレミアムプランへのアップグレード、ドメインの接続、広告の非表示が必要 | 使わない。独自の要素を作るための機能のため |
カスタムコードの記事には、配置場所として「ヘッダー」「ボディ - 最初」「ボディ - 最後」が挙げられています。どれもページの決まった位置なので、本文の好きな場所に一覧を出すことはできません。HTML 埋め込みについては、Wix エディタの記事にプランの条件は書かれていません。気になる場合は、ご利用のプランをご確認ください。
準備: ウィジェットのタグを用意する
- Social Feed by grip space にメールアドレスで登録します。フリープランでもウィジェットを1つ作れます。
- 管理画面で「＋ Instagramアカウントを連携」を押し、Instagramのプロアカウント(ビジネスかクリエイター)を連携します。個人アカウントのままでは連携できません。
- 「設定・プレビュー」を開き、グリッドかスライダーを選んで、表示件数・列数・画像間の余白などを決め、「設定を保存」を押します。Wixでは後で説明するとおりスライダーが扱いやすいです。
- 「WEBサイトにタグを設置」の欄で「コピー」を押します。タグは次のような1行です。
<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>Wixの公式ヘルプでは、埋め込むコードはHTTPSを使い、最新のHTML5に対応したものにするよう案内されています。このタグはHTTPSで読み込む1行のscriptなので、そのまま貼れます。
Wix エディタでHTML 埋め込みに貼る手順
- Wix エディタで、投稿を表示したいページを開きます。
- エディタ左側の「パーツを追加」をクリックします。
- 「埋め込みコード」→「よく使われる埋め込み」の順に選び、「HTML 埋め込み」をクリックしてページに追加します。
- ページ上の埋め込みをクリックし、「コードを入力」を選びます。
- コピーしたタグを貼り付け、「適用」をクリックします。
- 必要に応じて「埋め込みの内容を説明」に、たとえば「Instagramの最新投稿」のような説明を入れます。
- 埋め込みを表示したい位置へドラッグし、幅と高さを調整します(次の節で詳しく説明します)。
- サイトを公開し、公開後のページで表示を確認します。
iFrameで表示されるときの高さの決め方
Wixの公式ヘルプには、エディタのHTML 埋め込みとURL 埋め込みはiFrameであり、埋め込むコードやサイトがレスポンシブでも、埋め込み自体はレスポンシブにならない、と書かれています。また、iFrameの枠が中身より小さいとコンテンツが切り取られる可能性がある、とも案内されています。
このウィジェットは、枠の幅に合わせて列の大きさを変えます。ただし、枠の高さはWix側で決めた値のままで、一覧の量に合わせて自動では伸びません。そのため、次の点を意識して高さを決めてください。
| 状態 | 起きること | 対処 |
|---|---|---|
| 枠の高さが足りない | 下の行の投稿やフォローボタンが切れる | 埋め込みの高さを広げるか、表示件数を減らす |
| 枠の高さが大きすぎる | 一覧の下に空白ができる | 高さを一覧に合わせて縮める |
| 枠の幅が狭い | 写真が小さくなる。グリッドは列数が減って縦に長くなることがある | 幅を広げるか、列数を減らす |
おすすめはスライダーです。スライダーは写真を1列で並べて左右に送る表示なので、表示件数を増やしても高さがほとんど変わらず、Wixの固定の枠に収めやすくなります。グリッドを使う場合は、表示件数と列数を決めてから枠の高さを合わせ、余裕を少し持たせてください。
枠の高さの目安を計算する
高さを何度も公開して試すのは手間なので、先に目安を出しておくと楽です。このウィジェットの写真は正方形で表示され、上にアカウントの見出し(アイコンは42px、下に14pxの余白)が入ります。これを使うと、おおよその高さは次のように求められます。
| 項目 | 求め方 |
|---|---|
| 1枚の大きさ | (一覧の幅 − 画像間の余白 ×(列数 − 1))÷ 列数 |
| 写真部分の高さ(グリッド) | 1枚の大きさ × 行数 + 画像間の余白 ×(行数 − 1) |
| 写真部分の高さ(スライダー) | 1枚の大きさ + 約8px(横スクロール用の余白) |
| 見出しの分 | 約56px(アイコン42px + 余白14px)。見出しを出さない設定なら不要 |
| その他 | フリープランでは下に「Powered by Social Feed」の表記が入るので、その分の余裕を足す |
たとえば、幅600px・3列・余白8px・9件のグリッドなら、1枚は約195px、写真部分は3行で約600px、見出しを足して約656pxです。表記や文字の大きさの分を見込んで、700px前後から試すとよいでしょう。同じ設定をスライダーにすると、写真部分は約203px、全体でも300px弱に収まります。
スマホでは、枠の幅が狭いと列数が自動で減ります。1枚が100pxを下回らないように調整されるため、たとえば幅320pxの枠に4列・余白8pxの設定だと3列で表示され、12件なら4行になります。デスクトップと同じ高さでは足りなくなることが多いので、モバイル側の高さは別に見積もってください。
モバイル表示を確認する
Wixの公式ヘルプによると、デスクトップ版から引き継がれた埋め込みは、モバイルで表示が変わる場合があります。表示が合わないときは、デスクトップ版のパーツをモバイルで非表示にし、モバイルエディタの「モバイルに追加」→「埋め込みコード」→「HTML 埋め込み」からモバイル専用のパーツを追加し直す方法が案内されています。モバイルエディタから追加したパーツはモバイル専用で、デスクトップ版には表示されません。
スマホは画面が狭いので、グリッドの場合は1行あたりの写真が小さくなったり、列数が減って縦に伸びたりします。モバイル側の埋め込みは、デスクトップより高さを多めに取るか、スライダーにするのが無難です。公開後に実際のスマホで確認してください。
拡大表示とクリック時の動作
「設定・プレビュー」の「クリック動作」では、投稿をクリックしたときの動きを「拡大表示」「Instagramを開く」「何もしない」から選べます。
HTML 埋め込みはiFrameで表示されるため、「拡大表示」を選ぶと、拡大した投稿は<strong>ページ全体ではなく埋め込みの枠の中だけに表示される可能性</strong>があります。特にスライダーのように高さの低い枠では、写真やキャプションが窮屈になりがちです。この点は実際のWixのページで確認できていないため、公開後のページで確認してください。
- 枠が小さく拡大表示が見づらい場合は、「クリック動作」を「Instagramを開く」にします。クリックした投稿が新しいタブでInstagramに開くので、枠の大きさに左右されません。
- 拡大表示を使いたい場合は、枠の高さを十分に取ったグリッドで使います。
Wix Studio の公式ヘルプでは、HTMLの内容はサンドボックス化されたiFrame内に表示され、動画の自動再生のような自動で始まる機能は通常ブロックされる、と説明されています(一方で、スクリプトやポップアップは許可されています)。このウィジェットの拡大表示では動画をミュートで自動再生しますが、Wix上では自動で始まらない場合があります。その場合も操作バーから再生できます。
Wixのデザインになじませる設定
iFrameの中に表示されるため、Wix側のフォントや色の設定はウィジェットに直接は効きません。見た目は「設定・プレビュー」で合わせます。
| 設定 | 合わせ方 |
|---|---|
| 文字色 | Wixのセクションの背景が暗い場合は、暗い背景用に切り替えます。名前や投稿数が読みやすくなります |
| 文字サイズ | 周りの本文と同じくらいの大きさにすると、ページの中で浮きません |
| フォローボタン | 文言・色・余白を変えられます。サイトのボタンの色にそろえると統一感が出ます |
| 画像間の余白 | Wixのギャラリーなど、ほかの写真の並びと間隔をそろえます |
設定を変えても、Wixに貼ったタグはそのまま使えます。ただし、列数や表示件数を変えると一覧の高さも変わるので、その場合はWix側の枠の高さも見直してください。
公開後に確認するチェックリスト
| 確認すること | 見るポイント |
|---|---|
| 一覧が表示されるか | 公開後のページで投稿が並んでいるか。管理画面でウィジェットが「公開中」になっているか |
| 下や右が切れていないか | パソコンとスマホの両方で、最後の行とフォローボタンまで見えるか |
| 空白が大きすぎないか | 一覧の下に不要な余白ができていないか |
| クリックの動き | 拡大表示が枠の中で窮屈になっていないか。「Instagramを開く」なら新しいタブで開くか |
| 動画 | 拡大表示で再生できるか |
| 文字の見え方 | 背景が暗い場合は「文字色」を暗い背景用にしているか |
うまく表示されないとき
- 枠が空のままなら、埋め込みを開き直してタグが1行まるごと貼られているか、貼り付けたあとに「適用」を押したかを確認し、もう一度公開します。
- 投稿が下や右で切れる場合は、エディタで埋め込みの枠を高く、または広くしてから公開し直します。
- 管理画面でウィジェットが「非公開」になっていると、タグは何も表示しません。「公開」に切り替えます。
- 新しい投稿が出ない場合、フリープランではサイトへの反映が1日1回です。また、絞り込み(リール、期間、キーワード)で隠れていないかも確認します。
- Instagramのパスワードを変えたあとなどに表示されなくなった場合は、管理画面の「Instagramアカウントを再連携」でつなぎ直します。連携を解除する必要はありません。
なお、Wixの公式ヘルプには、Wixで作成・テストされていない外部コードはサポート対象外で、問題があれば提供元に問い合わせるよう書かれています。ウィジェットの表示について困ったときは、Social Feed by grip space 側にお問い合わせください。
よくある質問
Q. Wixの無料プランでも使えますか?
A. Wix エディタのHTML 埋め込みの記事には、プランの条件は書かれていません。最新の条件はご利用のプランをご確認ください。Social Feed by grip space はフリープラン(0円)で始められます。
Q. ページごとに違う投稿を見せたいです。
A. ウィジェットを複数作り、キャプションのキーワードや期間などの絞り込みを変えて、ページごとに別のタグを貼ります。作れる数はフリープランが1つ、ライトが3つまで、スタンダードは無制限です。料金は料金プランをご覧ください。
Q. ハッシュタグで集めた他の人の投稿を表示できますか?
A. できません。表示できるのは、連携した自分のアカウントの投稿だけです。
Q. 表示回数の上限を超えたらどうなりますか?
A. 表示数はウィジェットが表示されるたびに数えます。上限を超えても月末までは表示が続き、2か月続けて超えた場合は翌月から表示が止まります。80%と100%に達したときはメールでお知らせします。
まとめ
Wixでは「パーツを追加」→「埋め込みコード」→「HTML 埋め込み」にタグを1行貼れば、Instagramの最新投稿を一覧で表示できます。HTML 埋め込みはiFrameなので、枠の高さを自分で合わせること、スマホの表示を別に確かめること、拡大表示が窮屈なら「Instagramを開く」に切り替えることがポイントです。まずはSocial Feed by grip spaceのフリープランで試してみてください。
参考にした資料
Wix ヘルプセンター: Wix エディタ:サイトまたはウィジェットを埋め込む
Wix ヘルプセンター: Wix Studio エディタ:HTML iFrame 要素を追加する
Wix ヘルプセンター: Wix エディタ:モバイルサイトに埋め込みとカスタム要素を追加する
Wix ヘルプセンター: サイトにカスタムコードを埋め込む
