Side Sticky Social Media Share Buttons with jQuery

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

Side Sticky Social Media Share Buttons with jQuery

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

Demo Download

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 `title` element shall be used. DEFAULT `document.title` EXAMPLE $('#share-bar').share({ pageTitle: 'Viima homepage' });
`pageUrl`	The `url` to share. By default, the current address is used. DEFAULT `window.location.href` EXAMPLE $('#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. DEFAULT `$('head > meta[name="description"]').attr("content")` EXAMPLE $('#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 `left` (default) or `right`. DEFAULT `left` EXAMPLE $('#share-bar').share({ position: 'right' });
`theme`	Determines the theme used by the widget. Value has to be either `circle` (default) or `square`. DEFAULT `circle` EXAMPLE $('#share-bar').share({ theme: 'square' });
`animate`	A `boolean` value for turning animations on or off. DEFAULT `true` EXAMPLE $('#share-bar').share({ animate: false });
Channels
`channels`	Determines the channels used in the widget. Value has to be an `array` containing string names of the social media channels to show in the widget. DEFAULT `['facebook', 'twitter', 'linkedin', 'googleplus', 'email']` EXAMPLE $('#share-bar').share({ 'channels': ['reddit', 'stumbleupon', 'pinterest', 'digg', 'tumblr'] });