jQuery Social Share Buttons Plugin

jQuery Social Share Buttons Plugin - Example 4

Example 4 – Create 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.

The plugin also includes options to open/close the button panel using external links.

jQuery Code

$(document).ready(function($){
	$('#social-share').dcSocialShare({
	size: 'horizontal',
		location: 'bottom',
		offsetAlign: 0,
		offsetLocation: 0,
		buttons: 'twitter,facebook,plusone,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: #323232;
	padding: 10px 0;
	height: 20px;
	width: 100%;
	border-top: 1px solid #222;
	-webkit-box-shadow: 0 -3px 7px 0 #777;
	   -moz-box-shadow: 0 -3px 7px 0 #777;
	        box-shadow: 0 -3px 7px 0 #777;
}
.dcssb-content {
	width: 940px;
	margin: 0 auto;

}
.dcssb-btn {
	float: left;
	margin-right: 10px;
}

Other Premium Plugins

WordPress Social Stream Plugin Social Network Tabs Plugin Top Social Share Posts Plugin