內嵌 Instagram 貼文

您可以查詢 Instagram oEmbed 端點,用於取得 Instagram 貼文的內嵌 HTML 和基本中繼資料,將貼文顯示在其他的網站或應用程式中。支援相片、影片、連續短片和動態消息貼文。

請瀏覽 Instagram 使用說明,瞭解如何從公開的 Instagram 貼文或個人檔案取得內嵌程式碼。

常見用途

  • 在部落格中內嵌貼文
  • 在網站中內嵌貼文
  • 在內容管理系統中轉譯貼文
  • 在傳訊應用程式中轉譯貼文

必備條件

本指南假設您是已註冊的 Meta 開發人員 ,且已建立 Meta 應用程式。

您需要下列項目:

存取權限層級

存取權杖

基底網址

可以透過 graph.facebook.com 主機存取所有端點。

端點

功能

限制

  • Instagram oEmbed 端點只能用於在網站和應用程式中內嵌 Instagram 內容。不得用於其他用途。嚴禁從端點將中繼資料和粉絲專頁、貼文或影片內容(或其他衍生作品)用於提供粉絲專頁、貼文,或影片前端檢視之外的其他用途。禁止範圍包括使用、操縱、擷取或保留中繼資料和內容,包括但不限於以中繼資料衍生關於粉絲專頁、貼文和影片的資訊,做為分析之用。
  • 不支援使用不公開、停用和有年齡限制的 Instagram 帳號發表貼文。
  • 不支援具備已停用內嵌元素的帳號。
  • 不支援限時動態。
  • 不支援 Shadow DOM。

限速

限速取決於應用程式包含在每個要求中的存取權杖類型。

應用程式權杖限速

應用程式若必須使用應用程式存取權杖,能接受的要求上限是每 24 小時 500 萬個。

用戶端權杖限速

用戶端權杖限速遠低於應用程式權杖限速。限速因應用程式活動而異,因此我們不會公佈實際限速。不過,除非您的應用程式出現類機器人的行為,像是批次處理數千個要求,或者每個代理程式或應用程式用戶會傳送數千個要求,否則您都可以放心使用應用程式,不至於會達到限速。

取得內嵌 HTML

您可以使用程式碼或在 Instagram 應用程式中 取得內嵌 HTML。

若要使用程式碼取得 Intagram 貼文的内嵌 HTML,請傳送要求至:

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

<URL_OF_THE_POST> 改為您所查詢之 Instagram 貼文的網址,再將 <ACCESS_TOKEN> 改為您的應用程式或用戶端存取權杖,或使用 Authorization HTTP 標頭將權杖傳送給我們。

Authorization: Bearer <ACCESS_TOKEN>

如果您使用用戶端存取權杖,必須使用豎線符號將權杖與 Meta 應用程式編號結合,否則要求將會失敗。

如果成功,API 會以 JSON 物件回應,其中將包含貼文的内嵌 HTML 和其他資料。指派內嵌 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 查詢字串參數接受下列網址格式:

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。如果做不到,可以取得貼文的縮圖圖像網址,改為轉譯這個網址。如果這樣做,您仍須在圖像旁清楚註明出處,包括原作者和 Instagram 的出處,以及您所查詢之 Instagram 貼文的連結。

若要取得貼文的縮圖網址和出處資訊,請發送要求至:

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 貼文的網址,再將 <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 > Please provide a URL where we can test Oembed Read 表單欄位中,使用 Instagram oEmbed 端點取得我們官方 Facebook 粉絲專頁Instagram 粉絲專頁上任何公開貼文的內嵌 HTML。然後,將傳回的內嵌 HTML 新增到您將顯示 oEmbed 內容的位置,並在表單欄位中輸入該頁面的網址。

oEmbed 讀取功能通過審查後,您就可以使用粉絲專頁、貼文或影片的專屬網址內嵌這些內容。