Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript
Tag: v1.0

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
README.md
license.txt
socialite.js
socialite.min.js

README.md

Socialite

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: socialitejs.com

Author: David Bushell http://dbushell.com @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).

Setup

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 http://socialitejs.com for demos.

<a class="socialite twitter" href="http://twitter.com/share" data-url="http://socialitejs.com">
    Share on Twitter
</a>

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.

Pinterest

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

Spotify

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

<a class="socialite spotify-play" href="http://open.spotify.com/track/2EZ2KXLqs9zdRVVMMz1IsH" 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
</a>

Functions

Load

Socialite.load();

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.

Socialite.load(context);

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

Activate

Socialite.activate(element, 'network');

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

Extend

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.

Contribute

Send me feedback and testing issues!

Something went wrong with that request. Please try again.