お客様から「自社サイトにInstagramを埋め込みたい」というご依頼をいただきました。最新の投稿が並ぶ、あのウィジェットです。
簡単に終わると思っていたのですが、意外と手こずりました。結論だけ先に書くと、次のコードで実現できます。
<blockquote class="instagram-media"
data-instgrm-permalink="https://www.instagram.com/instagram/"
style="width: 100%">
</blockquote>
<script async src="https://www.instagram.com/embed.js"></script>公式の動線では個別の投稿しか埋め込めない
Instagramの投稿には、埋め込みコードを取得する動線が用意されています。投稿の右上の「･･･」をクリックして、メニューから「埋め込み」を選ぶだけです。
ただしここで得られるのは、その投稿1件だけの埋め込みコードです。今回欲しいのはアカウント全体、つまりプロフィールのウィジェットでした。
プロフィール側にはこの動線が見当たりません。過去にはあったのかもしれませんが、少なくとも現在は用意されていないように見えます。
外部サービスは有料のものばかりだった
「instagram 埋め込み アカウント」のような検索をすると、上位はサードパーティ製のウィジェットサービスで埋まります。アカウント単位で埋め込めるものは確かにありますが、無料で使い続けられるものが見当たりませんでした。
表示件数に制限があったり、無料プランだとサービスのロゴが入ったり、そもそも試用期間だけだったりします。お客様のサイトに月額のかかる外部サービスを1つ増やすのは、埋め込み1か所のためには重い判断です。
見つけたコード
調べていくうちに、投稿の埋め込みと同じ仕組みでプロフィールも埋め込めることが分かりました。
<blockquote class="instagram-media"
data-instgrm-permalink="https://www.instagram.com/instagram/"
style="width: 100%">
</blockquote>
<script async src="https://www.instagram.com/embed.js"></script>data-instgrm-permalink に投稿のURLではなくプロフィールのURLを渡すのがポイントです。instagram の部分を、埋め込みたいアカウントのユーザー名に変えてください。
embed.js は、この blockquote を見つけると中身を iframe に差し替えます。差し替え後の iframe は https://www.instagram.com/{ユーザー名}/embed/ を読み込みます。
サイズは style で調整できます。横幅を400pxにしたいなら次のようにします。
style="width: 400px"日本語で説明している記事が見当たらなかったので、書き残しておきます。
実際の表示
このページにも実際に埋め込んでいます。以下は公式アカウント @instagram のプロフィールです。
すべてのアカウントで表示されるわけではない
ここが注意点です。この方法は、公開アカウントであっても表示されないことがあります。
実際に確認したところ、次のような結果になりました。
| アカウント | 埋め込みの表示 |
|---|---|
@instagram | 表示される |
@nasa | 表示される |
@cookpad_jp | 表示される |
@muji_global | 表示される |
| 小規模な個人向けアカウント | 枠だけが出て、中身が空 |
表示されなかったアカウントは非公開ではなく、通常のプロフィールページは問題なく開けます。それでも埋め込みだけが空になります。
条件はInstagram側で公開されていないため断定できませんが、アカウントによって埋め込みが許可されていない場合がある、という前提で進めたほうが安全です。
埋め込む前に確認する方法
サイトに組み込む前に、ブラウザで次のURLを直接開いてください。
https://www.instagram.com/{ユーザー名}/embed/ここでプロフィールが表示されれば、サイトに埋め込んでも表示されます。真っ白なら、そのアカウントでは表示されません。この確認を先にやっておくと、サイト側の実装を疑って時間を溶かさずに済みます。
まとめ
- プロフィールの埋め込みは、投稿の埋め込みと同じ
blockquote+embed.jsで実現できる data-instgrm-permalinkにプロフィールのURLを渡すのが要点- 有料の外部サービスを入れなくても済む
- ただしアカウントによっては表示されない。
/{ユーザー名}/embed/を先に開いて確認する
追記（2026-09-16）
この記事の方法が現在も有効か、あらためて確認しました。2026年9月時点でも動作します。
一方で、この記事で最初に例として使っていたアカウントは、いつの間にか埋め込みが表示されなくなっていました。アカウント自体は現在も公開されており、通常のプロフィールページは開けます。それでも埋め込みだけが空になります。
一度動いていても、後から表示されなくなることがあるということです。お客様のサイトに組み込む場合は、埋め込みが消えていないかを時々確認できるようにしておくか、表示されなかったときに崩れない見た目にしておくことをおすすめします。