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

Category: Javascript , Recommended , Social Media | June 18, 2019
Author: ellisonleao
Views Total: 4,125
Official Page: Go to website
Last Update: June 18, 2019
License: GPL-3.0

Preview:

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

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
  • Digg
  • StumbleUpon (Mix.com)
  • Flipboard
  • Weibo
  • Renren
  • Myspace
  • Blogger
  • Baidu
  • Ok.ru

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-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:

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

You Might Be Interested In:


One thought on “Custom Social Share Buttons with JavaScript and HTML5 – sharer.js

  1. Arif

    In case some is interested in Sharing to Facebook Messenger:
    messenger: {
    shareUrl: ‘https://www.facebook.com/dialog/send’,
    params: {
    link: this.getValue(‘url’),
    app_id: [FB_APP_ID],
    redirect_uri: ‘http://www.domain.com’,
    display: ‘popup’
    }
    }

    Reply

Leave a Reply