Instagramの投稿をWebサイトに埋め込む方法

概要

WebサイトにInstagramの投稿を埋め込みたいケースがあり、仕組みを調べた。結論としては2つのアプローチがある。開発者アカウント不要のコピペ方式と、Meta開発者アカウントが必要なoEmbed API方式。特定の投稿を表示したいだけならコピペで十分。そのまとめ。

Instagramのembed機能の現状

Instagramでは個別の投稿（写真、カルーセル、動画、Reels）をWebサイトに埋め込むことができる。ただし以下の制限がある。

• プロフィール全体のフィードウィジェット（以前のAPI経由のもの）は廃止済み
• ストーリーズの埋め込みは非対応
• サードパーティサービス（Elfsight、SnapWidget、Beholdなど）はフィードウィジェットを提供しているが、スクレイピングやInstagram Graph APIに依存している

つまり、公式にサポートされているのは「個別の投稿の埋め込み」のみということになる。

方法1: コピペによる埋め込み（開発者アカウント不要）

最もシンプルな方法。誰でもすぐにできる。

手順はこう。

1. instagram.comで任意の投稿を開く
2. 投稿の三点メニューをクリックして「埋め込み」を選択
3. HTMLコードをコピー
4. 自分のWebサイトのHTMLに貼り付ける

生成されるコードはこのような構造になる。

<blockquote
  class="instagram-media"
  data-instgrm-permalink="https://www.instagram.com/p/POST_ID/"
>
  ...
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

キャプションを含めるか含めないかのオプションもある。開発者登録やAPIキーは一切不要。

公式ドキュメントはこちら。

• Embed Button

方法2: oEmbed API（Meta開発者アカウントが必要）

プログラムから動的にembed HTMLを取得したい場合はoEmbed APIを使う。

• Facebook/MetaのAppとアクセストークンが必要
• エンドポイント: GET /instagram_oembed?url=<URL>&access_token=<TOKEN>
• レート制限: アプリアクセストークンで24時間あたり最大500万リクエスト

これは例えば「ユーザーがURLを入力すると自動的にembed表示を生成するツール」のようなケースで必要になる。静的なHTMLにコピペするだけなら方法1で十分なので、このAPIの出番はアプリケーション開発時に限られる。

公式ドキュメントはこちら。

• oEmbed API

まとめ

特定の投稿を自分のWebサイトに表示したいだけなら、方法1のコピペで十分。開発者アカウントもAPIキーも不要。oEmbed APIが必要になるのは、動的にembed HTMLを生成するアプリケーションを構築する場合のみ。

関連する公式ドキュメントをまとめておく。

• Embed Button（コード不要の方法）
• oEmbed API（プログラム利用）
• Instagram Platform概要