A simple jQuery social share plugin

See it in action

Get Started


bower install --save jquery-sharetastic



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




There are a few options you can pass when you initialise sharetastic, these are:

Option Description Default
sprite Path to sprite "sharetastic.svg
popup Makes links open in a popup window true
services Object of services, you can add custom ones or overwrite elements of the default services
    sprite: "sharetastic.svg",
    popup: true,
    services: {
      facebook: {
        name: 'Facebook',
        href: '',
        icon: {
          width: 10,
          height: 19,
          id: 'sharetastic-facebook'

To disable a service, simply set it to false:

    services: {
      facebook: false

Sharer links are auto generated for available services by default, however you can overwrite these if you wish to use sharetastic simply for social links. Current available services are:

  • Facebook
  • Instagram (Disabled by default, Required Param: href. To be used as social link only.)
  • Twitter
  • Pinterest
  • LinkedIn
  • Google Plus
  • Tumblr
  • Flickr (Disabled by default, Required Param: href. To be used as social link only.)
  • Email
  • Print

Sharetastic, ajax's in the sprite and caches it in localStorage, if you make amends to the sprite during development, you'll have to clear your localStorage.


There are three themes for sharetastic, default simple reversed and text. To use a theme other than the default one, simply add it's modifier class like so:

<div class="sharetastic sharetastic--simple"></div>
<div class="sharetastic sharetastic--reversed"></div>
<div class="sharetastic sharetastic--text"></div>

Or use a combination:

<div class="sharetastic sharetastic--simple sharetastic--text"></div>

Adding a label

If you wish to add a label to sharetastic, simply place it inside your sharetastic container like so, I suggest giving it a BEM class which follows the sharetastic naming convention:

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


Sharetastic has been written to be easily customized using Sass variables. To overwrite the defaults simply define your variables before the inclusion of sharetastic.sass.


$sharetastic-font-size: 13px !default
$sharetastic-font-color: #ccc !default
$sharetastic-font: sans-serif !default
$sharetastic-text-transform: capitalize !default

$sharetastic-alignment: center !default
$sharetastic-gutter: 4px !default
$sharetastic-size: 32px !default
$sharetastic-padding: 5px 10px !default
$sharetastic-icon-margin: 0px !default
$sharetastic-border-radius: 50% !default
$sharetastic-icon-fill: #fff !default

$sharetastic-facebook: #3a5795 !default
$sharetastic-facebook-hover: darken($sharetastic-facebook, 10%) !default
$sharetastic-instagram: #e1306c !default
$sharetastic-instagram-hover: darken($sharetastic-instagram, 10%) !default
$sharetastic-twitter: #1da1f2 !default
$sharetastic-twitter-hover: darken($sharetastic-twitter, 10%) !default
$sharetastic-pinterest: #bd081c !default
$sharetastic-pinterest-hover: darken($sharetastic-pinterest, 10%) !default
$sharetastic-linkedin: #0077b5 !default
$sharetastic-linkedin-hover: darken($sharetastic-linkedin, 10%) !default
$sharetastic-googleplus: #c53929 !default
$sharetastic-googleplus-hover: darken($sharetastic-googleplus, 10%) !default
$sharetastic-tumblr: #35465c !default
$sharetastic-tumblr-hover: darken($sharetastic-tumblr, 10%) !default
$sharetastic-flickr: #ff0084 !default
$sharetastic-flickr-hover: darken($sharetastic-flickr, 10%) !default
$sharetastic-email: #b8213b !default
$sharetastic-email-hover: darken($sharetastic-email, 10%) !default
$sharetastic-print: #0058a1 !default
$sharetastic-print-hover: darken($sharetastic-print, 10%) !default