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

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 those elements below based on each social media site.

You can also set the popups sizes by adding

data-width

data-height

andattributes.

Example:

<button class="button" data-sharer="somesharer" data-width="800" data-height="600" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share!</button>

Manual event binding

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

You can now dinamically 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 Data attributes: data-title

data-url

data-via (optional: twitter username without @)

(optional: twitter username without @) data-hashtags (optional: comma separated hashtags) <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: Share on Twitter

Facebook: Available Data attributes: data-url

data-hashtag (optional: Single hashtag without #) <button class="button" data-sharer="facebook" data-hashtag="hashtag" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button> Example: Share on Facebook

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

Email Available Data attributes: data-title

data-url

data-to

data-subject <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: Share via Email

WhatsApp Available Data attributes: data-title

data-url

data-web (Optional: If its enabled, it will share the link on whatsapp web) <button class="button" data-sharer="whatsapp" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Whatsapp</button> Example: Share on Whatsapp



Share on Whatsapp web

Telegram Available Data attributes: data-title

data-url

data-to (Phone number) <button class="button" data-sharer="telegram" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/" data-to="+44555-5555">Share on Telegram</button> Example: Share on Telegram

Viber Available Data attributes: data-title

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

Pinterest Available Data attributes: data-url

data-image (optional: absolute image url)

(optional: absolute image url) data-description (optional) <button class="button" data-sharer="pinterest" data-url="https://ellisonleao.github.io/sharer.js/">Share on Pinterest</button> Example: Share on Pinterest

Tumblr Available Data attributes: data-url

data-title

data-caption (optional)

(optional) data-tags (optional: comma separated tags) 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> Share on Tumblr

Hackernews Available Data attributes: data-url

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

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

VK Available Data attributes: data-url

data-title

data-image Absolute url for the share image (optional)

Absolute url for the share image (optional) data-caption (optional) <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: Share on VK

Buffer Available Data attributes: data-url

data-title

data-via (twitter username)

(twitter username) data-picture (If picture url is set, the link meta be replaced) <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: Share on Buffer

Xing Available Data attributes: data-url

data-title <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: Share on Xing

Line Available Data attributes: data-url

data-title <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: Share on Line

Instapaper Available Data attributes: data-url

data-title

data-description <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: Share on Instapaper

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

Digg Available Data attributes: data-url <button class="button" data-sharer="digg" data-url="https://ellisonleao.github.io/sharer.js/">Share on Digg</button> Example: Share on Digg

StumbleUpon Available Data attributes: data-title

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

Flipboard Available Data attributes: data-title

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

Weibo Available Data attributes: data-url

data-title

data-image Absolute url for share image (optional)

Absolute url for share image (optional) data-appkey (optional)

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

Renren Available Data attributes: data-url <button class="button" data-sharer="renren" data-url="https://ellisonleao.github.io/sharer.js/">Share on renren</button> Example: Share on renren

Myspace Available Data attributes: data-url

data-title

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

Blogger Available Data attributes: data-url

data-title

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

Baidu Available Data attributes: data-url

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

Ok.ru Available Data attributes: data-url

data-title <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: Share on Ok.ru

Evernote Available Data attributes: data-url

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

Skype Available Data attributes: data-url

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