《網頁設計》用Instagram API做圖片/貼文牆 20210309更新

最近在幫自己另一個鐵的小屋部落格做Instagram圖片牆，花了一些時間才找到IG的API，雖然網路上也有一些現成的可以直接套用，不過都沒有符合自己的構想，這篇就來記錄一下自己的IG圖片牆做法吧！（需要懂一點JavaScript）

2021/03/09更新，目前Instagram官方擋了API請求，不知道哪天會好，也可能都不會好！？

成品展示

原始碼：Codepen

要直接套用的話，只要把JS開頭var instagramID的「lovelutsdoll」改成你的帳號就行了
var instagramID = "lovelutsdoll";
↓
var instagramID = "你的IG帳號";

看JSON必裝Chrome擴充功能

JSONView


如果你沒有裝類似的擴充功能，就只會顯示出一堆文字而已，非常不好判斷階層，還得另外使用其他網站或工具來幫助你，以前我是用jsoneditoronline.org，但還要複製再貼過去實在太慢啦！
現在用JSONView就可以直接在Chrome預覽了！

Instagram API 說明

基本的API是這個（一次最多載入12則貼文）
https://www.instagram.com/帳號/?__a=1

把帳號換成你的IG帳號就可以直接取得你的資料了
我用我的帳號做範例
https://www.instagram.com/lovelutsdoll/?__a=1

名稱看起來都很直觀，我基本用到以下這幾種

• edge_followed_by：被追蹤者
• edge_follow：追蹤中
• id：就是你IG帳號的身份證號碼（抓超過12個貼文時會用到）
• edge_owner_to_timeline_media：貼文資料
• shortcode：貼文專屬代碼（用於連結該貼文）
  通常格式為https://www.instagram.com/p/shortcode/
• thumbnail_resources：縮圖大小與連結

API串接方法

$.ajax({
  url: "https://www.instagram.com/帳號/?__a=1",
  type: 'get',
  dataType: 'json',
  success: function (data) {
    // 你的程式碼
  }
});

Instagram API 取得超過12則貼文的兩種方法

基本款的一次最多只能載入12則貼文，如果要再取得更多的貼文（13則以後的），就得使用另一個抓取方法（只單純抓貼文），才有辦法抓超過12個。

當然如果你把first後面的12改成別的數字也行啦，但目前我測試最多只能抓50個（就算你把first寫成999），還是不能讓你一次抓999。

第一種方法

抓第一頁

https://instagram.com/graphql/query/?query_id=17888483320059182&id=帳號身分證號碼&first=12

抓下一頁

https://instagram.com/graphql/query/?query_id=17888483320059182&id=帳號身分證號碼&first=12&after=下一頁代碼

第二種方法

抓第一頁

https://www.instagram.com/graphql/query/?query_hash=472f257a40c653c64c666ce877d59d2b&variables={"id":"帳號身分證號碼","first":12}

抓下一頁

https://www.instagram.com/graphql/query/?query_hash=472f257a40c653c64c666ce877d59d2b&variables={"id":"帳號身分證號碼","first":12,"after":"下一頁代碼"}

• id：帳號身分證號碼
• end_cursor：下一頁代碼

因此要抓取第二頁，就得這樣輸入網址
https://instagram.com/graphql/query/?query_id=17888483320059182&id= 31823413536&first=12&after=QVFBRTJNTTNIUEN1ei01TlhBTUR4YldDWURCbFNMRGxnRlBZQ3NoNWNndWJXOTJSMkQwZmNEWjFOTWhaZ1dGYU90U0J3LVhqSmdpNWNuaDRLUTJSU250Rw==

或是
https://www.instagram.com/graphql/query/?query_hash=472f257a40c653c64c666ce877d59d2b&variables={"id":"31823413536","first":12,"after":"QVFBRTJNTTNIUEN1ei01TlhBTUR4YldDWURCbFNMRGxnRlBZQ3NoNWNndWJXOTJSMkQwZmNEWjFOTWhaZ1dGYU90U0J3LVhqSmdpNWNuaDRLUTJSU250Rw=="}

這樣你就可以取得第二頁的資料了


要抓第三頁則是看第二頁的end_cursor，但因為我只有15篇因此沒有下一頁（第三頁），所以has_next_page是false，end_cursor則是null。

有了這些就可以用程式來判斷了，如果has_next_page是false就不抓下一頁，如果has_next_page是true則取得下一頁的end_cursor代碼，用來載入更多貼文。

參考資料

Instagram Crawler With API (Ruby 爬蟲)
#110 串接 IG JSON API 製作 IG 的使用者 & tag 頁面
Instagram ?__a=1 url not working anymore & problems with graphql/query to get data
Instagram ?__a=1 not working anymore

我是鐵，希望自己的經驗能夠對想做Instagram圖片牆的朋友有幫助