Floating Social Share Bar In Pure JavaScript – Sharerbox

Sharerbox is an easy-to-use yet fully configurable floating (sticky) social share bar that can be placed either on the left or on the right side of the screen.

How to use it:

1. Download and insert the main JavaScript sharerbox.js into the document.

<script src="sharerbox.js"></script>

2. Add social networks to the social share bar. Supported social networks:

• X (Twitter)
• Facebook
• WhatsApp
• LinkedIn
• Reddit
• Tumblr
• Pinterest
• Telegram
• Lemmy
• Mastodon
• Email
• Trello
• Direct Link

sharerbox({
  socialNetworks: 'facebook twitter whatsapp linkedin reddit',
});

3. Set the icon size in pixels (24-100).

sharerbox({
  socialNetworks: 'facebook twitter whatsapp linkedin reddit',
  iconSize: 100,
});

4. Possible parameters to config the floating social share bar.

• behavior: open the social share page in a popup or in a new tab, ‘popup’ or ‘new-tab’
• position: determine the position of the floating social share bar, ‘left’ or ‘rignt’
• color: the color of the toggle button
• visibility: hide the floating social bar or not
• message: define your own message or website description here

sharerbox({
  behavior: 'popup',
  position: 'right',
  color: 'black',
  visibility: true,
  message: 'Any Message Here'
});

Changelog:

v0.11.0 (07/28/2024)

• Introduced partial support for social network apps from the Fediverse: Decentralized federated instance-based web services.
• Mastodon support (Default instance: mastodon.social).
• Lemmy support (Default instance: lemmy.ml).
• Default Fediverse social networks can be set to a different instance.
• Bug fixes
• Minor refactoring

v0.10.1 (07/23/2024)

• Telegram: Add support for xdg-open URL links for Telegram desktop apps on Chromium-based web browsers.
• Update Twitter/X logo to the new official logo.
• Update Twitter/X URL to new official domain.

v0.10.0 (08/22/2022)

• New Features: Trello support
• Bug fix: Sharer url for telegram changed to HTTP version to increase browser compatibility

v0.9.0 (04/26/2022)

• functions sharerboxIcons() and sharerSetup() deprecated, use sharerbox() function instead. All SharerBox options are now passed to sharerbox() as object properties
• option ‘shareDescription’ renamed to ‘message’
• Bug fix:

v0.8.1 (10/31/2021)

• Bugfix

v0.8.0 (04/22/2021)

• Added support for the Web Share API from mobile devices
• Social media button sizes are now customizable
• Bugfix

v0.7.1 (04/17/2021)

• SharerBox no longer obstructs selection of page elements displayed under SharerBox’s non-visible external container element