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.

  • 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
Icons can be also used separately
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:

Left side   Right side   Bottom  

Square   Round   Rounded  

Large   Regular   Small   Extra small  

You can download recent stable version from github.

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/

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>
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.
countCallback
Networks: Twitter. Default: None. Since Twitter discontinued count API, you can set count manually (by some third party service maybe) using custom count function. See example below.

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',
        countCallback: function(shareUrl, onCountReady) {
            // Get count somewhere manually and call onCountReady() whenever you got the count.
            var count = 5;
            return onCountReady(count);
        }
    }
});
</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>

Events and callbacks

onBeforeOpen(targetElement, network, paramsObj). Change paramsObj.networkUrl parameter, to change popup url.
onOpen(targetElement, network, networkUrl, popupWindow).
onClose(targetElement, network, networkUrl, popupWindow).

For example:

<script type="text/javascript">
SocialShareKit.init({
    onBeforeOpen: function(targetElement, network, paramsObj){
        console.log(arguments);
    },
    onOpen: function(targetElement, network, networkUrl, popupWindow){
        console.log(arguments);
    },
    onClose: function(targetElement, network, networkUrl, popupWindow){
        console.log(arguments);
    }
});
</script>

Twitter callbacks

Twitter lets you to define callbacks once user clicks/tweets content in popup. Unfortunately, the unfriendly to developers provider - Twitter recently changed widget behaviour and now click/tweet events are fired once modal is being open, instead of actual tweet. To enable Twitter callbacks you must follow Twitter Docs.

  1. Load/include Twitter widgets file to your page
  2. Bind to specific events
  3. Add following URL to twitter link href attribute https://twitter.com/intent/tweet
<a href="https://twitter.com/intent/tweet" class="ssk ssk-twitter"></a>
Click on following link to see Twitter events below the icon. Test here:

    

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.

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

$ 59
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.

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: