Author: | aneeskodappana |
---|---|
Views Total: | 481 views |
Official Page: | Go to website |
Last Update: | August 17, 2018 |
License: | MIT |
Preview:

Description:
The sticky-social-links library helps you create a floating social share panel containing social share links that will always be fixed on the left or right side of the webpage.
Social networks supported:
- Blogger
- Google Plus
- Youtube
- Easy to extend to add more social networks
How to use it:
Add the minified version of the sticky-social-links library to the html page.
<script src="dist/sticky-social.min.js"></script>
Create a new stickySocial instance and specify the social networks and icon folder.
new stickySocial( { 'facebook': 'https://www.facebook.com/jqueryscript', 'twitter': 'https://twitter.com/jqueryscript', 'linkedin': 'https://www.linkedin.com', 'google-plus': 'https://plus.google.com/+JqueryscriptNet', 'instagram': 'https://www.instagram.com', 'blogger': 'https://www.blogger.com', 'youtube': 'https://www.youtube.com' }, { iconsPath: 'resources/social-icons' } );
Change the position of the social share widget.
new stickySocial( { 'facebook': 'https://www.facebook.com/jqueryscript', 'twitter': 'https://twitter.com/jqueryscript', 'linkedin': 'https://www.linkedin.com', 'google-plus': 'https://plus.google.com/+JqueryscriptNet', 'instagram': 'https://www.instagram.com', 'blogger': 'https://www.blogger.com', 'youtube': 'https://www.youtube.com' }, { iconsPath: 'resources/social-icons', yAxix: '20%', // default: '30%' position: 'right' // default: 'left' } );
Set the width of the social icons.
new stickySocial( { 'facebook': 'https://www.facebook.com/jqueryscript', 'twitter': 'https://twitter.com/jqueryscript', 'linkedin': 'https://www.linkedin.com', 'google-plus': 'https://plus.google.com/+JqueryscriptNet', 'instagram': 'https://www.instagram.com', 'blogger': 'https://www.blogger.com', 'youtube': 'https://www.youtube.com' }, { iconsPath: 'resources/social-icons', iconWidth: 20 // default: 30 } );
Set the target attribute of the social links.
new stickySocial( { 'facebook': 'https://www.facebook.com/jqueryscript', 'twitter': 'https://twitter.com/jqueryscript', 'linkedin': 'https://www.linkedin.com', 'google-plus': 'https://plus.google.com/+JqueryscriptNet', 'instagram': 'https://www.instagram.com', 'blogger': 'https://www.blogger.com', 'youtube': 'https://www.youtube.com' }, { iconsPath: 'resources/social-icons', linkTarget: '_top' // default: '_blank' } );
Use rounded social icons or not.
new stickySocial( { 'facebook': 'https://www.facebook.com/jqueryscript', 'twitter': 'https://twitter.com/jqueryscript', 'linkedin': 'https://www.linkedin.com', 'google-plus': 'https://plus.google.com/+JqueryscriptNet', 'instagram': 'https://www.instagram.com', 'blogger': 'https://www.blogger.com', 'youtube': 'https://www.youtube.com' }, { iconsPath: 'resources/social-icons', roundedIcons: true // default: false } );