Press "Enter" to skip to content

Easy To Use Social Media Share Library With Vanilla JavaScript | JS-Share

This social media sharing project aims to help you incorporate sharing into your code. Supports Facebook, Reddit, Twitter, Telegram, Whatsapp, VK, OK.ru, and many more.

social share, social share js library, social media share buttons html, social share button, sharethis, social share javascript code, social media share buttons, social sharing tools

Social Media Share Buttons Component Library Plugin | vue-goodshare

How to make use of it:

Download and place the JavaScript file jsshare.js on the finish of the doc.

<script src="jsshare.js"></script>

Create social share buttons and specify the Social Media Platforms within the data-type attribute as these:

<button class="social_share" data-type="fb">Facebook</button>
<button class="social_share" data-type="twitter">Twitter</button>
<button class="social_share" data-type="vk">VK.com</button>
<button class="social_share" data-type="ok">OK.ru</button>
<button class="social_share" data-type="mailru">Mail.Ru</button>
<button class="social_share" data-type="googlebookmarks">Google Bookmarks</button>
<button class="social_share" data-type="livejournal">LiveJournal</button>
<button class="social_share" data-type="tumblr">Tumblr</button>
<button class="social_share" data-type="pinterest">Pinterest</button>
<button class="social_share" data-type="linkedin">LinkedIn</button>
<button class="social_share" data-type="reddit">Reddit</button>
<button class="social_share" data-type="weibo">Weibo</button>
<button class="social_share" data-type="line">Line.me</button>
<button class="social_share" data-type="skype">Skype</button>
<button class="social_share" data-type="telegram">Telegram</button>
<button class="social_share" data-type="whatsapp">Whatsapp</button>
<button class="social_share" data-type="viber">Viber</button>
<button class="social_share" data-type="email">Email</button>

Initialize the JS-Share and achieved.

document.addEventListener("DOMContentLoaded", function(event) {
  var buttons = document.querySelectorAll(".social_share");
  for(var i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', function() {
        return JSShare.go(this);
    }, false);
  }
});

Inline instance:

<a href="#" onclick="return JSShare.go(this)" data-type="fb" data-fb-api-id="123">I like it</a>

All attainable choices will be handled through data-option attributes:

{
  type:        'vk',           // share type
  fb_api_id:   '',             // Facebook API id
  url:         '',             // url to share
  title:       document.title, // title to share
  image:       '',             // image to share
  text:        '',             // text to share
  utm_source:  '',
  utm_medium:  '',
  utm_campaign:'',
  popup_width: 626,
  popup_height:436
};

Small Social Share Buttons, JS-Share – social and messengers sharing Plugin/Github

JS-Share-Social-Share-Buttons


See Demo And Download

Official Website(delfimov): Click Here

This superior jQuery/javascript plugin is developed by delfimov. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *