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

See Demo And Download