Customizable Floating Social Share Bar With jQuery - social-share-bar.js

An easy yet customizable jQuery based floating social share bar positioned at the left or right of the page to maximize your social media visibility. The social share bar will automatically move to the bottom of the screen on mobile devices.

Supported social networking services:

• Facebook
• Twitter
• LinkedIn
• Google+
• Pinterest
• Reddit
• Tumblr
• StumbleUpon
• Digg
• Email

More features:

• Custom width/height of social share popup.
• Custom page title, description, and URL to share.
• Subtle animation on hover.
• Circular and square social icons.

How to use it:

1. Include the necessary Font Awesome for social icons.

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

2. Include jQuery library and the jQuery social-share-bar.js plugin's files on the page.

<link href="css/jquery-social-share-bar.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery-social-share-bar.js"></script>

3. Create an empty container to place the floating social bar.

<div id="share-bar"></div>

4. Call the function on the DIV container and done.

$('#share-bar').share();

5. Customize the floating social share bar.

$('#share-bar').share({

  // page title
  pageTitle: '',

  // page url
  pageUrl: window.location.href,

  // page description
  pageDesc: '',

  // or 'right'
  position: 'left',

  // or 'square'
  theme: 'circle',

  // enable/disable animation
  animate: true,

  // popup width
  popupWidth: 640,

  // popup height
  popupHeight: 528,
  
  // an array of social networking services
  channels: ['facebook', 'twitter', 'linkedin', 'googleplus', 'email'],
  
  // trigger class
  itemTriggerClass: 'js-share'
  
});

Changelog:

2019-02-15

• CSS updated

2018-02-15

• Increased z-index to avoid bugs on overlapping elements

2018-02-14

• Responsive support: bar moves to bottom of screen on mobile devices

---

This awesome jQuery plugin is developed by Viima. For more Advanced Usages, please check the demo page or visit the official website.