Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including share-buttons with all npm packages installed. Try it out:

var shareButtons = require("share-buttons")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

share-buttons v1.5.0

Simple social buttons for your site.

Share Buttons npm license

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

Install

NPM:

npm i share-buttons

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

<script src="<path>/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!!

Share via

Networkdata-id
Facebookfb
VKvk
Twittertw
Telegramtg
Pocketpk
Redditre
Evernoteev
LinkedInin
Pinterestpi
Skypesk
WhatsAppwa
Odnoklassnikiok
Tumblrtu
Hacker Newshn
Xingxi
EMailmail
Printprint

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

© 2015 - 2020 Yauheni Pakala

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free