Fast and Easy Social Sharing Buttons Shareable Library

SocialShareJS is a simple library to make your webpage shareable quickly and easily. It allows you to include the social sharing link of the main social network on your page.

Social Share JS JavaScript Library helps you create highly customizable social sharing buttons to share your content/webpage on popular social networks.

jquery social share popup, social share javascript, social media share buttons html, bootstrap social share plugin, social share php code

Features:

Custom query string
Link dedicated to sharing
Smart device scan (responsive)
Custom social icons

How to make use of 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 most recent Font Awesome for customized social icons.

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

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

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

4. You can even create the social share buttons by way of JavaScript.

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

5. Determine which social networks to allow.

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

6. Specify the URL to share. Defaults to the present web page.

<div class="ss-box" data-ss-link=" "></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 types.

// 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 these 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 examine for share native, messenger, Viber, and SMS.

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

Customizable Social Sharing Buttons, SocialShareJS Plugin/Github, instagram share button code in html, social share nodejs, social share popup html