Instagramの投稿を埋め込む

Instagram oEmbedエンドポイントにクエリを行い、Instagram投稿の埋め込みHTMLと基本メタデータを取得して、ほかのウェブサイトやアプリで投稿を表示します。写真、動画、リール、フィード投稿をサポートしています。

公開されているInstagramの投稿やプロフィールから埋め込みコードを取得する方法については、Instagramヘルプセンターをご覧ください。

一般的な用途

ブログに投稿を埋め込む
ウェブサイトに投稿を埋め込む
コンテンツ管理システムに投稿をレンダリングする
メッセージアプリに投稿をレンダリングする

要件

このガイドは、Meta開発者として登録済みであり、Metaアプリをすでに作成している開発者を対象としています。

以下が必要です。

アクセスレベル

oEmbed読み取り機能への
アドバンスアクセス
–
Metaアプリレビュー
が必須

アクセストークン

アプリアクセストークン(アプリがバックエンドサーバーからoEmbedエンドポイントにアクセスする場合)
クライアントアクセストークン(アプリがモバイルデバイスやウェブブラウザーなどのユーザーエージェントからoEmbedエンドポイントにアクセスする場合)

ベースURL

すべてのエンドポイントは、graph.facebook.comホストを通じてアクセス可能です。

エンドポイント

GET /instagram_oembed

機能

oEmbed読み取り機能

制限

Instagram oEmbedエンドポイントは、Instagramコンテンツをウェブサイトやアプリに埋め込むために使用することだけを意図しています。他のいかなる目的にも使用しないでください。エンドポイントのメタデータとページ、投稿、動画コンテンツ(またはその派生物)を、ページ、投稿、動画のフロントエンドビューを提供する以外の目的で使用することは固く禁じられています。この禁止規定は、メタデータとコンテンツの使用、操作、抽出、または保持を対象にしています。分析目的でメタデータからのページ、投稿、動画に関する情報の派生が含まれますが、これらに限定されるものではありません。
非公開、アクティブでない、または年齢制限されているInstagramアカウントでの投稿はサポートされていません。
埋め込みが無効になっているアカウントはサポートされていません。
ストーリーズはサポートされていません。
Shadow DOMはサポートされていません。

レート制限

レート制限は、各リクエストにアプリが含めるアクセストークンの種類によって異なります。

アプリトークンレート制限

アプリアクセストークンを使用するアプリでは、24時間あたり500万リクエストまで行えます。

クライアントトークンレート制限

クライアントトークンレート制限は、アプリトークンレート制限に比べて大幅に低くなります。制限はアプリのアクティビティに応じて変化するため、具体的な制限は提示しません。しかし、アプリがボットのような挙動(何千というリクエストを一括で行う、または単一のエージェントかアプリユーザーが何千ものリクエストを送信する)を行わない限り、制限に達することはないと考えてよいでしょう。

埋め込みHTMLを取得する

埋め込みHTMLは、プログラムを使って取得することも、Instagramアプリで取得することもできます。

プログラムを使ってInstagram投稿の埋め込みHTMLを取得するには、次のようにリクエストを送信します。

GET /instagram_oembed?url=<URL_OF_THE_POST>&access_token=<ACCESS_TOKEN>

<URL_OF_THE_POST>をクエリ対象となるInstagram投稿のURLに置き換え、<ACCESS_TOKEN>をアプリアクセストークンまたはクライアントアクセストークンに置き換えるか、AuthorizationHTTPヘッダー経由でMetaに渡します。

Authorization: Bearer <ACCESS_TOKEN>

クライアントアクセストークンを使用する場合は、必ずパイプ記号を使ってMetaアプリIDと組み合わせてください。そうしないと、リクエストは失敗します。

成功すると、APIは、投稿の埋め込みHTMLおよびその他のデータを含むJSONオブジェクトを返します。埋め込みHTMLは、htmlプロパティに割り当てられます。

リクエストに追加するクエリ文字列パラメーターのリストについては、Instagram oEmbedリファレンスを参照してください。fieldsクエリ文字列パラメーターを含めることにより、返されるフィールドを指定することもできます。このパラメーターを省略した場合、応答にはすべてのデフォルトのフィールドが含まれます。

リクエストの例

curl -X GET \
  "https://graph.facebook.com/v21.0/instagram_oembed?url=https://www.instagram.com/p/fA9uwTtkSN/&access_token=IGQVJ..."

curl -i -X GET \
     --header "Authorization: Bearer 96481..." \
     "https://graph.facebook.com/v21.0/instagram_oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FfA9uwTtkSN"

応答の例

読みやすくするため、一部の値は省略記号(...)を使用して省略されています。

{
  "version": "1.0",
  "author_name": "diegoquinteiro",
  "provider_name": "Instagram",
  "provider_url": "https://www.instagram.com/",
  "type": "rich",
  "width": 658,
  "html": "<blockquote class=\"instagram-media\" data-instgrm-ca...",
  "thumbnail_width": 640,
  "thumbnail_height": 640
}

URLフォーマット

urlクエリ文字列パラメーターは、次のURLフォーマットを受け入れます:

https://www.instagram.com/p/{media-shortcode}/
https://www.instagram.com/tv/{media-shortcode}/https://www.instagram.com/{username}/guide/{slug}/{guide_id}

埋め込みJS

埋め込みHTMLには、Instagram embed.js JavaScriptライブラリへの参照が含まれます。このライブラリが読み込まれると、ページをスキャンして投稿HTMLを探し、完全にレンダリングされた投稿を生成します。ライブラリを別個に読み込む場合は、omitscript=trueクエリ文字列パラメーターをリクエストに含めます。埋め込みHTMLを手動で初期化するには、ライブラリの読み込み後にinstgrm.Embeds.process()関数を呼び出します。

投稿サイズ

埋め込み投稿は、コンテナのサイズに合わせて調整されます。つまり、コンテナの高さは、コンテナの幅とキャプションの長さに応じて異なります。リクエストにmaxwidthクエリ文字列パラメーターを含めることによって、最大幅を設定することができます。

サムネイルを取得する

可能であればすべての投稿の埋め込みHTMLをレンダリングすることをおすすめします。これを行えない場合は、投稿のサムネイル画像URLを取得して、そのURLを代わりにレンダリングすることができます。ただしその場合は、画像の横にオリジナルの著者およびInstagramへのアトリビューションと、クエリの対象であるInstagram投稿へのリンクを含む、明確なアトリビューションを提供する必要があります。

投稿のサムネイルURLとアトリビューション情報を取得するには、次のリクエストを送信します。

GET /instagram_oembed
  ?url=<URL_OF_THE_POST>
  &maxwidth=<MAX_WIDTH>
  &fields=thumbnail_url,author_name,provider_name,provider_url
  &access_token=<ACCESS_TOKEN>

<URL_OF_THE_POST>はクエリ対象となるInstagram投稿のURLに置き換え、<MAX_WIDTH>はレンダリングするサムネイルの最大サイズに置き換え、<ACCESS_TOKEN>はアプリアクセストークンまたはクライアントアクセストークンに置き換えます。

リクエストの例

curl -i -X GET \
  "https://graph.facebook.com/v21.0/instagram_oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FfA9uwTtkSN&maxwidth=320&fields=thumbnail_url%2Cauthor_name%2Cprovider_name%2Cprovider_url&access_token=96481..."

応答の例

読みやすくするため、一部の値は省略記号(...)を使用して省略されています。

{
  "thumbnail_url": "https://scontent.cdninstagram.com/v/t51.288...",
  "author_name": "diegoquinteiro",
  "provider_name": "Instagram",
  "provider_url": "https://www.instagram.com/"
}

アプリレビュー申請

アプリのレビュー申請時に、フォームの[Tell Us Why You're Requesting Oembed Read (oEmbed読み取りをリクエストする理由をお聞かせください)]フォームの[Please provide a URL where we can test Oembed Read (oEmbed読み取りをテストするためのURLを提供してください)]フィールドに入力します。そのためには、まずInstagramのoEmbedエンドポイントを使って、公式のFacebookページまたはInstagramページで公開されている投稿の埋め込みHTMLを取得します。そして、返された埋め込みHTMLをoEmbedコンテンツを表示する場所に追加し、そのページのURLをフォームの当該フィールドに入力します。

oEmbed読み取り機能の承認が完了すると、ページ、投稿、または動画を、それぞれのURLを使用して埋め込むことができます。