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>For Meteor Users:
meteor add ellisonleao:sharerjs
Licenses
Commercial License
If you want to use Sharer.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about UpLabs commercial licensing.
Open Source License
The open source license is designed for you to use Sharer.js to build open source and personal projects. The Sharer.js open source license is GPLv3. The GPLv3 has many terms, but the most important is how it is sticky when you distribute your work publicly. From the GPL FAQ:
If you release the modified version to the public in some way, the GPL requires you to make the modified source code available to the program's users, under the GPL.
Releasing your project that uses Sharer.js under the GPLv3, in turn, requires your project to be licensed under the GPLv3. If you are okay with this, feel free to use Sharer.js under the GPLv3, without purchasing a commercial license.
Adding share behaviour to a component
Sharer.js currently supports more than 20 social media sites:
- Google Plus
- Telegram
- Viber
- Tumblr
- Hackernews
- VK.com
- Buffer
- Line
- Instapaper
- Digg
- StumbleUpon
- Renren
- Myspace
- Blogger
- Baidu
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="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>Share components
Twitter:
Available Data attributes:
data-titledata-urldata-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:
Available Data attributes:
data-titledata-urldata-todata-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-titledata-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:
Telegram
Available Data attributes:
data-titledata-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-titledata-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-urldata-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-urldata-titledata-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-urldata-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-urldata-titledata-imageAbsolute 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-urldata-titledata-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:
Available Data attributes:
data-urldata-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-urldata-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-urldata-titledata-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:
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-titledata-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:
Available Data attributes:
data-titledata-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:
Available Data attributes:
data-urldata-titledata-imageAbsolute url for share image (optional)data-appkey(optional)data-ralateuid(optional)
<button class="sharer button" data-sharer="flipboard" 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-urldata-titledata-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-urldata-titledata-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-urldata-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: