Floating Sticky Social Sharing Widget With jQuery Social Share - Download Floating/Sticky Social Sharing Widget With jQuery - Social-Share

Download Floating/Sticky Social Sharing Widget With jQuery – Social-Share

Posted on

This time I will share jQuery Plugin and tutorial about Floating/Sticky Social Sharing Widget With jQuery – Social-Share, hope it will help you in programming stack.

Floating Sticky Social Sharing Widget With jQuery Social Share - Download Floating/Sticky Social Sharing Widget With jQuery - Social-Share
File Size: 5.68 KB
Views Total: 3185
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Social-Share is a jQuery plugin used to create a vertical, sticky, collapsible social share widget with counters on the left side of the screen. Currently supports Facebook, Twitter, Google Plus, Reddit, Linkedin, Pinterest and Tumblr.

How to use it:

1. Load the latest version of jQuery library before you load the jQuery Social-Share plugin:

1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="social_share.js"></script>

2. The plugin requires Font Awesome 4 for the social icons.

1 <link rel="stylesheet" href="font-awesome.css">

3. Initialize the plugin and specify the social networks you want to use.

01 data = [
02   "facebook",
03   "googleplus",
04   "linkedin",
05   "tumblr",
06   "pinterest",
07   "reddit",
08   "<a href="https://www.jqueryscript.net/tags.php?/twitter/">twitter</a>"
09 ];
10 $.social_share(data)

4. Style the social share widget with your own CSS styles.

01 .social-container a { color: #FFFFFF; }
02  
03 .social-container {
04   top: 25%;
05   position: fixed;
06   text-align: center;
07   max-width: 60px;
08   color: #fff;
09 }
10  
11 .social-icon {
12   width: 77px;
13   background: #BF263C;
14   margin: 3px;
15 }
16  
17 .count {
18   height: 20px;
19   padding: 0px;
20   font-size: 12px;
21   color: #FFEB3B;
22 }

This awesome jQuery plugin is developed by AnjaneyuluBatta505. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net