# How to set up social sharing in Bubble

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

## TL;DR

Enable social sharing in your Bubble app by generating share-ready URLs with Open Graph meta tags, dynamic OG images, and share buttons for major platforms. This tutorial covers configuring page-level meta tags, building share URLs for Twitter, Facebook, and LinkedIn, and adding share counters to track virality.

## Overview: Enabling Social Sharing in Bubble

When users share your app's content on social media, rich previews with images and descriptions drive more clicks. This tutorial shows you how to set Open Graph meta tags in Bubble, create platform-specific share URLs, and add share buttons that make it easy for users to spread the word.

## Before you start

- A Bubble account with an app that has shareable content
- Basic understanding of Bubble's Design and Settings tabs
- Content pages with dynamic data you want users to share

## Step-by-step guide

### 1. Configure Open Graph meta tags in page settings

In the Design tab, click on the page element (the root of the page tree). In the Property Editor, scroll to the SEO/OG section. Set the Page title dynamically using the page's data (e.g., Current Page Product's name). Set the OG image to a dynamic image URL. Set the OG description to a summary of the content. These tags control what appears when someone shares your URL on social media.

> Pro tip: Use Bubble's dynamic page titles with the format: [Content Title] | [Your App Name] for consistent branding in social shares.

**Expected result:** Each page generates correct Open Graph meta tags that social platforms read for rich previews.

### 2. Build share buttons for each platform

Add a Row group with social share icon buttons. For each platform, create a button with the platform icon. Create workflows that open external URLs in a new tab using the Open an external website action. Twitter: https://twitter.com/intent/tweet?url=[page_url]&text=[share_text]. Facebook: https://www.facebook.com/sharer/sharer.php?u=[page_url]. LinkedIn: https://www.linkedin.com/sharing/share-offsite/?url=[page_url]. Replace [page_url] with the current page URL and [share_text] with dynamic content.

**Expected result:** Clicking each share button opens the respective platform's share dialog pre-filled with your content.

### 3. Generate the current page URL dynamically

To get the current page's full URL for sharing, use the expression: Website home URL merged with the current page path and any URL parameters. Store this in a custom state or use it directly in the share URL construction. For SEO-friendly URLs, use the page thing's slug field.

**Expected result:** A dynamic URL that correctly points to the current page with all necessary parameters.

### 4. Add a copy link button

Add a Button labeled Copy Link alongside the social buttons. Install the Toolbox plugin if not already installed. Create a workflow: When Button is clicked, run JavaScript to copy to clipboard using navigator.clipboard.writeText(url). Show a brief tooltip or change the button text to Copied for 2 seconds using a custom state and a pause action.

**Expected result:** Users can copy the share URL to their clipboard with one click and see a confirmation.

### 5. Track share counts

Create a Data Type called ShareEvent with fields: page_url (text), platform (text), user (User), and shared_date (date). In each share button's workflow, before opening the external URL, create a new ShareEvent recording the platform and page. On your admin dashboard, display share counts grouped by platform and page using Do a search for ShareEvents with :group by.

**Expected result:** Every share is recorded in the database and you can see which content gets shared most on which platforms.

## Complete code example

File: `Workflow summary`

```text
SOCIAL SHARING — WORKFLOW SUMMARY
==================================

SEO/OG SETUP (Page Property Editor)
  Page title: Current Page Product's name + " | MyApp"
  OG image: Current Page Product's image
  OG description: Current Page Product's description:truncated to 155

SHARE URLS
  Twitter:
    https://twitter.com/intent/tweet?url=[encoded_url]&text=[encoded_text]
  Facebook:
    https://www.facebook.com/sharer/sharer.php?u=[encoded_url]
  LinkedIn:
    https://www.linkedin.com/sharing/share-offsite/?url=[encoded_url]

WORKFLOW: Share on Twitter
  Trigger: Button Twitter clicked
  Step 1: Create ShareEvent (platform: twitter, url, user, date)
  Step 2: Open external website → Twitter share URL

WORKFLOW: Share on Facebook
  Trigger: Button Facebook clicked
  Step 1: Create ShareEvent (platform: facebook)
  Step 2: Open external website → Facebook share URL

WORKFLOW: Copy Link
  Trigger: Button Copy clicked
  Step 1: Run JavaScript → navigator.clipboard.writeText(url)
  Step 2: Set state → copied = yes
  Step 3: Pause 2 seconds
  Step 4: Set state → copied = no

DATA MODEL
  ShareEvent:
    - page_url (text)
    - platform (text)
    - user (User)
    - shared_date (date)
```

## Common mistakes

- **Not setting OG tags dynamically per page** — Static OG tags show the same image and title for every shared link, making shares look generic and reducing click-through rates. Fix: Use dynamic expressions in the page's SEO/OG settings that pull from the page's data source.
- **Forgetting to URL-encode the share URL** — Special characters in URLs break the share dialog on social platforms. Fix: Use Bubble's :encoded operator on URLs before inserting them into share link templates.
- **Not testing social previews before launch** — Social platforms cache OG tags. If they are wrong at first share, the wrong preview persists. Fix: Use Facebook's Sharing Debugger and Twitter's Card Validator to test and refresh your OG previews.

## Best practices

- Set dynamic OG title, image, and description on every shareable page
- URL-encode all dynamic values in share URLs
- Test previews with Facebook Sharing Debugger and Twitter Card Validator
- Include a copy-to-clipboard option alongside social platform buttons
- Track share events in the database to identify viral content
- Use square or 1200x630 pixel images for OG images as they display best across platforms

## Frequently asked questions

### Why does my shared link show the wrong image on Facebook?

Facebook caches OG tags. Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) to scrape your URL again and refresh the cached preview.

### What size should OG images be?

The recommended size is 1200x630 pixels. Facebook, Twitter, and LinkedIn all display this size well. Use PNG or JPG format.

### Can I add a share counter showing how many times a page was shared?

Yes. Display the count from your ShareEvent data type: Do a search for ShareEvents where page_url is the current URL, then show the count next to the share buttons.

### Do I need to add share buttons or can users just copy the URL?

Both. Share buttons reduce friction by pre-filling the post, but a Copy Link button gives users flexibility to share anywhere including messaging apps.

### Can I share to WhatsApp and Telegram?

Yes. WhatsApp: https://wa.me/?text=[encoded_url]. Telegram: https://t.me/share/url?url=[encoded_url]&text=[encoded_text]. Both use standard URL schemes.

### Can RapidDev help build a viral sharing system?

Yes. RapidDev can build referral systems, social sharing with tracking, viral loops, and analytics dashboards to measure content virality.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-social-sharing-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-social-sharing-in-bubble