Author: | delfimov |
---|---|
Views Total: | 1,237 views |
Official Page: | Go to website |
Last Update: | February 10, 2021 |
License: | MIT |
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