GoogleサイトにInstagramの投稿を表示する方法｜埋め込みコードで一覧を載せる
Googleサイトは、部活やサークル、教室、小さなお店、イベントのサイトを無料で手早く作れるツールです。そこにInstagramの最新投稿を一覧で載せたい場合、Googleサイトには専用の機能はありませんが、「挿入」→「埋め込む」→「埋め込みコード」からHTMLやJavaScriptを追加できます。この記事では、Social Feed by grip space のタグを貼る手順を、Googleサイトの日本語ヘルプの記載に沿って説明します。あわせて、埋め込んだコードはページの中の枠に収まって表示されることを前提に、枠の高さの決め方と、投稿をクリックしたときの拡大表示の注意点も扱います。
更新日：2026年10月12日
先に結論: 貼れる。ただし枠の大きさは自分で決める
サイトにInstagramを載せる理由や全体の流れは、Instagramの投稿を自社サイトに埋め込む方法で説明しています。ここではGoogleサイトに固有の点をまとめます。
| 疑問 | 答え |
|---|---|
| タグを貼れるか | 貼れます。ヘルプに「サイトに HTML、CSS または JavaScript のコードを追加する」手順があり、JavaScript は <script> タグ内に書くよう案内されています。このウィジェットのタグはもともと script タグの1行です |
| プランの条件はあるか | ヘルプの埋め込みコードの手順には、プランの条件は書かれていません |
| 新しい投稿は自動で出るか | 出ます。タグは一度貼るだけで、フリープランは1日1回、有料プランはすぐに反映されます |
| 枠は一覧に合わせて伸びるか | 伸びない前提で準備してください。枠の高さを自分で決めます |
| 拡大表示は使えるか | 枠の中に表示されると考えてください。枠が小さいなら「Instagramを開く」が無難です |
| どこで確かめるか | 公開したサイトで、パソコンとスマホの両方で確かめます |
準備: ウィジェットのタグを用意する
- Social Feed by grip space にメールアドレスで登録します。フリープランでもウィジェットを1つ作れます。
- 管理画面で「＋ Instagramアカウントを連携」を押し、Instagramのプロアカウント(ビジネスかクリエイター)を連携します。個人アカウントでは連携できません。詳しくはプロアカウントの記事をご覧ください。
- 「設定・プレビュー」で表示形式や表示件数を決めて「設定を保存」を押します。Googleサイト向けのおすすめは後の節で説明するので、先に読んでおくと手戻りが減ります。
- 「WEBサイトにタグを設置」の欄で「コピー」を押します。タグは次のような1行です。
<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>列数や絞り込み、色などの設定はウィジェット側に保存されます。あとで管理画面の設定を変えれば、Googleサイトの埋め込みを貼り直さなくても表示が変わります。
「挿入」→「埋め込む」→「埋め込みコード」に貼る手順
Googleサイトのヘルプ「Google のファイル、動画、ウェブサイトのコンテンツなどを追加する」にある手順です。
- パソコンを使用して、Googleサイトでサイトを開き、一覧を出したいページを表示します。
- 右側の「挿入」→「埋め込む」をクリックします。
- 「埋め込みコード」をクリックします。
- コピーしたタグを貼り付け、「次へ」をクリックします。
- 「挿入」をクリックします。
- ページに入った埋め込みの枠を、一覧を出したい位置へ動かし、大きさを調整します(次の節で説明します)。
- 変更内容を公開するには、右上の「公開」をクリックします。
「埋め込む」には、URLを入力する方法と「埋め込みコード」の2つがあります。タグの中のURLを「URL」のほうに入れても、一覧は表示されません。そのURLが返すのはページではなくスクリプトで、script タグの中で使って初めて動くためです。必ずタグを1行まるごと「埋め込みコード」に貼ってください。
埋め込みが「枠の中」で動くと何が変わるか
Social Feed by grip space は、ふだんは iframe(ページの中の別の枠)を使いません。タグを置いた位置に、ページの一部として一覧を描くので、一覧の高さに合わせてページも伸びます。
Googleサイトの埋め込みコードは、ページの中に置いた枠として扱われます。Googleの公式ヘルプには仕組みの説明がなく、2017年の公式のお知らせでも、ウェブページを iframe として埋め込めるようになったことと並べて、HTML と JavaScript の埋め込みが紹介されているだけです。そこでこの記事では、<strong>タグは枠の中で動き、一覧もその枠の中に描かれる</strong>という前提で説明します。この前提だと、次の4点が変わります。
| 変わること | 起きうること | 備え方 |
|---|---|---|
| 高さ | 一覧が枠より高いと、下の投稿が切れるか、枠の中でスクロールが必要になる | 枠の高さを一覧に合わせる。高さの読みやすいスライダーにする |
| 拡大表示 | 投稿をクリックしたときの拡大表示が、ページ全体ではなく枠の中だけに出る | 枠が小さいときは「クリック動作」を「Instagramを開く」にする |
| 新しいタブ | フォローボタンや「Instagramを開く」は新しいタブで開く動作のため、枠の設定によっては開かない可能性がある | 公開後に実際に押して確かめる |
| 表示の言語 | ウィジェットの文言の言語は、ページの言語設定で決まる。枠の中では、それが枠側の設定になる | フォローボタンの文言を自分で入力しておく(後の節で説明) |
どれも実際のGoogleサイトのページで確かめたものではありません。公開後に、次の節以降のチェックで確認してください。
枠の高さの決め方
枠の幅に合わせて、ウィジェットは写真の大きさと列数を自動で調整します。設定した列数は「最大の列数」で、1枚が100pxより小さくなる幅では列数を減らします。一方、高さは自動では合いません。写真は正方形なので、目安は次のように計算できます(画像間の余白は既定の4pxとします)。
| 枠の幅 | 表示形式 | 件数と列数 | 1枚の大きさ | 写真部分の高さ | 見出しと表記を足した目安 |
|---|---|---|---|---|---|
| 800px | グリッド | 12件・4列(3行) | 約197px | 約600px | 約680px |
| 800px | グリッド | 6件・6列(1行) | 約130px | 約130px | 約210px |
| 800px | スライダー | 12件・4列分を表示 | 約197px | 約205px | 約280px |
| 600px | グリッド | 9件・3列(3行) | 約197px | 約600px | 約680px |
「見出し」はアイコン・アカウント名・フォローボタンの部分で約56px、フリープランで入る「Powered by Social Feed」の表記で約20pxを足しています。計算の考え方はWixの記事でも詳しく説明しています。目安より少し大きめに枠を取り、公開したページで、下が切れていれば枠を広げ、空白が大きければ縮めて公開し直します。
ヘルプには、埋め込みの枠の大きさを変える手順は書かれていません。編集画面で埋め込みをクリックし、枠の端をドラッグして調整してください(写真のサイズ変更の手順では、写真をクリックして表示される点で大きさを調整すると案内されています)。
Googleサイト向けのおすすめ設定
| 設定 | おすすめ | 理由 |
|---|---|---|
| 表示形式 | スライダー、または1〜2行のグリッド | 高さが小さく、読みやすい |
| 表示件数 | グリッドは6〜12件、スライダーは10〜20件 | 高いグリッドほど大きな枠が要り、スマホで切れやすい |
| 列数 | 3〜4 | ページより狭い枠でも写真が小さくなりすぎない |
| クリック動作 | 公開後にInstagramが開くことを確かめたうえで「Instagramを開く」 | 窮屈な拡大表示の代わりに、Instagramで大きく見てもらえる |
| ウィジェット幅(px) | 0(制限なし)か、枠の幅 | 枠より小さい値だと左右に余白ができる(一覧は中央に置かれる) |
| 文字色 | ページの背景が暗いなら「明るい色(暗い背景向け)」 | アカウント名や投稿数が読みやすくなる |
拡大表示の見え方と、公開後に確かめること
「クリック動作」を「拡大表示」にすると、クリックした投稿が画面いっぱいの暗い背景の上に大きく表示され、キャプションといいね数も出せます。動画はミュートで自動再生され、操作バーで音を出せます。この拡大表示は「表示されている範囲」の高さに合わせて大きさが決まるため、枠の中で動く場合は、枠の高さが小さいほど写真も小さくなります。高さ280px前後のスライダーの枠では、写真はかなり小さくなると考えてください。
公開後に、次の順で一度ずつ試してください。
- 投稿をクリックする。「拡大表示」なら枠の中で拡大され、×ボタンで閉じられるか。「Instagramを開く」なら新しいタブでInstagramの投稿が開くか。
- フォローボタンを押す。新しいタブでInstagramのプロフィールが開くか。
- スライダーを送る。スライダーなら矢印やスワイプで送れるか。
- 動画を再生する。動画を含む場合、拡大表示で再生できるか。
投稿やフォローボタンを押してもInstagramが開かない場合は、枠が新しいタブを開くことを許していないと考えられます。そのときは、クリック動作を「拡大表示」か「何もしない」にし、フォローボタンが働かないなら「アカウント情報を表示」をオフにして、Googleサイトの「挿入」→「ボタン」や「ソーシャル リンク」でInstagramへのリンクを別に置いてください。
ページ全体を一覧に使う方法
ヘルプによると、埋め込みは1ページ全体に表示することもできます。右側の「ページ」をクリックし、追加アイコンにカーソルを合わせて「ページ全体の埋め込み」アイコンをクリックし、そのあと「埋め込みコード」を選びます。「Instagram」のような専用ページを作れば、ページの途中の小さな枠よりも広く使えるので、件数の多いグリッドや拡大表示が窮屈になりにくくなります。この場合も、公開後にパソコンとスマホで最後まで見えるか確かめてください。
ウィジェットの言語について
ウィジェットには「投稿」「フォローする」などの短い文言があり、日本語か英語かを、動いている文書の言語設定で判断します。設定が無い場合は、閲覧している人のブラウザの言語に従います。枠の中で動く場合は枠側の文書を見るので、閲覧者によって英語で表示される可能性があります。
いちばん目立つフォローボタンは、「設定・プレビュー」の「フォローボタン文言」に自分で文言を入れておくと、そのとおりに表示されます。ただし、既定の「フォローする」のままだと言語に合わせて切り替わる扱いになるため、「Instagramをフォロー」のように既定とは違う文言にしてください。投稿数の「投稿」や、拡大表示の「Instagramで見る」などの文言は変えられません。
表示数とプラン
Googleサイトの枠の中でも、一覧が読み込まれるたびに表示数として数えます。フリープランは月3,000回まで、ライト(月額1,200円・税込)は月30,000回まで、スタンダード(月額2,980円・税込)は無制限です。上限を超えても月末までは表示が続き、2か月続けて超えると翌月から表示が止まります。80%と100%に達したときはメールでお知らせします。
トップページにグリッド、別のページにスライダーのように形式を分けたい場合は、ウィジェットが2つ必要なので、ライト以上になります。詳しくは料金プランと、フリープランでできることをご覧ください。
表示されないとき
- 管理画面でウィジェットが「公開」になっているか確認します。「非公開」だと何も表示しません。
- 「URL」ではなく「埋め込みコード」に、タグを
<scriptから</script>まで貼ったか確認します。 - 埋め込みを追加・変更したあと、右上の「公開」を押したか確認します。押していなければ、公開中のサイトには反映されません。
- 一覧の下が切れている場合は、枠を高くして公開し直します。
- 新しい投稿が出ない場合、フリープランは1日1回の反映です。絞り込み(リール、期間、キーワード)で隠れていないかも見てください。Instagramのパスワードを変えたあとなどは、管理画面の「Instagramアカウントを再連携」でつなぎ直します。
そのほかの原因はInstagramの埋め込みがサイトに表示されない原因と直し方にまとめています。
よくある質問
Q. 職場や学校のGoogleアカウントで作ったサイトでも使えますか?
A. 埋め込みコードの手順自体は同じです。ただし、ヘルプの共有の手順には、職場や学校で使っている場合はほかの選択肢が表示されることがあると書かれており、組織の設定によって扱いが変わる可能性があります。挿入や公開ができない場合は、組織の管理者にご確認ください。
Q. ハッシュタグの投稿や、他の人のアカウントを表示できますか?
A. できません。表示できるのは、連携した自分のアカウントの投稿だけです。
Q. すべてのページの下に一覧を出せますか?
A. 今回確認したヘルプには、全ページ共通の場所に埋め込みを置く手順はありませんでした。出したいページごとに埋め込みを追加してください。同じウィジェットのタグを複数のページに貼れます。
まとめ
Googleサイトでは、「挿入」→「埋め込む」→「埋め込みコード」にタグを1行貼り、「次へ」→「挿入」→「公開」でInstagramの最新投稿を一覧で表示できます。埋め込みは枠の中で動く前提で、枠の高さを一覧に合わせること、スライダーや少なめの件数で高さを抑えること、拡大表示とリンクの動きを公開後に確かめることがポイントです。まずはSocial Feed by grip spaceのフリープランで試してみてください。
参考にした資料
サイト ヘルプ: Google のファイル、動画、ウェブサイトのコンテンツなどを追加する
サイト ヘルプ: テキストや画像を追加、編集する
サイト ヘルプ: サイトを公開して共有する
サイト ヘルプ: Google サイトの使い方
Google Workspace Updates: Embed HTML and JavaScript in the new Google Sites(2017年12月5日、英語)
