Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
116 lines (106 sloc) 5.26 KB
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
var docElement = document.documentElement;
docElement.className = docElement.className.replace(/\bno-js\b/, '') + ' js ';
<link rel="stylesheet" href="socialite.css">
<div id="intro">
<p><strong>Currently in development!</strong></p>
<p>Socialite provides a very easy way to implement and activate a plethora of social sharing buttons &mdash; any time you wish. On document load, on article hover, on any event!</p>
<p>If you're selling your soul, you may as well do it asynchronously. Socialite won't cause document rendering to hang while waiting for 50kb of social media.</p>
<h2>Features and Benefits</h2>
<li>No more tedious copy/paste!</li>
<li>No dependencies.</li>
<li>Loads external resources only when needed.</li>
<li>Less than 2kb when minified and compressed.</li>
<li>More accessible and styleable defaults/fallbacks.</li>
<li>Built in support for Twitter, Google+, Facebook and LinkedIn.</li>
<li>Easily extendable with other social networks.</li>
<li>Supported in all browsers (providing the buttons are).</li>
<<<<<<< HEAD
<p>Follow <a href="" title="David Bushell on Twitter" rel="me" target="_blank"><strong>@dbushell</strong></a> or <a href="" title="David Bushell on Google+" rel="me" target="_blank"><strong>+David Bushell</strong></a> for updates.</p>
<p>Please send me feedback!</p>
<p>Follow <a rel="me" href="" target="_blank" title="David Bushell on Twitter"><strong>@dbushell</strong></a> or <a rel="me" href="" target="_blank" title="David Bushell on Google+"><strong>+David Bushell</strong></a> for updates!</p>
>>>>>>> hmm
<p><a href="" target="_blank"><strong>Get it on GitHub!</strong></a></p>
<h2>Share Socialite</h2>
<ul id="social" class="cf">
<a href="" class="socialite twitter" data-text="Socialite.js" data-url="" data-count="vertical" data-via="dbushell" rel="nofollow" target="_blank">
<span>Share on Twitter</span>
<a href=";url=" class="socialite plusone" data-size="tall" data-href="" rel="nofollow" target="_blank">
<span>Share on Google+</span>
<a href=";t=Socialite.js" class="socialite facebook" data-href="" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
<span>Share on Facebook</span>
<a href=";url=;title=Socialite.js" class="socialite linkedin" data-url="" data-counter="top" rel="nofollow" target="_blank">
<span>Share on LinkedIn</span>
<a href="" data-r="5" data-url="" class="socialite stumbleupon">
<p>Copyright &copy; <a rel="author" href="">David Bushell</a>
<script src="socialite-1.0.js"></script>
function onDOMContentLoaded()
Socialite.load( document.getElementById('social') );
if (window.addEventListener !== undefined) {
window.addEventListener('DOMContentLoaded', onDOMContentLoaded, false);
} else {
window.onload = function() {
// example of extending the networks for linkedin
Socialite.extend('stumbleupon', function(instance, _socialite)
var r = instance.elem.attributes['data-r'] ? instance.elem.attributes['data-r'].value : '1';
var src = '//' + r + '/?';
src += _socialite.getDataAttributes(instance.elem, true);
var iframe = _socialite.createIFrame(src);
instance.button.replaceChild(iframe, instance.elem);
// load buttons at any time!
setTimeout(function() {
var b1 = document.createElement('div');
b1.setAttribute('data-href', '');
Socialite.activate(b1, 'facebook');
}, 3000);
<a href="" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub"></a>
Jump to Line
Something went wrong with that request. Please try again.