prettySociable

prettySociable is a jQuery plugin that tries to make sharing fun while being easy to use. It was inspired by the sharing on mashable.com.

While ShareThis and AddThis provides a very useful piece code that allow users to share basically anything everywhere, their solution is not the prettiest nor the easiest to use. prettySociable simply asks the user to drag the items he wants to share onto the website he wants to send it to.

The code is fully customizable, either from the CSS, or through custom settings you can set upon initialization.

See below for a demo of the project or click here for the full project documentation.

If you need support with prettySociable, please take a look at our forums

Documentation

Please see this page for the complete project documentation.

Download

Uncompressed version | Compressed version


Browser support

This plugin has been tested and is known to work in the following browsers

  • Firefox 2.0+
  • Safari 3.1.1+
  • Opera 9+
  • Internet Explorer 6.0+

Demos

Take a look at prettySociable in a standalone page or see below for demos and explanations.

prettySociables default sharing will take the title and description attributes of your webpage to display the tooltip.

To do so, simply:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettySociable” to it (rel=”prettySociable”).
  3. If you want to share another url than the current page, change the href attribute to the desired link to share.


To share a link other than the current webpage or with a custom title/description.

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettySociable;title:Your title;excerpt:Your excerpt”, replace the title and excerpt values with your. (rel=”prettySociable;title:Your title;excerpt:Your excerpt”).
  3. Change the href of your link so it points to the webpage you want to share.

To share add a share link to an image, simply:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettySociable”.(rel=”prettySociable”).
  3. Change the href of your link so it points to the webpage you want to share, leave the “#” if you want to share the current page.
  4. Put your image in the link.

Copyright

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.

Version history

  • 1.2.1: Fixed a variable name conflict in Internet Explorer.
  • 1.2: Fixed position in the case the shared element has padding and/or borders. Label is now animated.
  • 1.1: Added bit.ly url shortening support (thanks to juliend2). Fixed the hover on images that are not floating.
  • 1.0.1: Added preload of social icons
  • 1.0: Initial release of prettySociable


Donations

I’ve spent a lot of time to develop/support this script. You liked it? Feel free to donate!