Easy to use social media share library. This project is intended to help you integrate sharing within your code.
- Small size
- Vanilla javascript
- No dependency
- IE9+, Chrome, Safari, Firefox support
- CSS styling is up to you
- Supports AMD/CommonJS
JavaScript Share supports npm under the name js-share.
npm install js-share --saveDownload the script here and include it (unless you are packaging scripts somehow else):
<script src="/path/to/jsshare.js"></script>Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.
JavaScript Share can also be loaded as an AMD or CommonJS module.
- VK
- OKru
- Google+
- GoogleBookmarks
- Tumblr
- Baidu
- Mail.Ru
- Line.me
- Telegram
- Viber
- Skype
HTML code:
<div>Share:
<button class="btn btn-default social_share" data-type="fb">Facebook</button>
<button class="btn btn-default social_share" data-type="twitter">Twitter</button>
<button class="btn btn-default social_share" data-type="vk">VK.com</button>
<button class="btn btn-default social_share" data-type="ok">OK.ru</button>
<button class="btn btn-default social_share" data-type="mailru">Mail.Ru</button>
<button class="btn btn-default social_share" data-type="gplus">Google+</button>
<button class="btn btn-default social_share" data-type="googlebookmarks">Google Bookmarks</button>
<button class="btn btn-default social_share" data-type="livejournal">LiveJournal</button>
<button class="btn btn-default social_share" data-type="tumblr">Tumblr</button>
<button class="btn btn-default social_share" data-type="pinterest">Pinterest</button>
<button class="btn btn-default social_share" data-type="linkedin">LinkedIn</button>
<button class="btn btn-default social_share" data-type="reddit">Reddit</button>
<button class="btn btn-default social_share" data-type="mailru">Mail.ru</button>
<button class="btn btn-default social_share" data-type="weibo">Weibo</button>
<button class="btn btn-default social_share" data-type="line">Line.me</button>
<button class="btn btn-default social_share" data-type="skype">Skype</button>
<button class="btn btn-default social_share" data-type="telegram">Telegram</button>
<button class="btn btn-default social_share" data-type="whatsapp">Whatsapp</button>
<button class="btn btn-default social_share" data-type="viber">Viber</button>
<button class="btn btn-default social_share" data-type="email">Email</button>
</div>Javascript code:
import JSShare from "js-share";
var shareItems = document.querySelectorAll('.social_share');
for (var i = 0; i < shareItems.length; i += 1) {
shareItems[i].addEventListener('click', function share(e) {
return JSShare.go(this);
});
}or
import JSShare from "js-share";
var shareItems = document.querySelectorAll('.social_share');
JSShare.options.url = "http://www.example.com/fancy/url";
for (var i = 0; i < shareItems.length; i += 1) {
shareItems[i].addEventListener('click', function share(e) {
return JSShare.go(this);
});
}See working demo example.html.
Data attributes:
data-type- where to share. Required.data-url- URL to share. Default value is the current page location (location.href).data-title- title to share. Default is the current page title (document.title).data-text- share description. Only for vk, ok, googlebookmarks, lj, tumblr, linkedin, mailru, email.data-utm_source- utm_source for links. Default is none.data-utm_medium- utm_medium for links. Default is none.data-utm_campaign- utm_campaign for links. Default is none.data-popup_width- popup width. Default is626pixels.data-popup_height- popup height. Default is436pixels.
Same options could be used on script initialization.
data-title and data-text are optional and will be ignored by some services.
Social networks usually get all required data from Open Graph metadata (og:* tags).
<button class="social_share" utm_source="messengers" data-utm_medium="telegram" data-type="telegram">Telegram</button>
<button class="social_share" utm_source="messengers" data-utm_medium="whatsapp" data-type="whatsapp">Whatsapp</button>
<button class="social_share" utm_source="messengers" data-utm_medium="viber" data-type="viber">Viber</button>or
<button class="social_share" utm_source="messengers" data-utm_medium="vk" data-url="http://www.example.com/fancy/url" data-type="vk">VK.com</button>
<button class="social_share" utm_source="messengers" data-utm_medium="fb" data-url="http://www.example.com/fancy/url" data-type="fb">Facebook</button>
<button class="social_share" utm_source="messengers" data-utm_medium="ok" data-url="http://www.example.com/fancy/url" data-type="ok">OK.ru</button>MIT © Dmitry Elfimov.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent