Instagramの投稿、リール、フィードをサイトに埋め込む方法。公式の埋め込み、MetaのoEmbedが受け付けるもの、Basic Display APIが終了した理由、ページを速く保つ方法を解説します。
いくつかの投稿だけなら、投稿やリールごとにInstagram公式の埋め込みコードを使い、ページのHTMLブロックに貼り付けます。自動で更新されるグリッドにするには、フィードウィジェットのサービスか、MetaのInstagram APIを使った独自の連携が必要です。従来のBasic Display APIは2024年12月4日に使えなくなりました。
サイトにInstagramを表示する方法
Instagramのリンクを貼り付けると、MetaのoEmbedエンドポイントがその種類のURLを受け付けるか確認でき、開発者が埋め込みコードを取得するためのリクエストも表示されます。チェッカーはブラウザー内でリンクの形を読み取るだけです。Instagramには接続しないため、アカウントが非公開かどうかはわかりません。
いいえ。Metaは、2024年12月4日以降Basic Display APIは利用できなくなり、リクエストは失敗すると発表しました。ビジネス用途には、InstagramログインまたはFacebookログインを使うInstagram APIを案内しています。
MetaのoEmbedエンドポイントは、投稿やリールと並んで、instagram.com/usernameの形式のプロフィールURLを受け付ける形式として挙げています。
埋め込みは、Instagramが提供する埋め込みコードの最後にあるscriptタグに依存しています。スクリプトがブロックされた、ビルダーに削除された、またはスクリプトの読み込み後にHTMLが追加された場合は、スクリプトがページに読み込まれた後でinstgrm.Embeds.process()を呼び出してください。
単一の投稿の埋め込みは公開投稿から作られます。ライブフィードのためのAPI連携は、プロアカウント(ビジネスまたはクリエイター)を前提にしています。
ウィジェットにはアカウントを読み取る権限が必要です。よく知られたサービスを使い、求められるアクセス権を確認し、使わなくなったらInstagramの設定から削除しましょう。
各投稿のInstagram埋め込みコードをscriptタグなしでコンテナ内に貼り付け、訪問者が近くまでスクロールしたらスクリプトを読み込みます。
EMBED_SCRIPTには、Instagramから提供された埋め込みコード内のスクリプトのアドレスを設定します。instgrm.Embeds.process()が、貼り付けたblockquoteを埋め込みに変換します。
Instagramのリンク
投稿(単一画像またはカルーセル)です。oEmbedはこの形式を受け付けます。
リールまたは動画です。oEmbedはこの形式を受け付けます。
プロフィールです。oEmbedはプロフィールのリンクを受け付ける形式に挙げています。
ストーリーズです。ストーリーズは埋め込みに対応していません。
instagram.comのリンクではありません。
Metaが挙げている形式(/p/、/reel/、またはプロフィール名)のいずれでもありません。
開発者が行うoEmbedリクエスト
呼び出しに必要なアプリのアクセス権については、MetaのoEmbedドキュメントで説明されています。
サンプルのリンクは架空のものです。
無料で始める · クレジットカード不要