Custom Social Share Buttons with JavaScript and HTML5 – sharer.js

Preview:

Description:

sharer.js is a JavaScript library which adds the social sharing capability to any DOM elements (buttons, links, etc). All the parameters can be passed via HTML5 data attributes.

Supported social media websites:

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

How to use it:

Just include the sharer.js library into your webpage and we’re ready to go.

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

Add the required CSS class ‘sharer’ to your element and create a custom Facebook button.

<button class="sharer"
        data-sharer="facebook" 
        data-url="https://google.com">
        Share on Facebook
</button>

Customize the social share links with the following Html5 data attributes.

• data-width: width of popup
• data-height: height of popup
• data-link: share element will work as a link
• data-blank: open in a new browser tab
• data-title
• data-url
• data-via: for Twitter and Buffer
• data-hashtags: for Twitter
• data-to: for email
• data-subject: for email
• data-image: for Pinterest, Weibo, and VK
• data-description: for Pinterest, Instapaper, Blogger, and Myspace
• data-caption: for Tumblr and VK
• data-tags: for Tumblr
• data-picture: for Butter
• data-appkey: for Weibo
• data-ralateuid: for Weibo

Changelog:

v0.5.1 (01/24/2022)

• Fixed whatsapp share on mobile devices

v0.5.0 (01/19/2022)

• Added 2 new data-* properties
• Removed following sharers
• Add missing title param to reddit sharer

09/15/2021

• v0.4.2

10/09/2020

• switched the url for whatsapp

11/19/2019

• Fix messenger

11/18/2019

• Add telegram web support for share

10/05/2019

• Add more social share APIs

10/03/2019

• Add Trello

10/02/2019

• Added Quora.

06/18/2019

• StumbleUpon has moved to Mix

v0.3.8 (04/08/2018)

• Update

v0.3.7 (03/29/2018)

• Update

v0.3.6 (92/26/2018)

• Update

v0.3.5 (11/01/2018)

• Update

v0.3.4 (10/23/2018)

• using hashtag for facebook share. Removing G+

v0.3.3 (08/07/2018)

• Use data-sharer attribute instead of redundant class