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:
- Telegram
- Viber
- Tumblr
- Hackernews
- VK.com
- Buffer
- Line
- Instapaper
- Digg
- StumbleUpon
- Renren
- Myspace
- Blogger
- Baidu
- Ok.ru
- Evernote
- Skype
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-widthand
data-heightattributes.
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 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 Data attributes:
data-title
data-url
data-via
(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:
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:
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:
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:
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:
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:
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:
Available Data attributes:
data-url
data-image
(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:
Tumblr
Available Data attributes:
data-url
data-title
data-caption
(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>
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:
Available Data attributes:
data-url
<button class="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="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="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:
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:
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:
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:
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:
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:
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:
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:
Available Data attributes:
data-url
data-title
data-image
Absolute url for share image (optional)data-appkey
(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:
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:
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:
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:
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:
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:
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:
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:
Trello
Available Data attributes:
data-url
data-title
data-description
(optional)
<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: