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.

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'
  
});

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