Demo to preview the plugin:
Introduction
This plugin lets you easily add social sharing buttons to your Bubble app, supporting up to 13 popular platforms. You can customize the shared text and URL, choose from four different visual themes, and decide whether the icons should appear in a round or square style.
It’s perfect for encouraging users to share your content, pages, or products directly to their favorite social networks with one click.
Prerequisites
- No external API setup is required.
- Ensure that the URLs and text you want users to share are correctly formatted (e.g., full links with
https://).
- You can only use one theme per page — mixing multiple themes may cause visual inconsistencies.
How to setup
Step 1 – Install the Plugin
Step 2 – Add the Plugin Element to Your Page
Step 3 – Configure Properties
Plugin Element Properties - Social Share Buttons
Fields
Title | Description | Type |
GENERAL SETTINGS | ||
Url | The URL that will be shared when users click a social button. | Text |
Size | Defines the size of the social icons. | Number |
Color_icon | Set a custom color for the social icons. | Color (optional) |
Text | The message or caption that will accompany the shared link. | Text |
Theme | Choose one of four available themes: Flat, Classic, Minimalistic, or Monochromatic. Only one theme can be used per page. | Dropdown |
Show_count | Display the share count beside each button. | Checkbox (yes/no) |
Show_label | Show or hide the text label beside each icon. | Checkbox (yes/no) |
Round Icons | Toggle whether the icons should be round. | Checkbox (yes/no) |
Twitter? | Enable or disable the Twitter share button. | Checkbox (yes/no) |
Email? | Enable or disable the Email share button. | Checkbox (yes/no) |
Facebook? | Enable or disable the Facebook share button. | Checkbox (yes/no) |
Googleplus? | Enable or disable the Google+ share button. | Checkbox (yes/no) |
Linkedin? | Enable or disable the LinkedIn share button. | Checkbox (yes/no) |
Pinterest? | Enable or disable the Pinterest share button. | Checkbox (yes/no) |
Stumbleupon? | Enable or disable the StumbleUpon share button. | Checkbox (yes/no) |
Pocket? | Enable or disable the Pocket share button. | Checkbox (yes/no) |
Whatsapp? | Enable or disable the WhatsApp share button. | Checkbox (yes/no) |
Viber? | Enable or disable the Viber share button. | Checkbox (yes/no) |
Messenger? | Enable or disable the Messenger share button. | Checkbox (yes/no) |
Telegram? | Enable or disable the Telegram share button. | Checkbox (yes/no) |
Vkontakte? | Enable or disable the VKontakte (VK) share button. | Checkbox (yes/no) |
LOGO CUSTOMIZATION | To use the default icons, leave these fields empty. To use a custom logo, insert the icon name from Font Awesome Free, e.g., fa-solid fa-heart or fa-brands fa-twitter. | |
Twitter_logo | Custom icon for Twitter. | Text (optional) |
Email_logo | Custom icon for Email. | Text (optional) |
Facebook_logo | Custom icon for Facebook. | Text (optional) |
Googleplus_logo | Custom icon for Google+. | Text (optional) |
Linkedin_logo | Custom icon for LinkedIn. | Text (optional) |
Pinterest_logo | Custom icon for Pinterest. | Text (optional) |
Stumbleupon_logo | Custom icon for StumbleUpon. | Text (optional) |
Pocket_logo | Custom icon for Pocket. | Text (optional) |
Whatsapp_logo | Custom icon for WhatsApp. | Text (optional) |
Viber_logo | Custom icon for Viber. | Text (optional) |
Messenger_logo | Custom icon for Messenger. | Text (optional) |
Telegram_logo | Custom icon for Telegram. | Text (optional) |
Vkontakte_logo | Custom icon for VKontakte. | Text (optional) |
BACKGROUND COLOR CUSTOMIZATION | Set custom background colors for each platform’s button. | |
Twitter_bg_color | Background color for Twitter button. | Color (optional) |
Email_bg_color | Background color for Email button. | Color (optional) |
Facebook_bg_color | Background color for Facebook button. | Color (optional) |
Googleplus_bg_color | Background color for Google+ button. | Color (optional) |
Linkedin_bg_color | Background color for LinkedIn button. | Color (optional) |
Pinterest_bg_color | Background color for Pinterest button. | Color (optional) |
Stumbleupon_bg_color | Background color for StumbleUpon button. | Color (optional) |
Pocket_bg_color | Background color for Pocket button. | Color (optional) |
Whatsapp_bg_color | Background color for WhatsApp button. | Color (optional) |
Viber_bg_color | Background color for Viber button. | Color (optional) |
Messenger_bg_color | Background color for Messenger button. | Color (optional) |
Telegram_bg_color | Background color for Telegram button. | Color (optional) |
Vkontakte_bg_color | Background color for VKontakte button. | Color (optional) |
