JSPM – share-buttons@1.9.0

Package Exports

share-buttons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (share-buttons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple, powerful, customizable and super lightweight (1 Kb Gzip) social buttons for your site.

Demo

Browser support

Google Chrome
Mozilla Firefox 3.5+
Opera 10+
Safari 3.2+
IE 8+
Android
iOS

Copy to clipboard is not supported on IE, see browser compatibility for more information

WebShare API is only partially supported, see browser compatibility for more information

Install

Available in NPM

npm i share-buttons

include share-buttons.js in the end of page:

<script src="<path>/dist/share-buttons.js"></script>

Getting the library from CDN

<script src="//cdn.jsdelivr.net/npm/share-buttons/dist/share-buttons.js"></script>

Paste this HTML on the page:

<div class="share-btn">
    <a class="btn-vk" data-id="vk">VK</a>
    <a class="btn-facebook" data-id="fb">Facebook</a>
    <a class="btn-twitter" data-id="tw">Twitter</a>
    <a class="btn-telegram" data-id="tg">Telegram</a>
    <a class="btn-mail" data-id="mail">EMail</a>
</div>

Added styles:

.share-btn > a {
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 12px;
    font-family: Verdana, Arial;
}
.share-btn > a:hover {
    cursor: pointer;
}

Profit!!

Network	`data-id`
Facebook	fb
VK	vk
Twitter	tw
Telegram	tg
Pocket	pk
Reddit	re
Evernote	ev
LinkedIn	in
Pinterest	pi
Skype	sk
WhatsApp	wa
Odnoklassniki	ok
Tumblr	tu
Hacker News	hn
Xing	xi
EMail	mail
Print	print
Copy	copy
WebShare API	share

Customizing

Custom 'url', 'title', 'description':

<div class="share-btn" data-url="https://..." data-title="..." data-desc="...">
    <a class="btn-vk" data-id="vk">VK</a>
    <a class="btn-facebook" data-id="fb">Facebook</a>
    <a class="btn-twitter" data-id="tw">Twitter</a>
    <a class="btn-telegram" data-id="tg">Telegram</a>
    <a class="btn-mail" data-id="mail">EMail</a>
</div>

Styles - full customization.

Examples

If you are using Font-Awesome:

<div class="share-btn" data-url="https://..." data-title="..." data-desc="...">
    <a class="btn-vk" data-id="vk"><i class="fab fa-vk"></i> VK</a>
    <a class="btn-facebook" data-id="fb"><i class="fab fa-facebook-square"></i> Facebook</a>
    <a class="btn-twitter" data-id="tw"><i class="fab fa-twitter"></i> Twitter</a>
    <a class="btn-telegram" data-id="tg"><i class="fab fa-telegram"></i> Telegram</a>
    <a class="btn-mail" data-id="mail"><i class="fas fa-at"></i> EMail</a>
</div>

You can also use simple-icons.

share-buttons