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

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

Add ssk-sticky-hide-xs CSS class to hide sticky bar on small screen devices.

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>

In case if you want to initialize right away without waiting for DOM to load, use forceInit: true:

<script type="text/javascript">
SocialShareKit.init({ forceInit: true });
</script>

Social Share Kit is keeping track of already initialised items, so in case if your DOM changes, you can call SocialShareKit.init() multiple times. If you would like reinitialize SSK once again to the same DOM elements using other parameters use reinitialize: true:

<script type="text/javascript">
SocialShareKit.init({ reinitialize: true });
</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:

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

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