Author: | assisfery |
---|---|
Views Total: | 772 views |
Official Page: | Go to website |
Last Update: | June 21, 2021 |
License: | MIT |
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:
- Messenger
- Viber
- Telegram
- Tumblr
- 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