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

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 .

Documentation

You can download recent stable version from github.

Setup icons

dist/css/social-share-kit.css

dist/fonts/

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

Download the library, unzip it, copyanddirectory to your server and include Social Share Kit stylesheet in your document.

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

dist/js/social-share-kit.js

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

If you want to use share popups, you will also need to include JavaScript filein your document.

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>

forceInit: true

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

SocialShareKit.init()

reinitialize: true

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

Sharer popup options

In case if you want to initialize right away without waiting for DOM to load, useSocial Share Kit is keeping track of already initialised items, so in case if your DOM changes, you can callmultiple times. If you would like reinitialize SSK once again to the same DOM elements using other parameters use

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.

Load/include Twitter widgets file to your page Bind to specific events 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: