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 content on social sites.
How to Add Side Sticky Share Buttons to your site
1. To get started with sticky share buttons, first of all, load the jQuery and Font Awesome into the 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 the jQuery document ready function.
$(document).ready(function(){
$('#share-bar').share();
});
Advance Configuration Options for Share Bar
| Shared content | |
|---|---|
pageTitle |
The title of the page is to be shared. By default, the HTML title element shall be used.
$('#share-bar').share({
pageTitle: 'Viima homepage'
});
|
pageUrl |
The url to share. By default, the current address is used.
$('#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 left (default) or right.
$('#share-bar').share({
position: 'right'
});
|
theme |
Determines the theme used by the widget. Value has to be either circle (default) or square.
$('#share-bar').share({
theme: 'square'
});
|
animate |
A boolean value for turning animations on or off.
$('#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.
$('#share-bar').share({
'channels': ['reddit', 'stumbleupon', 'pinterest', 'digg', 'tumblr']
});
|
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.