Example 4 - Creating a Social Share Toolbar

Example 4 - Creating a Social Share Toolbar

The plugin is very versatile and with a few minor changes to the CSS and the default settings we can create a custom social share toolbar - see bottom of browser window.

jQuery Code

$(document).ready(function($){
	$('#social-share').dcSocialShare({
	size: 'horizontal',
		location: 'bottom',
		offsetAlign: 0,
		offsetLocation: 0,
		buttons: 'twitter,facebook,linkedin,digg,stumbleupon,delicious,pinterest,buffer,print,email',
		floater: false,
		autoClose: true
	});
});

HTML

<div id="social-share"></div>

Using the "classOpen", "classClose" & "classToggle" options we can create external links that will hide/show the toolbar:

Click To Toggle Open/Close

<a href="#" class="dc-toggle">Click To Toggle Open/Close</a>

Click To Open

<a href="#" class="dc-open">Click To Open</a>

Click To Close

<a href="#" class="dc-close">Click To Close</a>

Toolbar Custom CSS

/* Button panel */
.dcssb-float {
	background: #E6EDF4;
	padding: 10px 0;
	height: 20px;
	width: 100%;
	box-shadow: 0 -3px 5px 0 #555;
}
.dcssb-content {
	width: 940px;
	margin: 0 auto;
	
}
.dcssb-btn {
	float: left;
	margin-right: 10px;
}
	

Note: Google plus button will not show for local addresses.