#Sharetastic
A simple jQuery social sharing plugin, styled with sass for easy customization http://dahliacreative.github.io/sharetastic/
##Installation
###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:
- Instagram (Disabled by default, Required Param: href. To be used as social link only.)
- Google Plus
- Tumblr
- Flickr (Disabled by default, Required Param: href. To be used as social link only.)
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-print: #0058a1 !default
$sharetastic-print-hover: darken($sharetastic-print, 10%) !default
##License Copyright (c) 2016 Simon Sturgess
Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent