Floating Social Share Bar In Pure JavaScript – Sharerbox

Preview:

Description:

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:

• Twitter
• Facebook
• WhatsApp
• LinkedIn
• Reddit
• Tumblr
• Pinterest
• Telegram
• 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.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