Customizable Social Sharing Buttons In JavaScript – SocialShareJS

Preview:

Description:

The SocialShareJS JavaScript library helps you generate highly customizable social sharing buttons to share your content/webpage on popular social networks.

Features:

• Custom query string.
• Custom link to share.
• Smart device (responsive) check.
• Custom social icons.
• 4 hover effects.
• 4 button styles.

How to use it:

1. Load the SocialShareJS’ JavaScript and Stylesheet.

<link rel="stylesheet" href="/path/to/social-share.min.css">
<script src="/path/to/social-share.min.js"></script>

2. Load the latest Font Awesome for custom social icons.

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

3. Add the CSS class 'ss-box' to the container in which the social share buttons display.

<div class="ss-box"></div>

4. That’s it. You can also create the social share buttons via JavaScript:

// SocialShare.createShareBox(elements, link = null, socials =  null, showIcon = true, showContent = true, clearContainer = true);
SocialShare.createShareBox("#myContainer", "https://cssscript.com", "facebook, twitter, email");

5. Determine which social networks to enable. All social networks:

• Facebook
• Twitter
• Pinterest
• Linkedin
• Messenger
• Whatsapp
• Viber
• Telegram
• Tumblr
• Reddit
• Pocket
• Email
• SMS
• Native

<div class="ss-box" data-ss-social="facebook, twitter, email, sms"></div>

6. Specify the URL to share. Defaults to the current page.

<div class="ss-box" data-ss-link="https://www.cssscript.com/"></div>

7. Customize the Query String.

<div class="ss-box" data-ss-social="messenger, pinterest, email" data-ss-messenger="app_id: 123456" data-ss-email="subject:A Great JavaScript Library"></div>

8. Customize the button styles.

// with no text
<div class="ss-box" data-ss-content="false"></div>
// circle button
<div class="ss-box ss-circle" data-ss-content="false"></div>
// flat button
<div class="ss-box ss-flat"></div>
// rounded button
<div class="ss-box ss-pill"></div>
// with shadows
<div class="ss-box ss-shadow"></div>
// dark button
<div class="ss-box ss-black"></div>
// grey button
<div class="ss-box ss-grey"></div>
// light button
<div class="ss-box ss-light"></div>
// have the same color
<div class="ss-box ss-strait ss-dark" data-ss-content="false"></div>

9. Customize the social icons.

// with no icon
<div class="ss-box" data-ss-icon="false"></div>
// custom icon
<div class="ss-box" data-ss-social="facebook, email" data-ss-icon-class="facebook:fab fa-facebook-messenger,email:fas fa-sms"></div>

10. Apply hover effects to those buttons.

// grow
<div class="ss-box ss-grow"></div>
// shrink
<div class="ss-box ss-shrink"></div>
// rotate
<div class="ss-box ss-rotate"></div>
// float
<div class="ss-box ss-float"></div>

11. Enable responsive check for share native ,messenger, viber and sms.

<div class="ss-box ss-responsive"></div>

Changelog:

v1.4 (06/21/2021)

• btn outline style