Have ideas to improve npm?Join in the discussion! »

    share-buttons

    1.7.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

    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

    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

    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

    Install

    npm i share-buttons

    DownloadsWeekly Downloads

    133

    Version

    1.7.0

    License

    MIT

    Unpacked Size

    25.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar