Social Share Kit - Social sharing buttons, icons and popups
Description: Library of decent and good looking social sharing icons, buttons and popups

Tweet

## Overview

Social Share Kit is a library of decent and good looking CSS/JavaScript social sharing tools like social network icons, share buttons, share count, floating/sticky button bar and popups.

It is open-source library hosted on github, yet licensed under Creative Commons Attribution-NonCommercial 3.0 license.
Read more about License and Pricing.

###
Upcoming features
Features

- Retina ready with font icons
- Use standalone icons or in groups
- 4x sizing options
- IE8+, Chrome, Firefox, Safari
- No jQuery dependency

- Mobile / Responsive sticky share icon bars
- Bootstrap 3 glyphicons and Font Awesome icons support
- JavaScript for share and delayed popups included
- Add more icons with LESS CSS mixins
- Lightweight: Font - 6KB, CSS - 11KB, JS: 5KB

## Examples

### Share icons

### With count

### Icons only

### Inline & standalone

Icons can be also used separately

### With text

Twitter Twitter Share Share with Twitter Log in with Google Go to settings for example Remind me later This i like Fork me

#### Aligned within group:

Sign in with Facebook Sign in with Twitter Sign in with Google

### Round & rounded

### Grayscale

### Bootstrap glyphicons support

### Font Awesome icons support

### Extra colors Colors by Flat UI Colors

### Extra icons

### Floating/sticky bar

Left side Right side Bottom

Square Round Rounded

Large Regular Small Extra small

## Documentation

You can download recent stable version from github.

### Setup icons

Download the library, unzip it, copy `dist/css/social-share-kit.css` and `dist/fonts/` directory to your server and include Social Share Kit stylesheet in your document.

    <!-- Social Share Kit CSS -->
    <link rel="stylesheet" href="your-path/social-share-kit.css" type="text/css">

> Note: `fonts/` directory must be relatively one level above `social-share-kit.css` . For example:

>     /assets/css/social-share-kit.css
>     /assets/fonts/

### Icons markup

Inspect source code for examples included in this document above to see what is the proper HTML markup for each case.

Here are some basic examples:

> #### Icon with background

>     <a href="" class="ssk ssk-twitter"></a>

> ####

> #### Icon only

>     <a href="" class="ssk ssk-icon ssk-twitter"></a>

> ####

> #### Group of icons

>     <div class="ssk-group">
>         <a href="" class="ssk ssk-facebook"></a>
>         <a href="" class="ssk ssk-twitter"></a>
>         <a href="" class="ssk ssk-google-plus"></a>
>         <a href="" class="ssk ssk-pinterest"></a>
>         <a href="" class="ssk ssk-tumblr"></a>
>     </div>

> ####

> #### Group of icons with share count

> Add `.ssk-count` class to show share count. Note: `tumblr` share count is currently unavailable, due to absence of an API.

>     <div class="ssk-group ssk-count">
>         <a href="" class="ssk ssk-facebook"></a>
>         <a href="" class="ssk ssk-twitter"></a>
>         <a href="" class="ssk ssk-google-plus"></a>
>         <a href="" class="ssk ssk-pinterest"></a>
>         <a href="" class="ssk ssk-linkedin"></a>
>     </div>

> ####

Use classes `ssk-xs` , `ssk-sm` , `ssk-lg` to control sizing.

> #### Individual sizing.

>     <a href="" class="ssk ssk-facebook ssk-xs"></a>
>     <a href="" class="ssk ssk-facebook ssk-sm"></a>
>     <a href="" class="ssk ssk-facebook"></a>
>     <a href="" class="ssk ssk-facebook ssk-lg"></a>

> ####

> #### Sizing for whole group

>     <div class="ssk-xs ssk-group">
>         <a href="" class="ssk ssk-facebook"></a>
>         <a href="" class="ssk ssk-twitter"></a>
>         <a href="" class="ssk ssk-google-plus"></a>
>     </div>

> ####

> #### Floating/sticky share icons bar

> Add `ssk-sticky` CSS class for fixed sticky bar. Use `ssk-left` , `ssk-right` and `ssk-bottom` for placement. Add `ssk-center` for centered positioning (Note: IE8 doesn't support centered positioning. Override CSS `top` and `left` properties according to your needs, if IE8 support is required).

> You can also use sizing classes to resize bar icons.

>     <!-- Left & centered positioning -->
>     <div class="ssk-sticky ssk-left ssk-center ssk-lg">
>         <a href="" class="ssk ssk-facebook"></a>
>         <a href="" class="ssk ssk-twitter"></a>
>     </div>

>     <!-- Left & custom positioning -->
>     <style>.ssk-sticky .ssk-left { top: 20%; } </style>
>     <div class="ssk-sticky ssk-left ssk-lg">...</div>

> ####

> Left side Right side Bottom

### Setup JavaScript

If you want to use share popups, you will also need to include JavaScript file `dist/js/social-share-kit.js` in your document.

    <!-- Social Share Kit JS -->
    <script type="text/javascript" src="your-path/social-share-kit.js"></script>

You must also initialize Social Share Kit plugin. Put following before your closing `</body>` tag or call whenever you want share popups to initialize.
`SocialShareKit.init()` method will automatically attach to `document.ready` event itself, so no need to wrap it in `jQuery.ready` function in case if you have jQuery also included.

    <script type="text/javascript">
    SocialShareKit.init();
    </script>

### Sharer popup options

There are several ways how extra options can be passed to share popup. By default current page URL on which icons are used will be shared and usually meta title and description data will be used as default share data for most of social networks.

Note: Facebook share popup will always use Open Graph tags loaded from provided url, so no way of overriding share data for Facebook.
Twitter can also use it's own Twitter Meta tags, however share content text can be specified.

> #### 1. Pass options with SocialShareKit.init(options)

> Options can be passed as object with following keys:

> selector
>   Default value is `.ssk` . Plugin will automatically target only those icons that support sharing with popup, like `.ssk-twitter` etc. Therefore you don't have to worry if you use some more icons on your project, that doesn't support sharing.
> url
>   Networks: All. URL address that will be shared. Default: current page URL on which icons are used will be used.
> text
>   Networks: Twitter, Pinterest, Tumblr. Text to share. Default: current page meta description
> title
>   Networks: Tumblr and Email (as subject). Default: current page meta title.
> image
>   Networks: Pinterest. Image ("media" option). Default: meta `og:image` of current page.
> via
>   Networks: Twitter. Default: meta `twitter:site` of current page. Sreen name of twitter user.

> For example:

>     <script type="text/javascript">
>     SocialShareKit.init({
>         selector: '.custom-parent .ssk',
>         url: 'http://my-url',
>         text: 'Share text default',
>         twitter: {
>             url: 'http://url-for-twitter',
>             text: 'Share text for twitter',
>             via: 'twitter-screen-name',
>         }
>     });
>     </script>

> #### 2. Pass options via `data-*=""` attributes

> You can also pass same options as mentioned in previous section using HTML data attributes. For example:

>     <a href="" class="ssk ssk-twitter" data-url="http://url-for-twitter" data-text="Text for twitter" ></a>

> #### 3. Pass options via `data-*=""` attributes for whole `.ssk-group`

> You can also pass options to parent tag - icon group - therefore each tag will inherit options and you can specify only those who differs.

>     <div class="ssk-group" data-url="http//my-url" data-text="Share text default" >
>         <a href="" class="ssk ssk-facebook"></a>
>         <a href="" class="ssk ssk-twitter" data-text="Share text for twitter"></a>
>         <a href="" class="ssk ssk-google-plus"></a>
>         <a href="" class="ssk ssk-pinterest"></a>
>         <a href="" class="ssk ssk-tumblr" data-media=""></a>
>     </div>

## License

Social Share Kit is licensed under Creative Commons Attribution-NonCommercial 3.0 license. As long as you do not use the Social Share Kit in a business or money-making venture, it is free for your own personal use.

For example - if you use Social Share Kit library in your own personal web project - it is free. If you use Social Share Kit in a client project and receive money for it or you are doing project for company you work for - it is considered as commercial and you must obtain a license.

## Pricing

## Non-Commercial

FREE
Non-commercial use
As long as you do not use the Social Share Kit in a business or money-making venture, it is free for your own personal use.
Download

## Single

$ 19
Single commercial project
Use Social Share Kit in one commercial project

with PayPal

## Unlimited

$ 79
Unlimited commercial projects
Use Social Share Kit in unlimited commercial projects

with PayPal

## OEM

$ 299
OEM integrator license
Integrate Social Share Kit in your commercial project (like theme) and sell that new project. It can't be sharing tools project!

with PayPal

PayPal receipt is valid proof of purchase of Social Share Kit license.

## Support

Use social-share-kit github issues for any bugs or features suggestions.

If you would like to contact me (author) personally or have any questions about license or pricing use email: