2020年9月6日 星期日

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

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

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

成品展示


原始碼: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圖片牆的朋友有幫助

沒有留言:

張貼留言