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.
Prerequisites
- 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
Construct Share URLs for Each Platform
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.
Add Share Buttons to Your Page
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.
Add Dynamic Content to Share Text
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.
Configure Open Graph Meta Tags for Rich Previews
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.
Create a Reusable Share Component
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 working example
1SHARE URL FORMATS:23Facebook:4https://www.facebook.com/sharer/sharer.php?u=[encoded_page_url]56Twitter/X:7https://twitter.com/intent/tweet?url=[encoded_page_url]&text=[encoded_title]89LinkedIn:10https://www.linkedin.com/sharing/share-offsite/?url=[encoded_page_url]1112WhatsApp:13https://api.whatsapp.com/send?text=[encoded_title]%20[encoded_page_url]1415Email:16mailto:?subject=[encoded_title]&body=Check%20this%20out:%20[encoded_page_url]1718REUSABLE ELEMENT: ShareButtons19 Properties: share_url (text), share_title (text)20 Layout (Row):21 - Facebook icon → Open external: facebook share URL22 - Twitter icon → Open external: twitter share URL23 - LinkedIn icon → Open external: linkedin share URL24 - WhatsApp icon → Open external: whatsapp share URL25 - Email icon → Open external: mailto URL26 - Copy link icon → Run JavaScript: navigator.clipboard.writeText(share_url)2728OG TAGS (per page Property Editor):29 Page title: Current Page [Type]'s title30 Page description: Current Page [Type]'s excerpt :truncated to 15531 OG image: Current Page [Type]'s featured_imageCommon mistakes when adding social share buttons in Bubble.io: Step-by-Step Guide
Why it's a problem: Not URL-encoding the share text
How to avoid: Use Bubble's :encoded operator or encodeURIComponent via JavaScript to properly encode share text.
Why it's a problem: Using low-resolution OG images
How to avoid: Use images at least 1200x630 pixels for OG tags.
Why it's a problem: Testing share previews without clearing platform cache
How to avoid: 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.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add social share buttons (Facebook, Twitter, LinkedIn, WhatsApp) to my Bubble.io blog and product pages. How do I construct the share URLs with dynamic content and set up OG meta tags for rich previews?
Add a reusable ShareButtons element with icons for Facebook, Twitter, LinkedIn, WhatsApp, and Copy Link. Each button opens the platform's share URL with the current page URL and title. Configure OG meta tags on the blog post page.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation