Instagram 基本顯示 API :抓取公開 IG 資料、相片、影片

/

本篇要解決的問題

前陣子朋友創了一個商業檔案性質的 Instagram,看朋友經營的很認真,每篇 PO 文寫的字數之多,感覺都可以建成一個小網頁了。嗯?把 IG 的貼文截取出來變成一個網頁?這個想法似乎不錯,這樣就只要朋友專心經營 IG,工程師就寫一個抓 IG 的內容成為網頁的程式,讓程式自動執行就可以產生頁面啦!

目前 Augustus 也還在研究階段,本篇是參考官方的「Instagram 基本顯示 API」後,實際用 Postman 測過確認 OK 後的整理筆記文,比較像是使用過 API 後用另一種角度來看的說明文件,一些小地方如果覺得疑惑的大大可以點上面附的連結直接看官方說明。

另外,本篇會很簡單的寫,因為跟著文件走,我們會用到的是測試員的身份,還不是正式公開用的應用程式,未來有更深入的研究會再補充這篇或另啟一篇筆記文。

補充一點,本篇是針對 Basic Display API 寫的,文件上有說明:

「應用程式類型 – 不支援指定為商家應用程式的應用程式。如果您的應用程式為商家應用程式,請改用 Instagram 圖形 API 或新建非商家應用程式。」


準備事項

要使用 Basic Display API(基本顯示 API,以下簡稱 IG API),必須要先有以下東西:

  1. FB 開發人員帳號:要建立應用程式用的。
  2. 一個公開的 IG 帳號:為了可以抓到資料,請先發幾張照片。
  3. 一個可以對外的網頁:因為必須要讓 IG 知道是哪個網址要從 API 取得資料,這樣可以防止我們建出來的應用程式被別人拿來亂用。最快的方式是直接建立一個 GitHub Pages
  4. Postman:因為 IG API 會取得 token,再拿 token 去取資料,因此無法靠前端的方式直接用 JS 取,必須要是後端,這邊推薦用 Postman,以下各段的範例也會是用 Postman 來打 API。

建立 FB 應用程式

進到 FB 開發人員「我的應用程式」,點擊「建立應用程式」:

點擊建立應用程式
點擊建立應用程式

應用程式類型選擇「消費者」或「無」都可以:

應用程式類型選擇「消費者」或「無」
應用程式類型選擇「消費者」或「無」

選好後下一步就是填應用程式的名稱跟選擇是不是要連結到企業管理平台,填完後按下建立應用程式。

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

設定平台網址

建立完後會進到應用程式的首頁,先點擊左側選單中的「設定 > 基本資料」:

點擊基本資料
點擊基本資料

基本資料的頁面中,如果你的應用程式要上線,就必須要填寫「應用程式網域」、「隱私政策網址」、「用戶資料刪除」、「類別」。

如果只是想像本篇做測試用,我們就直接把頁面拉到最底部,點擊底部的「新增平台」:

點擊新增平台
點擊新增平台

平台的部份選擇「網站」,會出現要輸入網址的地方:

輸入網站網址
輸入網站網址

這邊要填的網址,就是上面準備事項中提到的一個可以對外的網頁,之後我們要同意 API 取得我們 IG 的資料時,同意完後會轉回到這個網址上並代入 code,會再拿這個 code 去取得 token

填寫完後按下儲存變更,這一步就完成了。

產品新增 Instagram 基本顯示

左側選單點「產品」:

點擊產品
點擊產品

接著右側的頁面往下拉,會看到一堆可以設定的產品,找到「Instagram 基本顯示」的卡片,點擊設定:

產品清單中找到 Instagram
產品清單中找到 Instagram

接著頁面往下捲動,點擊「建立新的應用程式」:

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

點擊 建立新的應用程式
點擊 建立新的應用程式

點擊後會出現一個表單,裡面有些東西要存下來,有些欄位要填。

Instagram 應用程式編號、Instagram 應用程式密鑰

這二個之後在打 API 時會用到,要存下來。

有效的 OAuth 重新導向 URI

這個是當使用者允許 API 取得資料後,要轉到哪一個頁面上,因為之前我們已經在平台網址上設定了網址,可以填一樣的網址就行。

取消授權回呼網址、資料刪除要求

本篇是跟著文件進行測試性質的取資料,因此可以跟上面 URI 一樣填相同的網址。

按下儲存變更後,還有一件事要做,因為是測試性質的,還會需要建立一個測試人員的帳號。

新增 IG 測試人員

同上一步的表單,其中有一項是 User Token Generator:

點擊 Add or Remove Instagram Testers
點擊 Add or Remove Instagram Testers

點擊「Add or Remove Instagram Testers」,會進到設定角色的頁面,頁面往下拉,會看到一項「Instagram 測試人員」:

點擊 新增 Instagram 測試人員
點擊 新增 Instagram 測試人員

點擊「新增 Instagram 測試人員」,會要輸入一個 IG 的帳號用戶名,這邊輸入要取資料的 IG 帳戶的名稱,比方 Augustus 要取 Letswrite 的 IG 資料,那這邊就是輸入 Letswrite 的帳戶名稱。

注意,這邊填的帳戶名要是你本身有管理權限的才可以。

在填寫帳戶名稱時,如果名稱對了,就會出現帳戶可以選擇:

選擇帳戶
選擇帳戶

選好後按下「提交」,就會看見這個帳戶是「待確認」:

測試帳戶待確認
測試帳戶待確認

上面之所以說填寫的帳戶是你必需要有權限的,就是為了我們要能確認這個測試人員邀請。

用電腦開啟 Instagram 的網頁版:www.instagram.com

登入我們剛剛填寫的帳號後,按下右上角帳號頭像,再點「設定」:

點頭像,點設定
點頭像,點設定

接著左側選單點「應用程式和網站」,右側的頁籤點擊「測試員邀請」,就會看見我們剛剛發出的應用程式邀請:

接用測試員邀請
接用測試員邀請

按下接受後,就可以開始使用 IG API 了。


取得授權碼

在使用 API 前,我們要先取得一個授權碼(code),這個授權碼的存活時間是一個小時,之後會拿授權碼去取得 token

取得授權碼很簡單,打開瀏覽器後輸入以下網址:

https://api.instagram.com/oauth/authorize
  ?client_id={app-id}
  &redirect_uri={redirect-uri}
  &scope=user_profile,user_media
  &response_type=code

上面的網址中包有 { } 就是要替換的部份。

app-id:我們剛在建立測試人員的頁面上,有看到一段說要存起來的,其中的 「Instagram 應用程式編號」就是 app-id,如果沒存到的話就從左側選單點擊「Instagram 基本顯示 > 基本顯示」,就可以看到了。

redirect-uri:這個是指允許授權後要回到哪個頁面上,我們在上一步也有填了一個「有效的 OAuth 重新導向 URI」,redirect-uri 就是要填這邊填寫的網址,必須要一模一樣。

這邊假設 IG 應用程式編號是「123456789」,redirect-uri 是 https://www.example.com.tw,那整個網址替換掉後會是:

https://api.instagram.com/oauth/authorize
  ?client_id=123456789
  &redirect_uri=https://www.example.com.tw
  &scope=user_profile,user_media
  &response_type=code

把這串網址用瀏覽器打開後,成功的話會轉到一個是否允許授權的頁面上:

確認是否允許授權
確認是否允許授權

如果失敗,那就要檢查網址是否填對,跟上面新增測試人員帳號的部份有沒有漏做的。

按下「Allow」後,整個網址會回到我們之前填 redirect-uri 的網址上,並且網址上還附有 code 這個參數,像這樣:

https://www.example.com.tw/?code=ABCDEFG......#_

code= 後面接的就是授權碼,要注意,授權碼最後的 #_ 並不是授權碼的一部份,我們在取碼時要刪掉。

我們這邊假設取到的授權碼是 ABCDEFG,接下來就可以開始用 API 囉。


使用 Instagram Basic Display API

以下用 API 的方式會直接在 Postman 上使用,因為 token 這些具有權限的東西不應該放在前端讓全世界都看得到。

授權碼轉為 token

method: POST
URL: https://api.instagram.com/oauth/access_token

POST 時要帶入參數:

  • client_id=Instagram 應用程式編號
  • client_secret=Instagram 應用程式密鑰
  • grant_type=authorization_code
  • redirect_uri=應用程式設定中的 redirect-uri
  • code=上一步取得的授權碼

Postman 設定完後會像這樣:

授權碼轉為 token API
授權碼轉為 token API

按下「Send」就會從 API 取回以下資料:

{
  "access_token": "有效期為一個小時的 token",
  "user_id": user id
}

access_token 就是呼其他 API 時需要的 tokon

user_id 是取帳號公開資料時要附上的「使用者 ID」。


access_token 轉為 60 天

上面把授權碼轉為 token 的部份,取回的 token 效期預設只有一個小時,一個小時後就會自動過期。

如果想要延長 token 的時效,有 API 可以用這只能活一個小時的 token,去換一個效期是 60 天的新 token

method: GET
URL: https://graph.instagram.com/access_token?grant_type=ig_exchange_token&client_secret={Instagram 應用程式密鑰}&access_token={從授權碼換來的 access_token}

Postman 上看會像這樣:

取得長期 token
取得長期 token

取回來的資料會是這樣:

{
  "access_token": "效期為 60 天的新 token",
  "token_type": "bearer",
  "expires_in": 5183944  // 還有幾分鐘過期
}

更新 token

當 60 天的 token 快過期時,可以用 API 來重新取得一組 token,效期一樣是 60 天。

method: GET
URL: https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token={原本的舊 token}

Postman 上看是這樣:

更新 token
更新 token

取回來的資料跟取得長期 token 相同:

{
  "access_token":"新的長期 token",
  "token_type": "bearer",
  "expires_in": 5183944 // 還有幾分鐘過期
}

取得帳號資訊

method: GET
URL: https://graph.instagram.com/{user_id}?fields={fields}&access_token={token}

user_id 就是我們在取 token 時一併取到的 user_id

fields 一共有 4 個項目可填,用半型逗號分開:

  • account_type:帳號類型
  • id:user_id
  • media_count:總共有多少貼文
  • username:帳號名稱

Postman:

取得帳號資訊
取得帳號資訊

回來的資料會照 fileds 提供的做排序,如下:

{
  "id": "123456789",
  "username": "letswrite",
  "account_type": BUSINESS、MEDIA_CREATOR 或 PERSONAL,
  "media_count": 100
}

取得帳號下的所有貼文資料

method: GET
URL: https://graph.instagram.com/me/media?fields={fields}&access_token={token}

fields 有以下可填,用半型逗號分開:

  • caption:貼文的文字。無法傳回相簿內的。
  • id:貼文編號。
  • media_type:媒體類型,可為 IMAGE、VIDEO 或 CAROUSEL_ALBUM。
  • media_url:貼文網址。
  • permalink:貼文的永久網址。如果媒體包含著作權保護的影音素材,或者已標示為違反著作權,系統將忽略該欄位。
  • thumbnail_url:貼文的縮圖圖像網址。僅適用於影片。
  • timestamp:貼文的發佈日期(ISO 8601 格式)。
  • username:貼文擁有者的帳號名稱。

Postman:

取得帳號下的所有貼文資料
取得帳號下的所有貼文資料

回傳的資料範例如下:

{
  {
    "data": [{
      "id": "17895695668004550",
      "caption": ""
    }, {
      "id": "17899305451014820",
      "caption": ""
    }, {
      "id": "17896450804038745",
      "caption": ""
    }, {
      "id": "17881042411086627",
      "caption": ""
    }],
    "paging": {
      "cursors": {
        "after": "MTAxN...",
        "before": "NDMyN..."
      }
    }
  }
}

data 裡面的 id,是每則貼文各自的 ID。如果貼文類型是相簿,那 ID 就是相簿的 ID,如果是圖片或影片,那就是單篇貼文的 ID。可以再各自用以下 API 取得資料。


取得單篇貼文資料

method: GET
URL: https://graph.instagram.com/{單篇貼文的 ID}?fields={fields}&access_token={token}

以上參數的說明就跟上面的「取得帳號下的所有貼文資料」相同,就不再重寫。


取得相簿內所有媒體資料

method: GET
URL: https://graph.instagram.com/{相簿 ID}/children?access_token=token

取回來的資料範例如下:

{
  "data": [{
    "id": "17853340427285923"
  }, {
    "id": "17872404967942648"
  }, {
    "id": "17887279633734981"
  }]
}

回來的 ID 就是相簿內各張照片或影片的 ID,再用上面的「取得單篇貼文資料」API 就可以再取回各自的詳細資料。


筆記後心得

Instagram Basic Display API 的筆記文就整理到這邊。

可以看見 Basic Display API 主要是帳號擁有者取得自己 IG 的資料,無法取得別人的,而且 API 有限制每小時的次數,因此如果要由 API 去建立頁面,就是由後端寫一段固定一個時間打 API 後,把取回來的資料寫進資料庫後再做處理。

如果想要取得其他 IG 帳號的資訊,就要用 Instagram 圖形 API 了。

Summary
Instagram 基本顯示 API :抓取公開 IG 資料、相片、影片
Article Name
Instagram 基本顯示 API :抓取公開 IG 資料、相片、影片
Description
本篇大綱:本篇要解決的問題。準備事項。建立 FB 應用程式。取得授權碼。使用 Instagram Basic Display API。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

Day.js 計算最近7天、上週、上個月的日期

Front-End

postMessage:主頁、iframe 頁可互相傳值

WordPress

WordPress 基本介紹

Bot Telegram

在網頁上嵌入Telegram 頻道廣播訊息

Front-End

用純 CSS 寫的網頁預覽效果

Vue

用 Vue CLI 3 + Vuetify 製作說明頁面

Firebase Google

Firebase Dynamic Links 從後台建立縮網址

Front-End

IntersectionObserver:上篇 – 基本介紹及使用

Vue

用 VuePress 製作說明文件頁面 – 3:導覽列

API

用 Performance API 檢測檔案讀取時間

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

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

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

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

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

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

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

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

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言