A lightweight jQuery plugin that helps you to create side sticky social media share buttons (like Facebook, Twitter etc.) to boost user experience while sharing your contents on social sites.
Plugin Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins
Plugin Overview
Plugin: | jquery-social-share-bar |
Author: | Viima |
Licence: | MIT Licence |
Published: | March 27, 2019 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 1.3.1 or Latest version and Font Awesome 4.0 or Latest |
File Type: | zip archive (HTML, CSS & JavaScript) |
Package Size: | 143 KB |
How to Add Side Sticky Share Buttons to your site:
1. To getting started with sticky share buttons, first of all, load the jQuery and Font Awesome into HTML document.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Fontawesome 5--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
2. After this, include the sharer plugin’s CSS and JavaScript into your page.
<!-- Sticky Social Share CSS --> <link rel="stylesheet" href="css/jquery-social-share-bar.css"> <!-- Sticky Social Share JS --> <script src="js/jquery-social-share-bar.js"></script>
3. Create a container ( a div
element ) in which social share buttons will be generated.
<div id="share-bar"></div>
4. Initialize the plugin in jQuery document ready function.
$(document).ready(function(){ $('#share-bar').share(); });
Advance Configuration Options for Share Bar
Shared content | |
---|---|
pageTitle |
The title of the page to be shared. By default, the html
$('#share-bar').share({ pageTitle: 'Viima homepage' }); |
pageUrl |
The
$('#share-bar').share({ pageUrl: 'https://www.viima.com' }); |
pageDesc |
A description of the site to share, as used by some networks. By default, the meta description of the page is used.
$('#share-bar').share({ pageDesc: 'Viima is the best way to collect and develop ideas' }); |
Appearance | |
position |
Determines the position of the widget. Value has to be either
$('#share-bar').share({ position: 'right' }); |
theme |
Determines the theme used by the widget. Value has to be either
$('#share-bar').share({ theme: 'square' }); |
animate |
A
$('#share-bar').share({ animate: false }); |
Channels | |
channels |
Determines the channels used in the widget. Value has to be an
$('#share-bar').share({ 'channels': ['reddit', 'stumbleupon', 'pinterest', 'digg', 'tumblr'] }); |