iT邦幫忙

2025 iThome 鐵人賽

DAY 12
0
IT 管理

《把瑣事交給 n8n:零基礎自動化工作流實戰》系列 第 12

Day 12: 【n8n x IG - 2】實戰 IG 圖文發布,用 Supabase 解決圖片公開 URL 限制

  • 分享至 

  • xImage
  •  

昨天我們好不容易拿到了 Instagram 的 Access Token,看似已經能大展身手了。但事情沒那麼簡單:要在 IG 發文,並不像臉書一樣直接把圖片直接丟上去就好。
Instagram 有自己的一套規矩,我們得先把圖片變成「可讀取的連結」,並且要先將素材、文案打包成 Container,最後才能正式發布。
今天,我們就要來打造一條 從圖片上架、文案生成,到 IG 發布 的完整工作流!

你將會學到:

  • 如何透過 Supabase 把 Google Drive 圖片下載後上傳並取得 URL
  • 如何建立 Instagram Container

準備好讓你的「行銷小編」升級為能上 IG 舞台的「智慧主廚」了嗎?讓我們開始吧!


一、問題拆解 — 為何 IG 比 FB 多了幾步?

在 Day 10,我們為 Facebook 打造了一條「一鍵搞定」的發文工作流:將圖片下載下來交給 AI 寫文案,直接將檔案以及文案直接丟進 Facebook Post 節點,就能直接上線。但當流程搬到 Instagram 時,事情會變得有一點點不一樣。這不是操作錯誤,而是因為透過 Graph API 操作 IG 發文的規矩更多、更講究。

關卡一:IG 不收「生鮮食材」

對 Facebook 粉專來說,我們可以把圖片的檔案(二進制資料,像是生鮮食材)直接丟進節點,它就能上傳。

Instagram 則不同,不接受直接接收檔案,而是只能透過連結去取得,有點像是先放到一個取餐檯 ( URL),才肯處理。

而且很討厭的一件事情是,他不接受 Google 雲端的網址,不然的話我們其實在透過 Google 雲端搜尋檔案時,他回傳的 JSON 資料包含圖片的連結。

👉 解法:使用 Supabase Storage 把圖片上傳,並取得 URL。

關卡二:「一鍵上菜」vs.「兩段式發布」

Facebook 的發文像速食店,一個節點就可以搞定圖文上架。

但 Instagram 更像米其林餐廳:必須先建立「容器」 (Create Container),拿到出餐單號 (Container ID),再「正式發布 (Publish Container)」才能上桌。

👉 因此,在 n8n 中,需要用兩個節點,分別是產生容器(包含圖片、文案...等資訊)與發布容器。

小結

Instagram 比 Facebook 多了兩道關卡:

  1. 圖片必須先取得圖片的 URL(Supabase 登場)。
  2. 發布必須走兩段式流程(Create → Publish)。

雖然看似麻煩,但這正是理解複雜 API 的最佳練習。接下來,我們就一步步帶你拆解、完成這套流程!


二、前置作業 - 打造「取餐檯」

要讓 Instagram 接受圖片,我們得先準備圖片的 URL。這裡我們會用 Supabase Storage 來完成。

Step 1. 建立專案

  1. 到 Supabase 官網註冊帳號(可用 GitHub 快速登入)。
  2. 新增專案,輸入專案名稱,免費方案理論上有兩個專案的扣打。
  3. 進入專案頁面後,取得專案代碼,在網址中project/這串/.…,等一下會用到
    https://ithelp.ithome.com.tw/upload/images/20250926/20178017UMwmTgDISh.png

Step 2. 建立 Storage Bucket

  1. 在左側選單找到 Storage,建立一個新的 Bucket (New Bucket),名稱建議全英文
    https://ithelp.ithome.com.tw/upload/images/20250926/201780172Y36eEv1gj.png

  2. 記住 bucket 的名稱,等一下會用到
    https://ithelp.ithome.com.tw/upload/images/20250926/20178017KOOgFt92K1.png

Step 3. 新增 Supabase Credential

  1. 左側導航欄最下面 Project Settings → 左側欄位 “API Key”

  2. Legecy API keys 頁籤 → service role → reveal → 取得 API Key
    https://ithelp.ithome.com.tw/upload/images/20250926/201780175jLBNEgBq3.png

  3. 在 n8n 裡新增 Bearer Auth account → 在 Bearer Token 貼上 API Key 。
    https://ithelp.ithome.com.tw/upload/images/20250926/20178017b9pcwoj8R1.png

這邊可以把 Credential 順便命名成 Supabase,方便後續查找

https://ithelp.ithome.com.tw/upload/images/20250926/20178017TJEESKZmDV.png

Bearer Auth account 就是指使用 Bearer Token(持有者憑證)來進行身份驗證的帳號方式,只要在請求中帶上這個 token,就能存取對應資源,不需要傳統帳號密碼。其實 n8n 也有 Supabase API 專屬的 Credentials,但需要多打一組HOST


三、實戰操作 — 打造 Instagram 自動化發文工作流

現在,我們已經理解了 Instagram 這位米其林主廚的規矩,也準備好公開展示櫃 (Supabase Storage)。接下來,就讓我們一步步完成這條 自動化送餐路線,把圖片、文案和流程組合起來,送到 IG 舞台上。以下會是今天完成的工作流:
https://ithelp.ithome.com.tw/upload/images/20250926/20178017BPWjCuRh7D.png


Step 1. 準備食材 — 從 Google Drive 取得圖片

第一步,我們需要取得素材的原始檔以及ID(後續歸檔會用到)。

  • 可參考 Day 10 文章,利用 Google Drive 節點搜尋檔案、下載檔案

Step 2. 上架展示櫃 — 上傳圖片到 Supabase (HTTP Request 節點)

有了圖片,接下來要把它上傳到Supabase 上面。

  • 在 Google Drive Download File 後面新增一個 HTTP Request 節點
    https://ithelp.ithome.com.tw/upload/images/20250926/201780171TmR5HnP48.png

https://ithelp.ithome.com.tw/upload/images/20250926/20178017QLm1rwC2oZ.png

  • Method : POST (官方推薦 POST 或 PUT,我是用 POST)
  • URL : https://<你的project 代碼>.supabase.co/storage/v1/object/<bucket 名稱>/<你要存成的檔案名稱(含附檔名)>

檔案名稱我自己是直接從 Code 節點輸出的name 拉過來 ,如:{{ $('Get 1 item').item.json.name }}

  • Authentication : Predefined Credential Type (就是已經設定過的憑證)
  • Credential Type : Bearer Auth → Bearer Auth 選擇已經加過的 Supabase Bearer Auth
  • 開啟 Send Body
  • Body Content Type : n8n binary file
  • Input Data Field Name : data (看前面Google Drive 下載節點出來的 binary file 最上面橘色標題是甚麼,基本上都是 data )
  • 執行後,你會在輸出結果裡看到一組 Key 和 Id。

Step 3. 取得 URL (HTTP Request 節點)

在上傳到 Supabase 的節點後面,新增一個HTTP Request 節點
https://ithelp.ithome.com.tw/upload/images/20250926/20178017xUdyKyJUpH.png

https://ithelp.ithome.com.tw/upload/images/20250926/20178017brBrO6AL5y.png

  • Method : POST (官方推薦 POST 或 PUT,我是用 POST)
  • URL : https://<你的project 代碼>.supabase.co/storage/v1/object/sign/{{ $json.Key }}

網址後面那段 key 是從前一個上傳節點回傳的直接拉過去,記得要用 Expression 模式(那邊是定位bucket名 / 檔案名稱)

  • Authentication : Predefined Credential Type
  • Credential Type : 選擇已經加過的 Supabase Bearer Auth
  • 開啟 Send Body
  • Body Content Type : JSON
  • Body Parameters (這是在設定 URL 有效時間,可以自行設定)
    • Name : expiresInValue : 3600
  • 執行後,可獲得一個 signedURL 的資料,但這並非完整個連結,而只是連結的後綴,後續在設定網址的時候要稍微調整一下

Step 4. AI 看圖說故事 — 生成文案

一樣參考 Day 10 文章,利用 Google Drive 節點搜尋檔案、下載檔案
生成文案後,記得將取得連結的節點與文案節點 Merge 起來,一樣用” combine ”
https://ithelp.ithome.com.tw/upload/images/20250926/20178017VW5yLHDgEX.png


Step 5. 建立 IG Media Container

Instagram 的 SOP 是「兩段式出菜」,第一步就是 Create Container

首先,在Merge 節點後面,添加一個 Facebook Graph API 節點
https://ithelp.ithome.com.tw/upload/images/20250926/20178017zxJUYJErCO.png

https://ithelp.ithome.com.tw/upload/images/20250926/20178017qrYLktH2MN.png

  • Credential to connect with : 選擇之前建立過的 FB credential
  • Host URL : Default
  • HTTP Request Method : POST
  • Graph API Version : 選最新的
  • Node : 你要發文的 IG 帳號的 ID (可見昨日文章)
  • Edge : media
  • Options
    • Query Parameters (每按 Add parameters 一次可新增一組)
      • (取得圖片網址) Name : image_urlValue : https://<你的專案代號>.supabase.co/storage/v1{{ $json.signedURL }} (v1以後那串是從supabase取得連結的節點輸出的那個拖曳過來的)
      • (素材種類) Name : media_typeValue : IMAGE
      • (貼文文案) Name : captionValue : 文案文字

執行後,你會在 Output 裡看到一個 id —— 這就是 出餐單號 (Container ID)

很奇特的一點,FB、IG 都是利用 Facebook 的 Graph API。你可能在Meta 的 API 測試工具中看到有 Instagram 相關的 API,但是現在要操作 IG 的話,API 都已經併到 FB 的裡面了。
這可能可以多多少少解釋為什麼一定要綁定粉絲專頁才可以。


Step 6. 正式上菜 — Publish Container

最後一步,就是通知 IG 把這份餐點送到舞台上。
https://ithelp.ithome.com.tw/upload/images/20250926/201780178GtoGO6Ioo.png

  • 在Create container 後面新增一個 Facebook Graph API 節點,Method 一樣是 POST。
  • Credential to connect with、Host URL、HTTP Request Method、Graph API Version、Node設定都和前一個 Create container 節點一樣
  • Edge : media_piblish
  • Options
    • Query Parameters (沒有的話,按 Add parameters)
      • Name : creation_idValue : {{ $json.id }} (上一個節點輸出的 id)

執行後,會回傳一組 ID 立刻打開你的 IG,看!剛剛的圖片和文案已經自動發布成功 🎉
https://ithelp.ithome.com.tw/upload/images/20250926/20178017BXZKrrkVZn.png


Step 7. 歸檔

在這邊,有兩個地方需要歸檔,分別是雲端硬碟和 Supabase (免費方案空間不多)

  • 雲端硬碟歸檔 : 可參考 Day 10 文章
    https://ithelp.ithome.com.tw/upload/images/20250926/20178017pDSO6PyalI.png

  • Supabase 歸檔 (刪除) : 因為我們發成功了,就可以把檔案從supabase 移除,以免佔用過多空間

    • 使用 HTTP Request 節點 :
      • Method : DELETE
      • URL : https://<你的專案ID>.supabase.co/storage/v1/object/{{ $('supabase upload').item.json.Key }} ( {{ $('supabase upload').item.json.Key }} 是從上傳節點輸出拉過來的 )
      • Authentication : 一樣選之前那個設定的 Supabase credential
  • 執行後,沒有錯誤表示刪除成功,也可以上 Supabase 上面檢查檔案是否正確刪除。


四、結語與明日預告

今天,我們的智慧廚房又升級了!我們不僅成功透過 Instagram 發文,更重要的是,我們學會了兩個重要的技術:

  • 為廚房打造了「取餐檯」:我們學會了利用 Supabase 產生了媒體素材的 URL,讓 Instagram 可以讀取。
  • 掌握了 IG 發文的 「SOP」:我們熟悉了 IG「先備餐、後上菜」的兩段式發文流程 (Create ContainerPublish Container)。

到目前為止,我們已經成功利用 n8n 在 FB 和 IG 上發文了。有沒有感覺好像少了甚麼? 講到 Meta 的社交平台,怎麼可能不能提到 Threads 呢 ?

明天,將帶你一步步申請 Threads 的 Access Key ,讓我們成功集滿「Meta 三件套」,徹底打通三大平台的自動化高速公路!準備好迎接最終挑戰了嗎?我們明天見!✨


上一篇
Day 11: 【n8n x IG - 1】開拓新流量!Instagram 憑證獲取與 API 前置準備
下一篇
Day13 :【n8n x Threads - 1】開通 Threads 的「專屬通道」!API 憑證設定全攻略
系列文
《把瑣事交給 n8n:零基礎自動化工作流實戰》13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言