Minimal jQuery Social Share Button Plugin For jQuery - Sharetastic

Sharetastic is a simple and lightweight jQuery plugin that displays custom social share buttons with SVG based social icons to share your content on Facebook, Twitter, Linkedin, WhatsApp, Pinterest, Instagram, Flickr, Print, and Email.

Features:

• Dead simple to use.
• 3 built-in themes.
• Fully customizable via Sass variables.

How to use it:

1. Download and include the jQuery Sharetastic plugin's files after you have jQuery library included.

<link rel="stylesheet" href="sharetastic.css">
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="sharetastic.js"></script>

2. Create a div container in which you want to place the social share buttons.

<div class="sharetastic"></div>

3. Initialize the plugin and done.

$('.sharetastic').sharetastic();

4. Change the default theme by add the following CSS classes to the div container.

<div class="sharetastic sharetastic--simple"></div>
<div class="sharetastic sharetastic--reversed" style="background-color: #000;"></div>

5. Enable / disable social networks you prefer.

$('.sharetastic').sharetastic({
  feed: {
    facebook: true,
    twitter: true,
    linkedin: true,
    email: true
  }
});

6. Customize the content you want to share.

$('.sharetastic').sharetastic({
  customFeeds: {
    myCustomFeed: {
      class: 'sharetastic__button sharetastic__button--myCustomFeed',
      href: 'http://myCustomFeed.com',
      target: '_blank',
      icon: '<svg width="10" height="19" class="sharetastic__icon"><use xlink:href="#myCustomFeed"/></svg>'
    }
  },
});

7. Add a custom label to the sharetastic.

<div class="sharetastic">
  <span class="sharetastic__label">Share this:</span>
</div>

8. Full config options.

popup: true,
services: {
  facebook: {
      order: 0,
      name: 'Facebook',
      href: 'https://www.facebook.com/sharer/sharer.php?' + this.generateUrl('u=') + this.generateTitle('&title=') + this.generateDescription('&description='),
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-facebook'
      }
  },
  instagram: false,
  twitter: {
      order: 2,
      name: 'Twitter',
      href: 'http://twitter.com/home?status=' + this.generateTitle() + this.generateUrl(' - '),
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-twitter'
      }
  },
  pinterest: {
      order: 3,
      name: 'Pinterest',
      href: 'http://pinterest.com/pin/create/link/?' + this.generateUrl('url=') + this.generateTitle('&description=') + this.generateImage('&media='),
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-pinterest'
      }
  },
  linkedin: {
      order: 4,
      name: 'LinkedIn',
      href: 'https://www.linkedin.com/shareArticle?mini=true' + this.generateUrl('&url=') + this.generateTitle('&title=') + this.generateDescription('&summary='),
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-linkedin'
      }
  },
  googleplus: {
      order: 5,
      name: 'Google +',
      href: 'https://plus.google.com/share?' + this.generateUrl('url='),
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-googleplus'
      }
  },
  flickr: false,
  tumblr: {
      order: 7,
      name: 'Tumblr',
      href: 'http://www.tumblr.com/share/link?' + this.generateUrl('&url=') + this.generateTitle('&name=') + this.generateDescription('&description='),
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-tumblr'
      }
  },
  email: {
      order: 8,
      name: 'Email',
      href: 'mailto:?Body=' + this.page.title + '%0A' + this.page.description + '%0A' + this.page.url,
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-email'
      }
  },
  whatsapp: {
      order: 8,
      name: 'WhatsApp',
      href: 'https://api.whatsapp.com/send?text=' + this.page.title + ' - ' + this.page.description + ' ' + this.page.url,
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-whatsapp'
      }
  },
  print: {
      order: 9,
      name: 'Print',
      href: 'window.print()',
      icon: {
          width: 32,
          height: 32,
          id: 'sharetastic-print'
      }
  }
}

Changelog:

2020-09-24

• tweet url update

2018-02-21

• tweet url update

2017-10-12

• whatsApp share added

2017-10-06

• fixing classlist in ie

2017-09-23

• Fixing popup link click

2017-06-05

• fixing sass class name error for hiding sprite

2017-05-23

• removing rogue log

2017-04-19

• removing sprite from localstorage

2016-10-29

• Adding option for custom data attributes to overwrite og tags

2016-09-27

• Changed sort property to order

2016-09-17

• Added twitter description back in

2016-09-16

• Update to wrap prototype in jquery function, and uriencode query string params

2016-09-14

• Adding instgram to sass

2016-08-24

• Removing description from twitter url

2016-07-28

• IE fix for button
• Linkedin color correction

2016-07-27

• Adding text theme for buttons and adding tumblr

2016-07-15

• adding pinterest flickr and instagram

---

This awesome jQuery plugin is developed by dahliacreative. For more Advanced Usages, please check the demo page or visit the official website.