How to integrate social media in Bubble

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.

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.

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.

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.

1{
2  "text": "<content_parameter>"
3}

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.