Free jQuery Plugins - CodeHim

Awesome Web Design Code & Scripts...

  • Home
  • Categories
    • Accordion
    • Creative
    • Carousel
    • Date & Time
    • Gallery
    • LightBox
    • Menu & Nav
    • Modal
    • Others
    • Portfolio
    • Social Media
    • Text & Input
    • Video Player
    • Zoom
  • HTML5 & CSS3
  • Bootstrap
  • Collections
  • Submit Code
  • About
  • Contact
  • Terms

Home / Social Media / Side Sticky Social Media Share Buttons with jQuery

Side Sticky Social Media Share Buttons with jQuery

March 27, 2019 admin Social Media 0

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
Share this:

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.


document.title

$('#share-bar').share({
    pageTitle: 'Viima homepage'
});
pageUrl

The url to share. By default, the current address is used.


window.location.href

$('#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.


$('head > meta[name="description"]').attr("content")

$('#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.


left

$('#share-bar').share({
    position: 'right'
});
theme

Determines the theme used by the widget. Value has to be either circle (default) or square.


circle

$('#share-bar').share({
    theme: 'square'
});
animate

A boolean value for turning animations on or off.


true

$('#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.


['facebook', 'twitter', 'linkedin', 'googleplus', 'email']

$('#share-bar').share({
    'channels': ['reddit', 'stumbleupon', 'pinterest', 'digg', 'tumblr']
});

Related jQuery Plugins:

  • jQuery Plugin to Make Embed Video Responsive - FluidifyjQuery Plugin to Make Embed Video Responsive - Fluidify
  • Tweet Highlighted Text with jQueryTweet Highlighted (Selected) Text with jQuery
  • jQuery Flyout Menu PluginjQuery Flyout Menu Plugin for Social Profiles
  • jQuery Social Share Buttons Plugin with Font AwesomejQuery Plugin for Social Share Buttons with Font Awesome
  • jQuery Plugin to Embed Giphy Images - Bootstrap Giffy GalleryjQuery Plugin to Embed Giphy Images - Bootstrap Giffy Gallery
  • Embed Instagram Feed on WebsitejQuery Plugin to Embed Instagram Feed on Website
Search in HTML Table Using JavaScriptPrevious

Search in HTML Table Using JavaScript – jQuery fancyTable

Bootstrap Grid Image Gallery with LightboxNext

Bootstrap Image Gallery with Lightbox – jQuery bsPhotoGallery

Latest jQuery Plugins

  • Simple jQuery Zoom Image on HoverSimple jQuery Zoom Image on Hover
    Zoom
    December 14, 2019
  • CSS Sidebar Navigation Menu with IconsCSS Sidebar Navigation Menu with Icons
    Menu & Nav
    November 27, 2019
  • Convert Timestamp to Time ago using jQuery timeagoConvert Timestamp to Time ago using jQuery timeago
    Date & Time
    November 27, 2019
  • jQuery Multiple Image Carousel Slider - Blue-SliderjQuery Multiple Image Carousel Slider – Blue-Slider
    Carousel
    November 26, 2019
  • HTML Table with Fixed Header and Scrollable bodyHTML Table with Fixed Header and Scrollable body
    Others
    November 26, 2019
  • Convert Digits into Words with JavaScript / jQueryConvert Digits into Words with JavaScript / jQuery
    Text & Input
    November 23, 2019
  • jQuery Simple Tooltip on Hover - simpleTooltipjQuery Simple Tooltip on Hover – simpleTooltip
    Others
    November 17, 2019
  • onclick Image Popup jQuery Lightbox Pluginonclick Image Popup jQuery Lightbox Plugin
    LightBox
    November 16, 2019

jQuery Plugins Categories

  • Accordion (11)
  • Carousel (22)
  • Chart & Graph (4)
  • Collections (2)
  • Date & Time (21)
  • Gallery (24)
  • HTML5 & CSS3 (26)
  • Layout (6)
  • LightBox (19)
  • Menu & Nav (43)
  • Modal (12)
  • Others (44)
  • Portfolio (7)
  • Social Media (7)
  • Text & Input (27)
  • Vanilla JavaScript (3)
  • Video Player (3)
  • Zoom (5)

Advertisement

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. Find out more...

CodeHim
  • About
  • Contact Us
  • Terms and Conditions
  • Privacy Policy
Top Categories
  • HTML5 & CSS3
  • Menu & Nav
  • Text & Input
  • LightBox & Slider
Get in Touch

Follow us on social media to be updated with latest web design code & scripts...

All Rights Reserved © 2019 - CodeHim Inc