Sticky Social Share Widget In Vanilla JavaScript – sticky-social-links

Category: Javascript , Social Media | August 17, 2018
Author: aneeskodappana
Views Total: 987
Official Page: Go to website
Last Update: August 17, 2018
License: MIT

Preview:

Sticky Social Share Widget In Vanilla JavaScript – sticky-social-links

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
  • Facebook
  • Google Plus
  • Instagram
  • Linkedin
  • Twitter
  • 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
    }
);

You Might Be Interested In:


Leave a Reply