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
- 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 and LinkedIn.
- 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 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 and linkedin. 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 and LinkedIn. 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:
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.
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!