Js-share NPM | npm.io

JS-Share - social and messengers sharing

Easy to use social media share library. This project is intended to help you integrate sharing within your code.

Key features

Small size
Vanilla javascript
No dependency
IE9+, Chrome, Safari, Firefox support
CSS styling is up to you
Supports AMD/CommonJS

Installation

Package Managers

JavaScript Share supports npm under the name js-share.

npm install js-share --save

Direct download

Download 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.

Module Loaders

JavaScript Share can also be loaded as an AMD or CommonJS module.

Supported sharing platforms

Facebook
Twitter
LinkedIn
VK
OKru
Google+
GoogleBookmarks
Reddit
Tumblr
Pinterest
Weibo
Baidu
Mail.Ru
Line.me
Telegram
WhatsApp
Viber
Skype
Email

Basic Usage

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);
  });
}

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 is 626 pixels.
data-popup_height - popup height. Default is 436 pixels.

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).

More examples

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

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