Sharetastic

Installation

bower install --save jquery-sharetastic

Usage

HTML

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

JS

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

Options

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

Themes

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>
</div>

Customisation

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.

SASS VARIABLES