Instagram oEmbed 嵌入 IG 貼文

本篇要解決的問題

很久以前寫過一篇〈Instagram Embedding 抓iframe高度及3種大小圖片〉，也有一個 August 另外經營的站就用裡面的方式來嵌入 IG 貼文。但那個站荒廢有點久了，前幾天回頭看了一下，發現怎麼嵌入的 IG 貼文沒出來？才震驚原來當時的方法已經被廢除了，現在有新的方法：

本頁面提及的端點已於 2020 年 10 月 24 日停用，目前會傳回 400 錯誤代碼。請改用新的 Instagram oEmbed 端點。

oEmbed（舊式）

這篇是改用新方法的筆記文，會需要寫程式。

如果不想寫程式，單純想直接用 IG 原有的嵌入功能，可以直接用桌機打開 IG，點貼文右上的點點點，再點擊「內嵌」即可產生程式碼，像這樣：

Instagram oEmbed 嵌入貼文流程

以下是 August 實際使用 Instagram oEmbed 的步驟：

1. 到 Facebook for Developers 上建立一個應用程式，取得編號、密鑰
2. 應用程式上新增產品：oEmbed，並把應用程式調整成「上線」
3. 在 Google 雲端硬碟上新增 Google Apps Script 的檔案，檔案中寫取得 Access Token 的程式碼
4. 用 JavaScript 取 Access Token，並用 Access Token 取得 Instagram 貼文的嵌入程式碼

本篇參考的說明文件是 Facebook 的官方文件：

應用程式存取權杖

Instagram oEmbed

要注意的是，我們能在頁面上嵌入的 IG 貼文必須要是公開的，私人的無法被嵌入。

本篇每個步驟的程式碼都會附上，但不會像平常一樣出一個 Demo 頁，因為總會有人亂玩 XD~

裡面用到的 Facebook 應用程式也會在上線時刪除，因此不論是編號或密鑰都不會存在。

建立應用程式，取編號、密鑰

這一步大部份的流程都寫在這邊了「Facebook：應用程式、ID、密鑰、URL」，這邊不再重複寫。

唯一不同的是，在建立應用程式時，這邊選擇的是「更多選項 > 其它」：

這一步完成後，在「設定 > 基本資料」裡我們就會取得應用程式的編號、密鑰，像這樣：

新增產品：oEmbed

應用程式建立完成後，左側選單點擊「產品」旁邊的「+」：

然後找到「oEmbed」這項，點擊「設定」：

會跳一個確認框，打勾後按下「確認」，左側的產品清單就會新增 oEmbed，代表新增成功。

最後頂部那條有一個顯示為「調整中」的 Toggle 按鈕：

我們點一下按鈕，並確認要切換模式，讓它變成「上線」，這個應用程式就可以對外使用了：

新增 GAS 檔案當後端，取得 FB Access Token

為了要能夠使用 FB 的應用程式，必須要有一個 Access Token 才能夠被 FB 放行，因為取 Token 的過程會用到密鑰，因此要寫在後端，寫在前端會被看光光。

最快寫一支後端的方式就是用 Google 雲端硬碟裡的 Google Apps Script 檔案，以下簡稱 GAS。

進到 Google 雲端硬碟，點左上角的「新增 > 更多 > Google Apps Script」：

進到檔案後，我們先改個檔名進行存檔，滑到左上角的檔案名稱上，點擊一次就可以開始改檔名：

右側預設會有一個 myFunction，整個刪掉後，貼上以下程式碼，主要是來取得 Access Token 的：

appId、secret 這二個變數記得要修改。

doGet 指的是當這個 GAS 預到 GET 時要執行哪些動作，function 裡面寫的是向 FB 取得 Access Token。

程式碼貼上並更新好變數後，按下右上角的「部署 > 新增部署作業」：

點擊「選取類型」右邊的齒輪 icon，選擇「網頁應用程式」：

接著右側「誰可以存取」的地方改為所有人：

按下「部署」後，第一次部署會需要開存取權：

點擊上圖的「授予存取權」後，會出現一個警告視窗：

因為這個應用程式是我們自己寫的，是可以相信的，點擊上圖左上角的「進階」後，會展開一小行字：

點擊上圖左下角的「前往 XXX（不安全）」，因為我們的應用程式沒向 Google 請求驗證過，這邊就會一直秀出不安全的字樣。

點擊了以後會要授予存取權：

按下「允許」，這個 GAS 檔就成功部署，並且會給一串網址：

這個網址很重要，就像 API 一樣，GET 這個網址，就會回傳一組 Access Token 回來。

取 Token、取 IG 貼文

在上一步的最後我們取得了部署的網址，首先我們先用 GET 取得 Access Token 回來：

Console 出來的 response 資料會像這樣：

{
  access_token: "405342487221016|50nqwaePxasUkpNVyIwrJpoA2H0",
  token_type: "bearer"
}

所以我們可以知道，response.access_token 就是我們要的 Access Token。

接下來就是拿這個 Access Token 去取得 IG 的貼文內容。

首先我們要先有 IG 貼文的網址，在貼文上面點右上角的點點點，在點擊「複製連結」，就取到貼文的網址了：

有了貼文的網址，也有了 Token，我們可以用一個 GET 來取得貼文的資訊：

從 API 的 URL 上可以看到，需要的參數有：IG 貼文網址、Access Token，跟 hidecaption 是否要隱藏描述。

hidecaption 沒有寫在新的文件裡，神奇的是卻有寫在舊文件裡，這是 August 看了前一篇的文章後試出來的，所以如果哪天 FB 把這參數拿掉也不用意外。

另外，複製出的 IG 貼文網址本身會帶一個參數，像這樣：

https://www.instagram.com/p/CK6wSwfpuVi/?igshid=1wy9n8xgtbe89

實測後，有沒有寫到 igshid 這個參數都沒關係，都抓得到貼文資料回來。

除了上面三個參數，還有二個參數是官方文件有提供的：maxwidth、omitscript。

maxwidth 是可以指定嵌入貼文時的最大寬度。

omitscript 是 Boolean 值，預設為 false，一般來說我們在嵌入 IG 貼文時，IG 會自動把貼文的資料載入，如果我們想要有另外執行載入貼文的需求，這邊就可以寫 true，之後再執行：instgrm.Embeds.process() 就可以把貼文載進頁面中。

But！實作時，不確定是不是 August 有寫錯，不論 omitscript 是 true 或 false，如果沒執行 instgrm.Embeds.process() 那貼文就會是呈現白白的樣子，像這樣：

而且舊的方法吐回來的 html，裡面會自行引用 IG 的 embed.js，新的看起來是跟 FB 整併所以就沒有了，要自行引用：

<script src="https://www.instagram.com/embed.js"></script>

console 出來的 response 會長這樣：

可以看到的值有：

author_name
html
provider_name
provider_url
thumbnail_height
thumbnail_url
thumbnail_width
type
version
width

其中 html 就是我們要嵌入 IG 貼文的程式碼，整段放到我們要放的地方就行，這篇的 Demo 是放在 <div id="ig-iframe"></div> 這個 div 中。

完整嵌入 IG 貼文的程式碼如下：

完成的 IG 貼文嵌入就完成啦~

Summary

Article Name

Instagram oEmbed 嵌入 IG 貼文

Description

本篇大綱：本篇要解決的問題。Instagram oEmbed 嵌入貼文流程。建立應用程式，取編號、密鑰。新增產品：oEmbed。新增 GAS 檔案當後端，取得 FB Access Token。取 Token、取 IG 貼文。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png