Small Social Share Buttons With Vanilla JavaScript – JS-Share

Preview:

Description:

The JS-Share vanilla JS library makes it easier to create social share buttons using HTML data attributes.

Currently supports VK.com, ok.ru, facebook.com, Pinterest, Line, LinkedIn, livejournal.com, Reddit, Twitter, Google+, GoogleBookmarks, Tumblr, Weibo, Baidu, Mail.ru, Whatsapp, Telegram, Viber, Skype, Email.

How to use it:

Download and place the JavaScript file jsshare.js at the end of the document.

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

Create social share buttons and specify the Social Media Platforms in 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 done.

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 example:

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

All possible options which can be passed via 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
};

Changelog:

v2.3.1 (02/10/2021)

• Fix telegram share

10/31/2018

• New platforms added, bugfixes