jQuery Social Share Buttons Plugin

jQuery Social Share Buttons Plugin - Example 3

Example 3 – Custom Positioning & Styling

The position & styling of the button panel is completely flexible. In the following example we move the button panel to the right and make a few minor changes to the CSS to change the panel styling. The floating animation is also turned off by setting the “floater” option to “false”.

The positioning is fixed based on the center of the browser window so that if the browser width is adjusted the button position remains the same:

jQuery Code

$(document).ready(function($){
	$('#social-share').dcSocialShare({
		buttons: 'facebook,plusone,linkedin,twitter,xing,print,email',
		twitterId: 'designchemical',
		email: 'moc//niamod/liame',
		align: 'right',
                floater: false,
		center: 563
	});
});

HTML

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

Custom CSS

.dcssb-float .dcssb-content {
	background: #eee;
	padding: 5px 0 0 0;
	text-align: center;
	width: 70px;
	border: 1px solid #ccc;
	border-left: none;
	border-radius: 0 3px 3px 0;
	-webkit-border-radius: 0 3px 3px 0;
}
.dcssb-btn {
	padding: 7px 5px;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
}
.dcssb-facebook {
	border-top: none;
}
.dcssb-email {
	border-bottom: none;
}

Other Premium Plugins

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