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

Using Bower

bower 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/sharer.js/latest/sharer.min.js"></script>

Adding share behaviour to a component

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

Twitter
Facebook
Linkedin
Google Plus
Email
Whatsapp
Telegram
Viber
Pinterest
Tumblr
Hackernews
Reddit
VK.com
Buffer
Xing
Line
Instapaper
Pocket
Digg
StumbleUpon
Flipboard
Weibo
Renren
Myspace
Blogger
Baidu
Ok.ru

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

and

data-height

attributes.

Example:

<button class="sharer 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="sharer 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 @)
data-hashtags (optional: comma separated hashtags)

<button class="sharer 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 Data attributes:

data-url

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

Example:

Linkedin:

Available Data attributes:

data-url

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

Example:

Google Plus:

Available Data attributes:

data-url

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

Example:

Email

Available Data attributes:

data-title
data-url
data-to
data-subject

<button class="sharer 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:

Available Data attributes:

data-title
data-url

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

Example:

Available Data attributes:

data-title
data-url

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

Example:

Viber

Available Data attributes:

data-title
data-url

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

Example:

Available Data attributes:

data-url
data-image (optional: absolute image url)
data-description (optional)

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

Example:

Tumblr

Available Data attributes:

data-url
data-title
data-caption (optional)
data-tags (optional: comma separated tags)

Example:

<button class="sharer 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 Data attributes:

data-url
data-title

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

Example:

Available Data attributes:

data-url

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

Example:

VK

Available Data attributes:

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

<button class="sharer 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 Data attributes:

data-url
data-title
data-via (twitter username)
data-picture (If picture url is set, the link meta be replaced)

<button class="sharer 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

Available Data attributes:

data-url
data-title

<button class="sharer 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

Available Data attributes:

data-url
data-title

<button class="sharer 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 Data attributes:

data-url
data-title
data-description

<button class="sharer 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

Available Data attributes:

data-url

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

Example:

Digg

Available Data attributes:

data-url

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

Example:

StumbleUpon

Available Data attributes:

data-title
data-url

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

Example:

Flipboard

Available Data attributes:

data-title
data-url

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

Example:

Weibo

Available Data attributes:

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

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

Example:

Renren

Available Data attributes:

data-url

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

Example:

Myspace

Available Data attributes:

data-url
data-title
data-description

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

Example:

Blogger

Available Data attributes:

data-url
data-title
data-description

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

Example:

Baidu

Available Data attributes:

data-url
data-title

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

Example:

Ok.ru

Available Data attributes:

data-url
data-title

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

Example:

Sharer.js

Create custom social share elements on DOM objects

Installing:

Using NPM

Using Bower

Grabbing the latest min version and adding to your page

Adding share behaviour to a component

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

Manual event binding

Share components

Twitter:

Facebook:

Linkedin:

Google Plus:

Email

WhatsApp

Telegram

Viber

Pinterest

Tumblr

Hackernews

Reddit

VK

Buffer

Xing

Line

Instapaper

Pocket

Digg

StumbleUpon

Flipboard

Weibo

Renren

Myspace

Blogger

Baidu

Ok.ru