# How to integrate social media in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Integrating social media in Bubble lets you display feeds, enable sharing, and post content to platforms like Instagram, Twitter, and Facebook. This tutorial covers embedding social feeds using HTML elements, connecting to social APIs via the API Connector, posting to social platforms from Bubble workflows, and pulling analytics data from social accounts.

## Overview: Social Media Integration in Bubble

This tutorial shows you how to connect your Bubble app to major social media platforms. Whether you want to display an Instagram feed, let users share content to Twitter, or post automatically to Facebook, you will learn to use HTML embed elements for quick widgets and the API Connector for deeper integrations.

## Before you start

- A Bubble app on any plan
- Developer accounts on the social platforms you want to integrate (Meta Developer, Twitter Developer, etc.)
- API keys or access tokens for each platform
- Basic understanding of the API Connector plugin in Bubble

## Step-by-step guide

### 1. Embed a social media feed using an HTML element

The quickest way to display social content is embedding a widget. Drag an HTML element onto your page from the Element Palette. For an Instagram feed, use a service like Elfsight or SnapWidget that provides an embed code — paste the embed code into the HTML element. For a Twitter/X timeline, go to publish.twitter.com, enter your profile URL, select Embedded Timeline, and copy the generated HTML code into the Bubble HTML element. Resize the HTML element to fit your page layout. This method requires no API configuration.

> Pro tip: Embed widgets load externally and can slow your page. Place them below the fold or inside a group that loads only when scrolled into view.

**Expected result:** A live social media feed displays within your Bubble page, updating automatically with new posts.

### 2. Set up the API Connector for a social platform

Go to Plugins → Add plugins → search for API Connector and install it (it may already be installed). Open the API Connector configuration. Click Add another API. Name it (e.g., Twitter API). Set the Authentication type to OAuth2 User-Agent Flow for platforms that require user login, or Private key in header for app-level access. Enter the API base URL. For Twitter API v2, the base URL is https://api.twitter.com/2. Add your Bearer Token as a shared header: key = Authorization, value = Bearer [your_token]. Check the Private checkbox on the token to keep it server-side.

**Expected result:** The API Connector is configured with authentication for your chosen social platform.

### 3. Create an API call to fetch social media data

In the API Connector, click Add another call under your social API. Name it (e.g., Get User Tweets). Set the method to GET. Enter the endpoint URL — for Twitter: /users/[user_id]/tweets?max_results=10&tweet.fields=created_at,public_metrics. Set Use as to Data so you can use the response in Repeating Groups. Click Initialize call to test it. Bubble will map the JSON response fields automatically. You can now use Get data from an external API → Twitter API - Get User Tweets in any Repeating Group data source.

**Expected result:** The API call returns social media data that you can display in a Repeating Group on your page.

### 4. Post to social media from a Bubble workflow

To post content from your app to a social platform, create a new API call in the API Connector set to POST method with Use as set to Action. For Twitter, the endpoint is /tweets with a JSON body containing the text parameter. In your Bubble workflow (e.g., When Button Post is clicked), add a Plugins action → Twitter API - Create Tweet. Map the content parameter to the text input's value on your page. This lets users or automated workflows publish content directly to social platforms.

```
{
  "text": "<content_parameter>"
}
```

**Expected result:** Triggering the workflow publishes a new post to the configured social media account.

### 5. Display social analytics in your app

Create another API call to fetch analytics data — for example, Twitter public_metrics (likes, retweets, impressions) or Instagram insights. Set Use as to Data. Initialize the call and map the response. On your analytics page, add Text elements bound to the API data source. For example, display the like count from the API response. To track metrics over time, create a backend workflow that runs on a schedule (e.g., daily), fetches the latest metrics via the API call, and saves them to a Metrics Data Type with fields for date, likes, followers, and impressions.

**Expected result:** Your app displays social media metrics and optionally tracks them over time in your database.

## Complete code example

File: `API Connector payload`

```json
{
  "API Name": "Twitter API v2",
  "Authentication": "Private key in header",
  "Shared Headers": {
    "Authorization": "Bearer [your_bearer_token] (Private)"
  },
  "Calls": [
    {
      "Name": "Get User Tweets",
      "Method": "GET",
      "URL": "https://api.twitter.com/2/users/[user_id]/tweets?max_results=10&tweet.fields=created_at,public_metrics",
      "Use as": "Data"
    },
    {
      "Name": "Create Tweet",
      "Method": "POST",
      "URL": "https://api.twitter.com/2/tweets",
      "Use as": "Action",
      "Body": {
        "text": "<content_parameter>"
      }
    },
    {
      "Name": "Get Tweet Metrics",
      "Method": "GET",
      "URL": "https://api.twitter.com/2/tweets/[tweet_id]?tweet.fields=public_metrics",
      "Use as": "Data"
    }
  ],
  "Data Type for Tracking": {
    "SocialMetric": {
      "date": "date",
      "platform": "text",
      "likes": "number",
      "followers": "number",
      "impressions": "number"
    }
  }
}
```

## Common mistakes

- **Exposing social media API keys in client-side requests** — API keys visible in the browser allow anyone to make API calls on your behalf, potentially posting unauthorized content or exhausting rate limits Fix: Always check the Private checkbox on API key parameters in the API Connector to keep them server-side
- **Not handling rate limits from social media APIs** — Social platforms aggressively rate-limit API calls — Twitter allows 300 requests per 15 minutes and exceeding the limit returns errors Fix: Cache API responses in your Bubble database and refresh on a schedule rather than making API calls on every page load
- **Using embed widgets for data you need to process** — HTML embed widgets display content visually but do not give you access to the underlying data in Bubble — you cannot search, filter, or store embedded content Fix: Use the API Connector to fetch data you need to process, filter, or store. Use embeds only for display-only content.

## Best practices

- Cache social media API responses in your database to reduce API calls and improve page load speed
- Always mark API tokens as Private in the API Connector to prevent exposure
- Use OAuth2 User-Agent Flow when users need to connect their own social accounts
- Use backend scheduled workflows to fetch analytics data rather than loading it on every page visit
- Handle API errors gracefully — show a fallback message if the social feed fails to load
- Test with sandbox or development API keys before switching to production credentials

## Frequently asked questions

### Can I display an Instagram feed without an API?

Yes. Use a third-party embed widget service like Elfsight or SnapWidget that generates an HTML embed code. Paste it into a Bubble HTML element. This method does not require API configuration but offers limited customization.

### Do I need a developer account to integrate social media APIs?

Yes. Each platform requires a developer account and app registration to obtain API keys. Twitter requires a Developer Portal account, Meta requires a Meta for Developers account.

### How do I handle social media API rate limits in Bubble?

Cache API responses in your Bubble database using a scheduled backend workflow that fetches data every 15-30 minutes. Serve cached data to users instead of making live API calls on every page load.

### Can I let users connect their own social media accounts?

Yes. Use OAuth2 User-Agent Flow in the API Connector. This redirects users to the social platform to authorize your app, then stores their access token for making API calls on their behalf.

### Can RapidDev help integrate social media platforms into my Bubble app?

Yes. RapidDev can set up API Connector configurations, OAuth flows, social feed displays, automated posting workflows, and analytics dashboards for any social media platform in your Bubble app.

### Why is my embedded social feed loading slowly?

Embed widgets load external scripts and content, which adds to your page load time. Place them below the fold, lazy-load them inside a conditionally visible group, or switch to the API Connector for faster native data display.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-with-social-media-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-with-social-media-in-bubble