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):
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
- VK
- OKru
- Google+
- GoogleBookmarks
- Tumblr
- Baidu
- Mail.Ru
- Line.me
- Telegram
- Viber
- Skype
Basic Usage
HTML code:
Share: Facebook Twitter VK.com OK.ru Mail.Ru Google+ Google Bookmarks LiveJournal Tumblr Pinterest LinkedIn Reddit Mail.ru Weibo Line.me Skype Telegram Whatsapp Viber Email
Javascript code:
;var shareItems = document;for var i = 0; i < shareItemslength; i += 1 shareItemsi;
or
;var shareItems = document;JSShareoptionsurl = "http://www.example.com/fancy/url";for var i = 0; i < shareItemslength; i += 1 shareItemsi;
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 is626
pixels.data-popup_height
- popup height. Default is436
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
Telegram Whatsapp Viber
or
VK.com Facebook OK.ru
License
MIT © Dmitry Elfimov.