> ## Documentation Index
> Fetch the complete documentation index at: https://www.ayrshare.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Bubble.io

> 使用 Bubble Ayrshare 外掛或 API Connector 管理使用者的社群媒體帳號

## 概觀

[Bubble.io](https://www.bubble.io) 是熱門的無程式碼平台，讓你完全不需寫一行程式碼就能建立 Web 與行動應用程式。
透過整合 Ayrshare 的社群媒體 API，你可以直接在 Bubble 應用程式中管理使用者的社群媒體帳號。

有兩種方式可以達成：

<ul className="custom-bullets">
  <li>
    **Bubble Ayrshare 外掛**：這個對使用者友善的選項只需最少的設定。不過它的
    功能比 Bubble API Connector 有限。
  </li>

  <li>
    **Bubble API Connector**：想要更大的彈性與控制力，請使用 Bubble API Connector。
    此方式讓你可以直接與 Ayrshare 的 API 互動，在 Bubble.io 應用程式中啟用更多
    功能。
  </li>
</ul>

本指南將帶你逐步了解這兩種整合選項。

## 快速上手：Bubble.io Ayrshare 外掛

[Bubble 是最強大的無程式碼軟體開發平台之一](https://www.ayrshare.com/blog/the-definitive-bubble-review-a-flexible-no-code-app-builder-growing-over-50/)。最簡單的入門方式就是使用 Ayrshare 的 [Bubble.io 外掛](https://bubble.io/plugin/ayrshare-social-media-api-1607956467620x490188301088063500)。更進階的 [Bubble 整合](/packages-guides/bubble#the-bubble-api-connector-plugin) 請見下方。

<div class="video-container">
  <iframe width="520" height="315" src="https://www.youtube.com/embed/x5e2pcKhkPI" title="Bubble Social Plugin" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

首先在 [ayrshare.com](https://www.ayrshare.com) 建立帳戶。然後連結你的社群媒體帳號。

<Card title="連結社群帳號" icon="link" href="/dashboard/connect-social-accounts/overview" horizontal />

當你的帳號連結完成後，你可以前往 API 儀表板複製你的 API key。

<Tip>
  請記得，在 Bubble 應用程式中貼上 API key 時，請在 API key 前加上「Bearer」字樣。

  例如：

  `Bearer bf55cc6f-76ac-46ce-b497-439d766f6c12`
</Tip>

透過 Bubble 外掛市集將 Ayrshare 外掛加入你的 Bubble 應用程式。在外掛的「API Key」欄位輸入你的 API Key。

現在你就可以透過你的 Bubble 應用程式將貼文發送到你的社群媒體帳號了。

下方圖片是在 Bubble 中呼叫該外掛，發布含圖片貼文的工作流程範例。
上方影片有更詳細的說明。請確認你使用下列參數型別：

<ul class="custom-bullets">
  <li>post：格式為 JSON-safe 的文字</li>

  <li>
    platforms：文字清單，每個文字都以引號包住，例如
    `"facebook","instagram"`
  </li>

  <li>media：格式為 JSON-safe 的文字 URL</li>
  <li>date：格式為 JSON-safe 的 date/time</li>
</ul>

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/bubble-ayrshare-example.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=e36f8c8ecd4ca4447b5b36ba77c06dcd" alt="Bubble Ayrshare Plugin Call Example" width="547" height="361" data-path="images/packages-guides/bubble-ayrshare-example.webp" />

Ayrshare 外掛可讓你發布與刪除貼文。若要解鎖 Ayrshare 的完整功能，建議使用 Bubble API Connector 外掛，並將其設定為你的應用程式所需的端點。

## Bubble API Connector 外掛

或者，你也可以使用 Bubble API Connector 外掛，存取 Ayrshare API 的完整功能。以下影片可讓你開始使用 Bubble API Connector 搭配 Ayrshare，並示範如何在單一貼文中發布多張圖片。

<Info>
  Bubble 的 API Connector 有時較為棘手，缺少一個結尾引號或空格都可能
  導致連線失敗。我們建議仔細觀看下方影片，若有問題請重新檢查。
</Info>

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/5xXvIDViUzY" title="Create a Post from Bubble" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

下方是另一段教學影片，示範如何在 Bubble 中取得社群個人檔案分析。

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/OunO2IS-A7Y" title="Get Analytics in Bubble" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

## 發布到多個社群媒體帳號

以下是一篇提供概觀的文章：

<Card title="從 Bubble 發布到多個帳號" icon="link" href="https://www.ayrshare.com/post-to-multiple-social-media-accounts-from-bubble/" horizontal />

## 驗證 Bubble 發文資料

從 Bubble 透過 API Connector 發文時，可能很難判斷是否送出了有效的 JSON。如果送到 Ayrshare 的 JSON 無效，回應通常會是 HTML。

Ayrshare 提供 /validateJSON URL，你可以發到此 URL 而不是一般的 /post 端點。它會回傳「Valid」或「Not Valid」。請務必將 Content-Type 設為 `text/plain`，而不是一般的 `application/json`。

點選「Response Returns as Bad Request」的 Troubleshooting 連結查看詳情。

<Card title="疑難排解" icon="link" href="/help-center/technical-support/response_returns_as_bad_request" horizontal />

## 在 Bubble 上傳媒體檔案

使用 Bubble 的 File Uploader 上傳你的媒體檔案。這些檔案會儲存在 Amazon S3 上。你會收到一個 URL，可用於 `/post` 端點的 `mediaUrls` 主體參數。

## 在 Bubble 中產生 JWT Token

要在 Bubble 中產生 JWT Token，你必須先將要傳送到 [/profiles/generateJWT](/apis/profiles/generate-jwt) 端點的 private.key 進行 stringify。

**步驟 1：** 前往 [https://onlinetexttools.com/json-stringify-text](https://onlinetexttools.com/json-stringify-text)，將你的 private.key 貼到左側輸入文字區。然後將右側 stringify 後的文字複製到剪貼簿。

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/jwt-token.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=01928d50ee7f94b05c7ce241f34ca904" alt="Verify your JWT Token" width="800" height="359" data-path="images/packages-guides/jwt-token.webp" />

**步驟 2：** 在你的 Bubble 應用程式中，使用 API Connector 建立新的呼叫，如下所示。Body 區域 `privateKey` 欄位中的文字就是步驟 1 建立的 stringify 文字。

同時如下所示加入你提供的 `domain` 與 `profileKey`。

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/Enter%20the%20JWT%20Token%20in%20Bubble.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=73120fa7aa6b671ebabe1ec0dcd15ad4" alt="Enter the JWT Token in Bubble" width="800" height="738" data-path="images/packages-guides/Enter the JWT Token in Bubble.webp" />

**步驟 3：** 點選 **Initialize call** 按鈕並儲存回應。回應中的 `url` 欄位就是使用者點選以存取社群媒體帳號連結頁面的 URL。

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/Verify%20API%20connector%20return%20in%20Bubble.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=c32681f3e73024eb8c4f561595f222f6" alt="Verify API connector return in Bubble" width="800" height="572" data-path="images/packages-guides/Verify API connector return in Bubble.webp" />

## 讓使用者連結他們的社群帳號

如果你使用 Launch 方案、Business 方案或 Enterprise 方案，此影片示範如何設定 Bubble，讓你的所有使用者都能連結他們的社群帳號。

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/C2QWLMkBbKg" title="Social Media Account Linking" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

## 在 Bubble 中使用 AI 改寫文字並發布到社群

如何使用 Ayrshare 與 Bubble.io 建立文字改寫與社群發文應用程式。此應用程式接收一段文字，以 5 種不同方式改寫，並發布到你的社群帳號。

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Szrt6hUEzkw" title="Rewrite your Text" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

## Bubble API Connector

我們建議使用 [Bubble API Connector](https://manual.bubble.io/account-and-marketplace/building-plugins/adding-api-connections) 來進行 Ayrshare API 呼叫。

請注意 Bubble 會在 150 秒後將所有 API 呼叫逾時，然後再重試一次。大型影片可能需要超過 150 秒，這會讓 Bubble 自動再嘗試發文一次，導致重複發文錯誤。對於較大的影片，我們建議使用 [排程發文](/help-center/technical-support/response_bad_gateway_502_or_504_error)。

## 實用的 Bubble 部落格文章

* [以無程式碼建立社群媒體發文行動應用程式](https://www.ayrshare.com/blog/build-a-social-media-posting-mobile-app-with-no-code/)。
* [如何以無程式碼建立社群媒體排程應用程式。](https://www.ayrshare.com/blog/how-to-create-a-social-media-scheduling-app-with-no-code/)