Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Pull request Compare This branch is 100 commits behind tmort:master.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Because if you're selling your soul, you may as well do it asynchronously.

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

For a demo visit:

Author: David Bushell @dbushell

Copyright © 2012

Features and Benefits

  • No dependencies to use.
  • Loads external resources only when needed.
  • Less than 2kb when minified and compressed.
  • More accessible and styleable defaults/fallbacks.
  • Support for Twitter, Google+, Facebook, LinkedIn, Pinterest, and Spotify.
  • Extensible with other social networks.
  • Mimics native implementation when activated.
  • Supported in all browsers (providing the buttons are).


Create an element with the class socialite and a class like twitter to specify the social network. Best practice is to provide an accessible fallback URL like the example below. You can style it however you like! See for demos.

<a class="socialite twitter" href="" data-url="">
    Share on Twitter

Use data-* attributes to configure your button. These configurations directly correlate to the individual network implementations, so while Twitter uses data-url, Facebook uses data-href. Not ideal but I'd rather keep this script very small!

Supported network classes are currently: twitter, googleplus, facebook, linkedin, pinit, and spotify-play. For other Twitter buttons add an extra class of either follow, hashtag or mention. For Embedded Tweets copy the <blockquote> code provided by Twitter and replace the class attribute with socialite tweet.

For all individual button configurations visit Twitter, Google+, Facebook, LinkedIn, Pinterest, and Spotify. Important: don't include the scripts provided by these networks, Socialite does that for you!

Include socialite.js right at the end of your document (before </body>) and activate with the options below.

Please note: you can easily edit socialite.js to remove the social networks you don't need.


For Pinterest's "Pin it" buttons the url, media and description are appended to the URL query string rather than as data-* attributes. The only configuration option is data-count-layout="horizontal" (or "vertical").


For the Spotify Play Button simply link to the song or playlist like so:

<a class="socialite spotify-play" href="" data-theme="black" data-width="500" data-height="80" target="_blank" title="Sexy And I Know It">
    Listen to <em>Sexy And I Know It</em> by <strong>LMFAO</strong> on Spotify




load will search the document for elements with the class socialite and magically transform them into sharing buttons (based on a network class and data-* attributes).

Always wait for at least the DOMContentLoaded event — $(document).ready(function() { }); with jQuery.


Be kind! Provide an element to search within using context rather than the whole document.


Socialite.activate(element, 'network');

activate replaces a single element (or an array of) with the specific social network button.


Socialite.extend('network', function);

With extend you can add more social networks! The function is called by Socialite.load and Socialite.activate to replace the default element with the shiny sharing button.


Send me feedback and testing issues!

Something went wrong with that request. Please try again.