Sharetastic

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

Installation

NPM / Yarn

npm install sharetastic --save
yarn add sharetastic

Bower

bower install --save jquery-sharetastic

Usage

HTML

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>

JS

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

Options

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

Example

  {
    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.

Themes

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

Customization

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

License

Copyright (c) 2016 Simon Sturgess

Licensed under the MIT license.