# How to add social share buttons in Bubble.io: Step-by-Step Guide

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

## TL;DR

Add social share buttons to your Bubble app by constructing share URLs for Facebook, Twitter, LinkedIn, and WhatsApp that include your page URL and dynamic content. Place these as Link elements or buttons with 'Open an external website' workflows. Configure Open Graph meta tags on your pages so shared links display rich previews with title, description, and image.

## Add Social Share Buttons to Your Bubble App

This tutorial shows you how to add share buttons for Facebook, Twitter, LinkedIn, and WhatsApp. You will construct platform-specific share URLs with dynamic content and configure OG tags for attractive previews when links are shared.

## Before you start

- A Bubble account with an existing app
- Pages with content worth sharing (blog posts, products, listings)
- Basic understanding of URL construction and dynamic expressions

## Step-by-step guide

### 1. Construct Share URLs for Each Platform

Each social platform has a specific URL format for sharing. Facebook: https://www.facebook.com/sharer/sharer.php?u=[page_url]. Twitter: https://twitter.com/intent/tweet?url=[page_url]&text=[title]. LinkedIn: https://www.linkedin.com/sharing/share-offsite/?url=[page_url]. WhatsApp: https://api.whatsapp.com/send?text=[title]+[page_url]. Build these as dynamic expressions using your page's URL and the current item's title.

**Expected result:** You have the URL format for each platform's share link.

### 2. Add Share Buttons to Your Page

In the Design tab, add a Group with Row layout to hold your share buttons. Add Icon or Image elements for each platform (use their official brand icons). For each icon, add a workflow: 'When icon is clicked' → 'Open an external website'. Set the destination dynamically — concatenate the platform's base URL with your page's current URL (using 'Current page URL' or constructing it from the domain + slug). Set 'Open in: New tab'.

> Pro tip: Use Link elements instead of workflow-based navigation when possible. Links are more accessible, work with right-click, and are visible to screen readers.

**Expected result:** Clicking each social icon opens the respective platform's sharing dialog with your page pre-filled.

### 3. Add Dynamic Content to Share Text

For Twitter and WhatsApp, include the page title or description in the share text. Build the URL dynamically: for a product page, use 'Check out ' merged with Current Page Product's name merged with ' ' merged with Current page URL. URL-encode special characters using the :encoded operator if available, or use the Toolbox plugin's expression element.

**Expected result:** Share links include descriptive text alongside the URL.

### 4. Configure Open Graph Meta Tags for Rich Previews

Go to the page's Property Editor and set: Page title = dynamic content title, Page description = content excerpt, OG image = content's featured image. For app-wide defaults, go to Settings → SEO/metatags. These OG tags determine what Facebook, LinkedIn, and other platforms show when your link is shared — title, description, and preview image.

**Expected result:** Shared links display rich previews with correct title, description, and image on all platforms.

### 5. Create a Reusable Share Component

Build the share buttons as a Reusable Element called 'ShareButtons'. Add properties: share_url (text) and share_title (text). Use these properties in the share URL construction. Place this reusable element on every page that has shareable content, passing the appropriate URL and title for each page.

**Expected result:** A reusable share component that works across all content pages with dynamic data.

## Complete code example

File: `Workflow summary`

```text
SHARE URL FORMATS:

Facebook:
https://www.facebook.com/sharer/sharer.php?u=[encoded_page_url]

Twitter/X:
https://twitter.com/intent/tweet?url=[encoded_page_url]&text=[encoded_title]

LinkedIn:
https://www.linkedin.com/sharing/share-offsite/?url=[encoded_page_url]

WhatsApp:
https://api.whatsapp.com/send?text=[encoded_title]%20[encoded_page_url]

Email:
mailto:?subject=[encoded_title]&body=Check%20this%20out:%20[encoded_page_url]

REUSABLE ELEMENT: ShareButtons
  Properties: share_url (text), share_title (text)
  Layout (Row):
    - Facebook icon → Open external: facebook share URL
    - Twitter icon → Open external: twitter share URL
    - LinkedIn icon → Open external: linkedin share URL
    - WhatsApp icon → Open external: whatsapp share URL
    - Email icon → Open external: mailto URL
    - Copy link icon → Run JavaScript: navigator.clipboard.writeText(share_url)

OG TAGS (per page Property Editor):
  Page title: Current Page [Type]'s title
  Page description: Current Page [Type]'s excerpt :truncated to 155
  OG image: Current Page [Type]'s featured_image
```

## Common mistakes

- **Not URL-encoding the share text** — Special characters, spaces, and ampersands in the title break the share URL. Fix: Use Bubble's :encoded operator or encodeURIComponent via JavaScript to properly encode share text.
- **Using low-resolution OG images** — Social platforms display blurry or cropped previews with small images. Facebook recommends at least 1200x630px. Fix: Use images at least 1200x630 pixels for OG tags.
- **Testing share previews without clearing platform cache** — Facebook and other platforms cache OG data. Updated tags may not appear immediately. Fix: Use Facebook's Sharing Debugger to scrape the URL again after updating OG tags.

## Best practices

- URL-encode all dynamic text in share URLs to handle special characters.
- Set unique OG meta tags on every shareable page for platform-specific rich previews.
- Use official brand icons and colors for social platform buttons.
- Include a 'Copy link' button for users who want to share via other channels.
- Test share previews with Facebook Debugger and Twitter Card Validator.
- Position share buttons near the content they relate to, not buried in a footer.

## Frequently asked questions

### Do I need API keys for social share buttons?

No. Social share URLs are public and do not require authentication. You simply construct the URL with parameters and open it in a new tab.

### Can I track how many times a page is shared?

Not directly through share URLs. You can increment a counter in your database each time a share button is clicked, or use Facebook's Graph API to query share counts.

### How do I test what my shared link looks like?

Use Facebook Sharing Debugger (developers.facebook.com/tools/debug) for Facebook/Instagram, and Twitter Card Validator for Twitter. LinkedIn has a Post Inspector tool.

### Should I use a share plugin instead of building my own?

Plugins like AddThis or ShareThis offer pre-built share buttons with analytics. Building your own gives more control over design and performance.

### Can I add share buttons that post directly to social media?

Direct posting requires OAuth authentication with each platform's API, which is significantly more complex. Share URL dialogs are the standard approach. For advanced social integrations, RapidDev can build custom solutions.

### Do share buttons work on mobile?

Yes. WhatsApp share URLs open the WhatsApp app directly on mobile. Other platforms open in the mobile browser or their native apps if installed.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-social-share-buttons-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-social-share-buttons-in-bubble