Add quick customizable floating social sharing bar on your website

Social share increase user engagement with good amount of social referral traffic. IF you have good follower list on your facebook, google and twitter, you must add social share button on your website and share yuor article on all social networking sites. And your readers, visitor can also share your website’s article or products on their social network pages if they liked your post/ products. It definitely boot your website traffic and also good for google page rank. So that in this post I am going to share quick customizable floating social sharing bar plugin in jQuery. jQuery Social Share Bar is a simple but beautiful jQuery plugin for easily adding a floating social sharing bar to your site.

Features:-

• Minimalistically beautiful design
• Floats on the same position when page is scrolled
• Two themes: circular and square icons
• Supports 10 different channels
• Small file sizes, no bloat
• Super simple to add to any web page
• Simple animations to keep things interesting
• No tracking or external API calls
• Uses Font Awesome SVG for cross-browser support

Integrate floating social sharing bar on your website

Libraries

Include all the required JS+CSS libraries on page. It uses fontawesome library to display social share icons. Plugin’s doesn’t track the shares or make other API calls, which can cause privacy issues and slow things down.

<!--CSS-->
<link href="jquery-social-share-bar.css" rel="stylesheet" type="text/css">
 
<!--JS-->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-social-share-bar.js"></script>

HTML

Create an empty social share container to place the floating social icon.

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

It support ten different social media channels are supported for sharing your content to.

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

JS

Call the default plugin’s quick function to create social share bar with all the default feature.

$(function() {   
   $('#share-bar').share();
});

Here is the list of options you can use to customize your floating social share bar.

$(function() {   
   $('#share-bar').share({
 
  // page title
  pageTitle: '',
 
  // page url
  pageUrl: window.location.href,
 
  // page description
  pageDesc: '',
 
  // or 'left'
  position: 'right',
 
  // or 'square'
  theme: 'circle',
 
  // enable/disable animation
  animate: true,
 
  // popup width
  popupWidth: 600,
 
  // popup height
  popupHeight: 480,
 
  // an array of social networking services
  channels: ['facebook', 'twitter', 'linkedin', 'googleplus', 'email'],
 
  // trigger class
  itemTriggerClass: 'js-share'
 
  });
});

See live demos and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.