share-buttons

    1.9.0 • Public • Published

    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

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

    Share via

    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.


    © 2015+ Yauheni Pakala and contributors | MIT

    Install

    npm i share-buttons

    DownloadsWeekly Downloads

    870

    Version

    1.9.0

    License

    MIT

    Unpacked Size

    30.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • wcoder