Share+ : Sharing & Bookmarking jQuery Plugin

Share+ is a very powerful & highly customizable social sharing jQuery plugin which creates a new social sharing experience for your site users. Includes pre made themes and its easy to create and change the looks with the power of CSS. Replace the long list of unusable sharing buttons on your webpage with a neat, simple and organized sharing experience.

Make with the latest technology. Powered by jQuery, supports HTML5 and it made with pure CSS3 (Yep, even the background stripes. Everything except the icons and the share+ sticker on the left to enable easy replacement and you can easily modify it using the included PSD file). Incredibly easy to modify and future proof!

This script uses the jQuery framework and works completely client side. So you can use it on static and dynamic webpages. Add it to your site in seconds by including the theme CSS stylesheet, a javascript file and a single line of code. Supports facebook, twitter, pinterst, digg, delicious, yahoo, email, fav, print, live, stumbleupon, orkut, tumblr, linkedin, myspace, evernote, bebo, technorati, reddit, newsvine, mixx, netvibes, google+ and you can add your own!

via codecanyon.net

How to

Add it to your site in a few easy steps. Below you will find the documentation of everything you need to know about how to add it to any page and how to customize it according to your needs.

1) Include files

Firstly include/link to jQuery and share+ script in your HTML. You can either add this in the head section or before the closing tag of body.

Include the stylesheet of the theme you wish to use with share+ in the head section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="http://example.com/js/shareplus/shareplus.min.js"></script>

<link rel="stylesheet" href="http://example.com/js/shareplus/themes/simple/style.css">

2) Configure

Add the share+'s configuration code after/below where you have included the share+ script.

<script>
	$(document).ready(function(){
		$('.shareplus').shareplus();
	});
</script>

3) Done!

You're done! Because you have not added any extra configuration to script, all the default settings apply.

<a href="javascript:void(0);" class="shareplus">Share this page</a>

So you should see the sticky button on the left and when you click that hit should open share+ and you can also make it open by adding 'shareplus' as class to any anchor so share+ will open when it is clicked. Example: Share this page

Customizations

Make it your own by just making a few changes… To change the style and design of share+, just include the theme's stylesheet in your page. You can change color and the complete look of it by just making a few changes in the stylesheet. Looking to change the share button floating on the left? I have included the PSD file of the image which makes it incredibly easy to change and design your own image. For everything else, add your setting in the share+ script settings like the following...

Basic customizations

$(document).ready(function(){
	$('.share').shareplus({
		height: '130px',
	      	  	    	
		speedIn: 400, // fadeIn speed
		speedOut: 600, // fadeOut speed
	      	  	    	
		displayTitle: true, // true or flase
		title: "Share & Bookmark", // shareplus box title
	      	  	    	
		sharetitle: "Share Plus", // sharing page's title
		shareurl: "http://danielpaul.me/projects/share+/", // URL to share
	      	  	    	
		icons: "facebook,twitter,google,digg,delicious,stumble,tumblr,linkedin,live,myspace,bebo,email",
		targetBlank: true, // open link in new tab? true or false
	      	  	    	
		fbLikebox: true, // display facebook like box? true or false
		fbAction: "recommend", // like or recommend?
		fbcolorscheme: "light", // light or dark
	      	  	    	
		tweets: true, // diaplay tweet button? true or false
		tweetText: "Check out this URL",
		tweetVia: "danielpaul94", // via twitter account
		twitterRelated: "danielpaul94", // related twitter account
		tweetButton: "Tweet!",
		
		pin: true,	// enable pin button?
		pinMedia: "", // URL of media to pin
	      	  	    	
		gplus: true, // display Google Plus one button? true or false
	      	  	    	    		
		sticker: false, // display share sticker?
		stickerAlign: 'right' // left or right?
	});
});

Advanced functions before and after each event of share+

$(document).ready(function(){
	$('.share-advanced').shareplus({
		open: function(){
			alert('staring to open');
		}, // function to activate when open is started
		opened: function(){
			alert('share plus opened');
		}, // function to activate when it is opened
		
		exit: function(){
			alert('starting to close');
		}, // function to activate when exit is starting
		exited: function(){
			alert('share plus closed');
		} // function to activate when it has exited
	});
});

Opening and closing Share+ with javascript functions.

// this will open share+
$('.shareplus').shareplus('open');
// this will close share+
$('.shareplus').shareplus('close');

These functions can be called from anywhere. For example when the page loads.

Themes

Here are a few themes that are available. I am working on more and if you have a great idea for a theme or want me to help you customize it for your site or you have already made a skin and want to include it with share+, contact me via twitter :)

To use any of the theme, you just have to link to the appropriate stylesheet. You can easily modify those styles to change colors, fonts, etc. to suite your style.