Simple, powerful, customizable and super lightweight social buttons for your site
MIT License
Simple, powerful, customizable and super lightweight (1 Kb Gzip) social buttons for your site.
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
npm i share-buttons
include share-buttons.js
in the end of page:
<script src="<path>/dist/share-buttons.js"></script>
<script src="//cdn.jsdelivr.net/npm/share-buttons/dist/share-buttons.js"></script>
Paste this HTML on the page:
<div class="share-btn">
<a data-id="vk">VK</a>
<a data-id="fb">Facebook</a>
<a data-id="tw">Twitter</a>
<a data-id="tg">Telegram</a>
<a 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 |
---|---|
fb | |
VK | vk |
tw | |
Telegram | tg |
pk | |
re | |
Evernote | ev |
in | |
pi | |
Skype | sk |
wa | |
Odnoklassniki | ok |
Tumblr | tu |
Hacker News | hn |
xi | |
Copy | copy |
WebShare API | share |
Custom 'url', 'title', 'description':
<div class="share-btn" data-url="https://..." data-title="..." data-desc="...">
<a data-id="vk">VK</a>
<a data-id="fb">Facebook</a>
<a data-id="tw">Twitter</a>
<a data-id="tg">Telegram</a>
<a data-id="mail">EMail</a>
</div>
Styles - full customization.
If you are using Font-Awesome:
<div class="share-btn" data-url="https://..." data-title="..." data-desc="...">
<a data-id="vk"><i class="fab fa-vk"></i> VK</a>
<a data-id="fb"><i class="fab fa-facebook-square"></i> Facebook</a>
<a data-id="tw"><i class="fab fa-twitter"></i> Twitter</a>
<a data-id="tg"><i class="fab fa-telegram"></i> Telegram</a>
<a data-id="mail"><i class="fas fa-at"></i> EMail</a>
</div>
You can also use simple-icons.
© 2015+ Yauheni Pakala and contributors | MIT