Instagram oEmbed 嵌入 IG 貼文

/

本篇要解決的問題

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

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

oEmbed(舊式)

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

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

直接拿到 IG 內嵌程式碼
直接拿到 IG 內嵌程式碼

Instagram oEmbed 嵌入貼文流程

以下是 Augustus 實際使用 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 的 設定
點 oEmbed 的 設定

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

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

應用程式調整中
應用程式調整中

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

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

改為 上線
改為 上線

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

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

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

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

新增 GAS 檔案
新增 GAS 檔案

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

修改檔名
修改檔名

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

appIdsecret 這二個變數記得要修改。

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

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

點擊 部署 > 新增部署作業
點擊 部署 > 新增部署作業

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

選擇 網頁應用程式
選擇 網頁應用程式

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

誰可以存取 改為 所有人
誰可以存取 改為 所有人

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

授予存取權
授予存取權

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

警告視窗
警告視窗

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

前往應用程式
前往應用程式

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

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

要求存取權
要求存取權

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

取得 GAS 部署後的網址
取得 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 沒有寫在新的文件裡,神奇的是卻有寫在舊文件裡,這是 Augustus 看了前一篇的文章後試出來的,所以如果哪天 FB 把這參數拿掉也不用意外。

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

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

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

除了上面三個參數,還有二個參數是官方文件有提供的:maxwidthomitscript

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

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

But!實作時,不確定是不是 Augustus 有寫錯,不論 omitscripttruefalse,如果沒執行 instgrm.Embeds.process() 那貼文就會是呈現白白的樣子,像這樣:

沒執行 instgrm.Embeds.process() 會一片白
沒執行 instgrm.Embeds.process() 會一片白

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

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

console 出來的 response 會長這樣:

取得 IG 貼文回來的 response
取得 IG 貼文回來的 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 貼文嵌入就完成啦~

成功嵌入 IG 貼文
成功嵌入 IG 貼文
Summary
Instagram oEmbed 嵌入 IG 貼文
Article Name
Instagram oEmbed 嵌入 IG 貼文
Description
本篇大綱:本篇要解決的問題。Instagram oEmbed 嵌入貼文流程。建立應用程式,取編號、密鑰。新增產品:oEmbed。新增 GAS 檔案當後端,取得 FB Access Token。取 Token、取 IG 貼文。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Others

Google Optimize A/B Testing 使用筆記

API

GitHub API:取 Issue、Comments

Front-End

如何使用 Vivus.js 製作輕量快速 SVG 動畫

Apps Script Google

Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

Front-End

用原生 JavaScript 做一個簡單的抽獎功能頁面

Front-End

像 Medium 的漸近式圖片加載

Front-End

File API 客製上傳檔案按鈕 / input file

WordPress

Ubuntu 安裝 WordPress – 2:Webmin、Apache、MySQL、Hosts

Analytics Google

如果頁面有 id=”ga”,用 gtag 埋 Google Analytics 會收不到流量

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
3 Comments
最舊
最新
Inline Feedbacks
看所有留言
chris
chris
5 月 之前

嗨 大大 意外正在為怎麼在discuz 苦惱怎麼加入貼文煩惱
然後就看到你的文章 想請問建立完程式並按照您的代碼
該如何使用調用discuz 的編輯器上使其可以砍入貼文

chris
chris
回覆給  Augustus
5 月 之前

沒辦法說 他是要套用discuz 編輯器 加入參數使用
例如 按照你的方法還是不能調用出來 可能我哪邊參數配置錯誤
假設是FB的貼文 他是這樣調用

<script type="text/javascript">
document.body.onload += function(){
if(!document.getElementById("fb-root"))
{
document.writeln("<div id="fb-root"></div>");
}};
</script>
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/zh_HK/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="{貼文網址}" data-width="580"></div>