A simple jQuery Share plugin
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A simple jQuery social sharing plugin, styled with sass for easy customization


NPM / Yarn

npm install sharetastic --save
yarn add sharetastic


bower install --save jquery-sharetastic



Sharetastic makes use of the default OpenGraph meta tags to construct it's URLs:

<meta property="og:title" content="Title for your page" />
<meta property="og:description" content="Description for your page" />
<meta property="og:url" content="http://url/of/your/page" />
<meta property="og:image" content="https://path/to/the/main/image/for/your/page" />

You then just need a container somewhere in your body:

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

You can overwrite the above options with custom data attributes on our sharetastic container like so:

<div class="sharetastic" data-url="http://customurl" data-title="Custom title" data-description="Custom Description"></div>

You can also define a completely custom tweet like so:

<div class="sharetastic" data-tweet="Custom tweet text"></div>




There are a few options you can pass when you initialize 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: {
        order: 0,
        name: 'Facebook',
        href: 'http://facebook.com',
        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
  • WhatsApp
  • 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 four 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--text sharetastic--simple"></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.

Available variables

$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-whatsapp: #25D366 !default
$sharetastic-whatsapp-hover: darken($sharetastic-whatsapp, 10%) !default
$sharetastic-print: #0058a1 !default
$sharetastic-print-hover: darken($sharetastic-print, 10%) !default


Copyright (c) 2016 Simon Sturgess

Licensed under the MIT license.