Get In Touch
541 Melville Ave, Palo Alto, CA 94301,
[email protected]
Ph: +1.831.705.5448
Work Inquiries
[email protected]
Ph: +1.831.306.6725

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

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

or

document.addEventListener("DOMContentLoaded", function(event) {
  var shareItems = document.querySelectorAll('.social_share');
  var isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
    || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
  var isAndroid = /(android)/i.test(navigator.userAgent);
  var options = {};
  if (isIOS || isAndroid) {
    options.link_telegram = 'tg://msg';
    options.link_whatsapp = 'whatsapp://send';
  }
  for (var i = 0; i < shareItems.length; i += 1) {
    shareItems[i].addEventListener('click', function share(e) {
      console.log(this);
      return JSShare.go(this, options);
    });
  }
});

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>

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>

License

MIT © Dmitry Elfimov.

Credit : https://github.com/delfimov/JS-Share

© 2020, by @Devvv.
Let it go! <3
We use cookies to give you the best experience.