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

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
• 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
    }
);