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>

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

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

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