ホームページにInstagramを表示する3つの方法｜公式の埋め込み・リンク・ウィジェット
「ホームページにInstagramを載せたい」と思ったとき、方法は大きく3つあります。Instagramの公式機能で投稿を1件ずつ埋め込む方法、プロフィールへのリンクを置く方法、そして新しい投稿が自動で並ぶウィジェットを使う方法です。どれが正解かは、載せたい投稿の数や、更新にかけられる手間、アカウントの種類によって変わります。この記事では3つの方法の仕組みと条件を、Instagramヘルプセンターや Meta の公式ドキュメントで確認できた範囲で比べ、目的別の選び方をまとめます。ウィジェットを使う理由や設置の全体の流れはInstagramの投稿を自社サイトに埋め込む方法で詳しく紹介しているので、ここでは「どれを選ぶか」に絞ります。
更新日：2026年10月12日
3つの方法の早見表
| 公式の埋め込み | プロフィールへのリンク | ウィジェット(一覧) | |
|---|---|---|---|
| ページに出るもの | 選んだ投稿1件(投稿・リールなど) | ボタンや文字のリンク | 自分のアカウントの最新投稿の一覧 |
| 新しい投稿の反映 | されない(投稿ごとに貼り直す) | —(Instagram側で見てもらう) | 自動で反映 |
| 必要なアカウント | 公開アカウント(埋め込みがオンのもの) | どのアカウントでも可 | プロアカウント(ビジネス / クリエイター) |
| 費用 | 無料 | 無料 | ツールによる(無料プランがあるものも) |
| 手間 | 投稿のたびにコードをコピーして貼る | 最初に1回貼るだけ | 最初に1回タグを貼るだけ |
| 向いている使い方 | ブログ記事やお知らせで特定の投稿を紹介する | まずは導線だけ作りたい / 非公開アカウント | トップページなどで「今」の様子を見せ続ける |
迷ったら、「載せたいのは特定の1件か、最新の一覧か」から考えると決めやすくなります。以下、それぞれの方法を詳しく見ていきます。
方法1: Instagram公式の埋め込み(1件ずつ)
Instagramには、投稿をほかのウェブサイトに埋め込むための公式機能があります。Instagramヘルプセンターによると、公開アカウントの投稿、リール、まとめ、プロフィールは、誰でも自分のウェブサイトやブログに埋め込めます。埋め込んだコンテンツには、ユーザーネームとInstagramへのリンクが表示されます。
手順の大まかな流れは次のとおりです。
- コンピューター、またはスマートフォンのブラウザーで Instagram を開きます。ヘルプセンターには、埋め込みコードは Instagram アプリからはコピーできない、と書かれています。
- 埋め込みたい投稿を開き、「埋め込み」のオプションから埋め込みコードをコピーします。
- ホームページの HTML を貼れる場所(WordPress のカスタムHTMLブロック、各サービスの「HTML埋め込み」など)に貼り付けて保存します。
- 公開ページで表示を確認します。
「埋め込み」が出てこないとき: ヘルプセンターによると、投稿やアカウントが非公開になっているか、公開アカウントでも埋め込みの設定がオフになっている可能性があります。非公開アカウントやそのコンテンツは埋め込めません。公開アカウントは、非公開にしなくても埋め込みだけをオフにでき、公開から非公開に切り替えると埋め込みも自動でオフになります。
知っておきたい性質: 公式の埋め込みは「その投稿」を表示するもので、あとから新しい投稿をしてもホームページ側は変わりません。新しい投稿を載せたいときは、コードをコピーして貼る作業を毎回くり返します。また、Meta の開発者向けドキュメントによると、埋め込み用の HTML は Instagram の embed.js というスクリプトを読み込み、そのスクリプトがページ内の埋め込みを探して表示する仕組みです。
あとで消える可能性: 埋め込んだ投稿の持ち主がアカウントを非公開にしたり、埋め込みをオフにしたりすると、その埋め込みは表示されなくなります。ヘルプセンターには、埋め込みをオフにしてから第三者のサイトの埋め込みが消えるまで時間がかかることがある、とも書かれています。他人の投稿を埋め込む場合は、このように自分では管理できない点も考えておきましょう。
開発者向けには、埋め込み用の HTML をプログラムから取得する oEmbed という仕組みもあります。Meta のドキュメントでは、これはウェブサイトやアプリへの埋め込みのためのもので、データを分析など別の目的に使うことは禁止されていること、非公開・休止中・年齢制限のあるアカウントや、埋め込みをオフにしたアカウントの投稿には使えないこと、ストーリーズには対応していないことが説明されています。
WordPress.com を使っている場合は、すべてのプランで使える「埋め込み」ブロックが Instagram に対応していると公式サポートに書かれています。くわしくはWordPressにInstagramの投稿を表示する方法をご覧ください。
方法2: プロフィールへのリンクを置く
いちばん手軽なのは、Instagram のプロフィールページへのリンクを置く方法です。投稿そのものはホームページに表示されませんが、見たい人を Instagram へ案内できます。プロフィールの URL は通常、次の形です。
<a href="https://www.instagram.com/ユーザーネーム/" target="_blank" rel="noopener">Instagramで最新の投稿を見る</a>「ユーザーネーム」の部分を自分のアカウント名に置き換えます。別のタブで開かせたいときは、この例のように target="_blank" と rel="noopener" を付けます。
- 置き場所: ヘッダーやフッターのSNSアイコン、会社概要やお店の紹介ページ、お問い合わせのあとに表示するページなど。全ページに出るヘッダー・フッターに置くと見つけてもらいやすくなります。
- 文言: 「Instagram」だけより、「スタッフの日常をInstagramで発信しています」のように、何が見られるかを書くと、リンク先の内容が伝わりやすくなります。
- ロゴの扱い: Instagram のロゴやアイコンを使う場合、Meta のブランドリソースのページでは、ブランドリソースセンターにあるロゴだけを使い、ガイドラインに従うよう求められています。また「Instagram」という語は、大文字の「I」を保ち、変更・省略・翻訳しないことも求められています。
リンクの方法は、アカウントが非公開でも、個人アカウントでも使えます。一方で、ホームページを見ている人には投稿の中身が伝わらず、クリックしてもらえなければ見てもらえません。「写真で雰囲気を伝えたい」という目的には、ほかの方法と組み合わせるのがおすすめです。
方法3: ウィジェットで最新の投稿を一覧にする
3つ目は、Instagram と連携したウィジェットを使って、自分のアカウントの最新投稿を一覧で表示する方法です。一度タグを貼れば、Instagram に投稿するだけでホームページの一覧も更新されるので、更新の手間がかかりません。
例として、Social Feed by grip space の場合の流れと特徴をまとめます。
- メールアドレスとパスワードで登録し、Instagram のプロアカウント(ビジネスまたはクリエイター)を連携します。個人アカウントでは連携できません。
- 管理画面で、グリッドかスライダーかを選び、列数、表示件数、余白、最大幅、文字サイズ、文字色などをプレビューを見ながら決めます。
- 発行された
<script>タグ1行を、ホームページの HTML を貼れる場所に貼ります。タグを置いた位置に一覧が表示されます。
投稿をクリックしたときは、拡大表示・Instagram を開く・何もしない、から選べます。拡大表示ではカルーセルの全枚数を送ったり、動画を再生したりできます。リールを除く / リールだけにする、期間(30 / 90 / 365日)で絞る、キャプションのキーワードで絞る、といった出し分けもできます。
画像には、Instagram で設定した代替テキスト、無ければキャプションの先頭約100字が代替テキスト(alt)として入ります。キーボードの Tab で各投稿に移動して Enter / Space で開け、拡大表示は Escape で閉じられます。
ただし、表示できるのは連携した自分のアカウントの投稿だけです。ハッシュタグで集めた投稿や他人のアカウント、複数のアカウントをまとめた表示、ストーリーズには対応していません。
| プラン(税込) | ウィジェット | 表示数 | 投稿数 | 反映 |
|---|---|---|---|---|
| フリー(0円) | 1つ | 月3,000回まで | 16件まで | 1日1回 |
| ライト(月1,200円) | 3つまで | 月30,000回まで | 30件まで | すぐ反映 |
| スタンダード(月2,980円) | 無制限 | 無制限 | 50件まで | すぐ反映 |
フリープランには「Powered by Social Feed」の表記が入ります。年額や設置代行など、くわしくは料金プランをご覧ください。
目的別の選び方
次の質問に順に答えていくと、合う方法が見つかります。
- アカウントは非公開ですか? 非公開なら、公式の埋め込みは使えません。リンクを置くか、公開に切り替えてからほかの方法を検討します。
- 載せたいのは特定の1件ですか? キャンペーンのお知らせやブログ記事の中で特定の投稿を紹介したいなら、公式の埋め込みが手軽です。
- 最新の様子を見せ続けたいですか? トップページや店舗ページで「いつ見ても新しい」状態にしたいなら、ウィジェットが向いています。公式の埋め込みでは、投稿のたびに貼り替える必要があります。
- プロアカウントですか? ウィジェットはプロアカウントでの連携が前提です。個人アカウントの場合は、切り替えるか、公式の埋め込みとリンクで対応します。
- ホームページに HTML を貼れますか? 公式の埋め込みもウィジェットも、HTML(script)を貼れる場所が必要です。使っているサービスやプランによっては貼れないことがあるので、ご利用のサービスのヘルプでご確認ください。貼れない場合はリンクが現実的です。
組み合わせて使う例
3つの方法は、どれか1つに決める必要はありません。役割を分けて組み合わせると、それぞれの弱点を補えます。
| 場所 | 方法 | ねらい |
|---|---|---|
| トップページ | ウィジェット(グリッド) | 最新の雰囲気を見せる。更新の手間をかけない |
| ヘッダー・フッター | プロフィールへのリンク | どのページからでもフォローしてもらえる導線 |
| ブログ記事・お知らせ | 公式の埋め込み | 記事の内容に合った特定の投稿を紹介する |
| 採用ページ・店舗ページ | ウィジェット(別に作って絞り込む) | キャプションのキーワードでページに合った投稿だけを出す |
ウィジェットにはアカウント名やフォローボタンも表示できるので、一覧の上で Instagram へ案内することもできます。
どの方法でも共通の注意点
- 公開ページで確かめる: サービスによっては、編集画面ではスクリプトが動かず、公開ページやプレビューでしか表示されません。保存後に公開ページを開いて確認しましょう。
- スマートフォンで見る: 一覧は列数が多いとスマートフォンで小さくなります。ウィジェットなら列数を減らすか、スライダーにします。
- 他人の投稿は慎重に: 公式の埋め込みは公開アカウントなら誰でも使えますが、前述のとおり持ち主の設定で表示されなくなることがあります。写っている人や権利の扱いは、載せる前に確認しておきましょう(著作権・肖像権の考え方)。
- 貼れないサービスもある: ホームページ作成サービスによっては、HTML や script を貼る機能が無い、または有料プランだけ、ということがあります。
始める前のチェックリスト
- 載せたいのは「特定の投稿」か「最新の一覧」かを決めた
- アカウントが公開か非公開か、個人かプロアカウントかを確認した
- ホームページ作成サービスやプランで、HTML(script)を貼れる場所があるか確認した
- 表示する場所(トップ、フッター、記事の中など)と、スマートフォンでの見え方を決めた
- 他人の投稿を使う場合、権利や写っている人の扱いを確認した
よくある質問
Q. 公式の埋め込みで、最新の投稿が自動で表示されるようにできますか?
A. 公式の投稿埋め込みは、選んだ投稿を表示するものです。新しい投稿を自動で並べたい場合は、ウィジェットを使います。
Q. 個人アカウントのままでも載せられますか?
A. 公開アカウントなら公式の埋め込みが使え、リンクはどのアカウントでも置けます。ウィジェット(Social Feed by grip space)はプロアカウントでの連携が必要です。切り替え方はプロアカウントへの切り替え方と注意点をご覧ください。
Q. ウィジェットは無料で使えますか?
A. フリープランなら無料で1つ作れます。登録はメールアドレスとパスワードだけです。無料で登録する
Q. ウィジェットを使うと Cookie の告知が必要になりますか?
A. このウィジェット自体は Cookie や localStorage を使いません。ただし画像は Instagram のサーバーから読み込まれます。サイト全体として何を告知するかは、ほかに使っているツールも含めてご判断ください。
どの方法にするか決まったら、ウィジェットの機能や設置の流れをSocial Feed by grip space の紹介ページでご覧ください。
参考にした資料
- Instagramヘルプセンター「Instagramの投稿またはプロフィールを埋め込む」 https://www.facebook.com/help/instagram/620154495870484
- Meta for Developers「Embed an Instagram Post」(oEmbed) https://developers.facebook.com/documentation/instagram-platform/oembed
- Meta ブランドリソース「Instagram」 https://www.meta.com/ja-jp/brand/resources/instagram/instagram-brand/
- WordPress.com Support「Custom HTML Block」 https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/
