Creating Custom Social Share Buttons With Socialite.js

Socialite.js is a tiny javascript library that provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

Demo

Download

How to implement it:

Load the Socialite.js script at the end of your document to reduce the page load time.

<script src="socialite.js"></script>

Markup html structure.

<ul class="social-buttons cf">
<li><a href="http://twitter.com/share" class="socialite twitter-share" data-text="Socialite.js" data-url="https://365webresources.com" data-count="vertical" rel="nofollow" target="_blank"><span class="vhidden">Share on Twitter</span></a></li>
<li><a href="https://plus.google.com/share?url=https://365webresources.com" class="socialite googleplus-one" data-size="tall" data-href="https://365webresources.com" rel="nofollow" target="_blank"><span class="vhidden">Share on Google+</span></a></li>
<li><a href="http://www.facebook.com/sharer.php?u=https://365webresources.com" class="socialite facebook-like" data-href="https://365webresources.com" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank"><span class="vhidden">Share on Facebook</span></a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=https://365webresources.com&amp;title=Socialite.js" class="socialite linkedin-share" data-url="https://365webresources.com" data-counter="top" rel="nofollow" target="_blank"><span class="vhidden">Share on LinkedIn</span></a></li>
</ul>

The CSS.

.cf:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .cf {
zoom: 1;
}
*:first-child+html .cf {
zoom: 1;
}
.social-buttons {
display: block;
list-style: none;
padding: 0;
margin: 20px;
}
.social-buttons > li {
display: block;
margin: 0;
padding: 10px;
float: left;
}
.social-buttons .socialite {
display: block;
position: relative;
background: url('images/social-sprite.png') 0 0 no-repeat;
}
.social-buttons .socialite-loaded {
background: none !important;
}
.social-buttons .twitter-share {
width: 55px;
height: 65px;
background-position: 0 0;
}
.social-buttons .googleplus-one {
width: 50px;
height: 65px;
background-position: -75px 0;
}
.social-buttons .facebook-like {
width: 50px;
height: 65px;
background-position: -145px 0;
}
.social-buttons .linkedin-share {
width: 60px;
height: 65px;
background-position: -215px 0;
}