> ## Documentation Index
> Fetch the complete documentation index at: https://ayrshare.mintlify.site/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) — популярна no-code платформа, яка дає змогу створювати вебдодатки та мобільні додатки без написання жодного рядка коду.
Інтегрувавши API соціальних мереж Ayrshare, ви можете керувати акаунтами соціальних мереж своїх користувачів безпосередньо у вашому додатку Bubble.

Це можна зробити двома способами:

<ul className="custom-bullets">
  <li>
    **Плагін Bubble Ayrshare**: цей зручний варіант потребує мінімального налаштування. Однак він має
    обмежену функціональність порівняно з Bubble API Connector.
  </li>

  <li>
    **Bubble API Connector**: для більшої гнучкості та контролю використовуйте Bubble API Connector.
    Цей підхід дозволяє безпосередньо взаємодіяти з API Ayrshare, забезпечуючи ширший спектр
    можливостей у вашому додатку Bubble.io.
  </li>
</ul>

Цей посібник проведе вас через обидва варіанти інтеграції.

## Швидкий старт: плагін Bubble.io Ayrshare

[Bubble — одна з найпотужніших no-code платформ для розробки програмного забезпечення](https://www.ayrshare.com/blog/the-definitive-bubble-review-a-flexible-no-code-app-builder-growing-over-50/). Найпростіший спосіб почати — скористатися [плагіном Bubble.io від Ayrshare](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 Dashboard і скопіювати свій API Key.

<Tip>
  Пам’ятайте: коли ви вставляєте свій API Key у ваш додаток Bubble, потрібно додати слово «Bearer» перед вашим API Key.

  Наприклад:

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

Додайте плагін Ayrshare через маркетплейс плагінів Bubble до вашого додатка Bubble. У полі плагіна "API Key" введіть свій API Key.

Тепер ви можете надсилати публікації через ваш додаток Bubble на ваші акаунти соціальних мереж.

Зображення нижче — це приклад виклику workflow у Bubble до плагіна для публікації з зображенням.
Відео вище пояснює це детальніше. Переконайтеся, що ви використовуєте такі типи параметрів:

<ul class="custom-bullets">
  <li>post: текст, відформатований як JSON-safe</li>

  <li>
    platforms: список текстових значень, де кожне значення взяте у лапки, наприклад
    `"facebook","instagram"`
  </li>

  <li>media: текстова URL-адреса, відформатована як JSON-safe</li>
  <li>date: дата/час, відформатовані як JSON-safe</li>
</ul>

<img class="center" src="https://mintcdn.com/ayrshare/l0q1BFFPDsManw_r/images/packages-guides/bubble-ayrshare-example.webp?fit=max&auto=format&n=l0q1BFFPDsManw_r&q=85&s=07eb52a7a08f3111c40cfb375dbff4c6" 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, щоб отримати доступ до всіх можливостей API Ayrshare. Ось відео, яке допоможе вам почати роботу з Bubble API Connector разом з Ayrshare і покаже, як публікувати кілька зображень в одній публікації.

<Info>
  API Connector від Bubble може бути дещо примхливим — відсутність однієї закриваючої лапки чи пробілу
  може призвести до збою підключення. Ми рекомендуємо уважно переглянути відео нижче та повторно
  переглянути їх, якщо щось не працює.
</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 має URL /validateJSON, до якого можна надсилати запити замість звичного ендпоінта /post. Він поверне «Valid» або «Not Valid». Обов’язково встановіть Content-Type як `text/plain` замість звичного `application/json`.

Натисніть посилання Troubleshooting для «Response Returns as Bad Request», щоб побачити деталі.

<Card title="Troubleshooting" icon="link" href="/help-center/technical-support/response_returns_as_bad_request" horizontal />

## Завантаження медіафайлів у Bubble

Використовуйте File Uploader від Bubble для завантаження ваших медіафайлів. Ці файли зберігаються на Amazon S3. Ви отримаєте URL-адресу, яку можна використовувати в параметрі тіла `mediaUrls` ендпоінта `/post`.

## Генерація JWT-токена в Bubble

Щоб згенерувати JWT-токен у Bubble, спочатку потрібно виконати Stringify для private.key, який ви надсилаєте до ендпоінта [/profiles/generateJWT](/apis/profiles/generate-jwt).

**Крок 1:** Перейдіть на [https://onlinetexttools.com/json-stringify-text](https://onlinetexttools.com/json-stringify-text) і вставте свій private.key у ліве текстове поле введення. Потім скопіюйте stringified-текст праворуч у буфер обміну.

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

**Крок 2:** У вашому додатку Bubble створіть новий виклик за допомогою API Connector, як показано нижче. Текст у полі `privateKey` в області Body — це stringified-текст, який ви створили в Кроці 1 вище.

Також укажіть наданий `domain` та `profileKey`, як показано нижче.

<img class="center" src="https://mintcdn.com/ayrshare/l0q1BFFPDsManw_r/images/packages-guides/Enter%20the%20JWT%20Token%20in%20Bubble.webp?fit=max&auto=format&n=l0q1BFFPDsManw_r&q=85&s=9d9ad871f4abe65e30298d00db302412" 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` у відповіді — це те, на що ваш користувач натисне, щоб перейти на сторінку прив’язки акаунтів соціальних мереж.

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

## Дозвіл користувачам прив’язувати свої соціальні акаунти

Якщо ви використовуєте Launch Plan, Business Plan або Enterprise Plan, це відео покаже вам, як налаштувати 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>

## Переписування тексту та публікація в соціальних мережах за допомогою AI у Bubble

Як можна використовувати 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) для виконання ваших викликів API Ayrshare.

Зверніть увагу, що Bubble припиняє всі виклики API після 150 секунд і потім повторює виклик ще раз. Велике відео може оброблятися довше ніж 150 секунд, що призведе до того, що Bubble автоматично спробує повторити публікацію та отримає помилку дублювання. Ми рекомендуємо використовувати [заплановану публікацію](/help-center/technical-support/response_bad_gateway_502_or_504_error) для великих відео.

## Корисні статті в блозі про Bubble

* [Build a Social Media Posting Mobile App with No Code](https://www.ayrshare.com/blog/build-a-social-media-posting-mobile-app-with-no-code/).
* [How to Create a Social Media Scheduling App with No Code.](https://www.ayrshare.com/blog/how-to-create-a-social-media-scheduling-app-with-no-code/)