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.
Prerequisites
- 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
Configure Open Graph meta tags in page settings
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.
Build share buttons for each platform
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.
Generate the current page URL dynamically
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.
Add a copy link button
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.
Track share counts
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 working example
1SOCIAL SHARING — WORKFLOW SUMMARY2==================================34SEO/OG SETUP (Page Property Editor)5 Page title: Current Page Product's name + " | MyApp"6 OG image: Current Page Product's image7 OG description: Current Page Product's description:truncated to 15589SHARE URLS10 Twitter:11 https://twitter.com/intent/tweet?url=[encoded_url]&text=[encoded_text]12 Facebook:13 https://www.facebook.com/sharer/sharer.php?u=[encoded_url]14 LinkedIn:15 https://www.linkedin.com/sharing/share-offsite/?url=[encoded_url]1617WORKFLOW: Share on Twitter18 Trigger: Button Twitter clicked19 Step 1: Create ShareEvent (platform: twitter, url, user, date)20 Step 2: Open external website → Twitter share URL2122WORKFLOW: Share on Facebook23 Trigger: Button Facebook clicked24 Step 1: Create ShareEvent (platform: facebook)25 Step 2: Open external website → Facebook share URL2627WORKFLOW: Copy Link28 Trigger: Button Copy clicked29 Step 1: Run JavaScript → navigator.clipboard.writeText(url)30 Step 2: Set state → copied = yes31 Step 3: Pause 2 seconds32 Step 4: Set state → copied = no3334DATA MODEL35 ShareEvent:36 - page_url (text)37 - platform (text)38 - user (User)39 - shared_date (date)Common mistakes when setting up social sharing in Bubble
Why it's a problem: Not setting OG tags dynamically per page
How to avoid: Use dynamic expressions in the page's SEO/OG settings that pull from the page's data source.
Why it's a problem: Forgetting to URL-encode the share URL
How to avoid: Use Bubble's :encoded operator on URLs before inserting them into share link templates.
Why it's a problem: Not testing social previews before launch
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add social sharing to my Bubble.io app so users can share product pages on Twitter, Facebook, and LinkedIn with rich previews. How do I set up Open Graph tags, build share buttons, and track share counts?
Add social share buttons to my product detail page. Configure dynamic OG meta tags using the product's title, image, and description. Add Twitter, Facebook, LinkedIn, and Copy Link buttons that open share dialogs pre-filled with the product URL.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation