Sharer.js is a lightweight js lib to create custom social share components on DOM elements for your website. No dependencies.

Installing:

Using NPM

npm install sharer.js

Grabbing the latest min version and adding to your page

<script src="path/to/sharer.min.js"></script>

Or you can use a CDN

<script src="https://cdn.jsdelivr.net/npm/sharer.js@latest/sharer.min.js"></script>

Adding share behaviour to a component

Sharer.js currently supports more than 20 social media sites:



Each sharer component has its own

data-*
attributes. Checkout specific elements below based on each social media site.

All sharer objects can accept the following attributes:

Manual event binding

Manual event binding is now supported from versions 0.3.1 and above through the window.Sharer object.

You can now dynamically bind share events using the sharer.js library. Example using jQuery:

                
$(elem).on('click', function() {
    // add new buttons with share behaviour
    $('#someDiv').append('<button class="twitter" data-title="Some button" data-url="somesite.com"></button>');
    window.Sharer.init();
})
                
      

Share components


Twitter:

Available custom attributes:

<button class="button" data-sharer="twitter" data-title="Checkout Sharer.js!" data-hashtags="awesome, sharer.js" data-url="https://ellisonleao.github.io/sharer.js/">Share on Twitter</button>

Example:

Facebook:

Available custom attributes:

<button class="button" data-sharer="facebook" data-hashtag="hashtag" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>

Example:

Linkedin:

<button class="button" data-sharer="linkedin" data-url="https://ellisonleao.github.io/sharer.js/">Share on Linkedin</button>

Example:

Email

Available custom attributes:

<button class="button" data-sharer="email" data-title="Awesome Url" data-url="https://ellisonleao.github.io/sharer.js/" data-subject="Hey! Check out that URL" data-to="some@email.com">Share via Email</button>

Example:

WhatsApp

<button class="button" data-sharer="whatsapp" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Whatsapp</button>

Available custom attributes:

Example:


Telegram

<button class="button" data-sharer="telegram" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/" >Share on Telegram</button>

Example:

Viber

<button class="button" data-sharer="viber" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Viber</button>

Example:

Pinterest

Available custom attributes:

<button class="button" data-sharer="pinterest" data-url="https://ellisonleao.github.io/sharer.js/">Share on Pinterest</button>

Example:

Tumblr

Available custom attributes:

Example:

<button class="button" data-sharer="tumblr" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-tags="social,share,testing" data-url="https://ellisonleao.github.io/sharer.js/">Share on Tumblr</button>

Hackernews

Available custom attributes:

<button class="button" data-sharer="hackernews" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Hackernews</button>

Example:

Reddit

<button class="button" data-sharer="reddit" data-url="https://ellisonleao.github.io/sharer.js/">Share on Reddit</button>

Example:

VK

Available custom attributes:

<button class="button" data-sharer="vk" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on VK</button>

Example:

Buffer

Available custom attributes:

<button class="button" data-sharer="buffer" data-via="ellisonleao" data-picture="https://ellisonleao.github.io/sharer.js/img/socialbg.png" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/">Share on Buffer</button>

Example:

Xing

<button class="button" data-sharer="xing" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/">Share on Xing</button>

Example:

Line

<button class="button" data-sharer="line" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/">Share on Line</button>

Example:

Instapaper

Available custom attributes:

<button class="button" data-sharer="instapaper" data-title="Checkout Sharer.js!" data-description="Awesome lib!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Instapaper</button>

Example:

Pocket

<button class="button" data-sharer="pocket" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Pocket</button>

Example:

Flipboard

<button class="button" data-sharer="flipboard" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Flipboard</button>

Example:

Weibo

Available custom attributes:

<button class="button" data-sharer="weibo" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Weibo</button>

Example:

Blogger

Available custom attributes:

<button class="button" data-sharer="blogger" data-url="https://ellisonleao.github.io/sharer.js/" data-description="Awesome lib!">Share on blogger</button>

Example:

Baidu

<button class="button" data-sharer="baidu" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on baidu</button>

Example:

Ok.ru

<button class="button" data-sharer="okru" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on Ok.ru</button>

Example:

Evernote

<button class="button" data-sharer="evernote" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on Evernote</button>

Example:

Skype

<button class="button" data-sharer="skype" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on skype</button>

Example:

Trello

Available custom attributes:

<button class="button" data-sharer="trello" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Create social share elements on DOM objects">Share on Trello</button>

Example:

Diaspora

<button class="button" data-sharer="diaspora" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Create social share elements on DOM objects">Share on Diaspora</button>

Example: