Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Share Buttons 
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-buttonsinclude 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
| 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 | |
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