Customize social icon with Share This plugin

Published on : June 3, 2014

Author:

Category: Jquery

You may modify the ShareThis button icon to use different colors or sizes but the overall look and shape should be maintained.
Here are JS files for share this plugins. Put these into your page header-


<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: " 12345", doNotHash: false, doNotCopy: false, hashAddressBar: false, onhover: false});</script>

You will also need to define your button image within a new CSS class.
For facebook –


.st_facebook_custom{
	background: url("hlis-facebook.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}
.st_facebook_custom:hover{
	background: url("hlis-facebook-hover.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}

For Twitter –


.st_twitter_custom{
	background: url("hlis-tweet.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}

.st_twitter_custom:hover{
	background: url("hlis-tweet-hover.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}

For Google+ –


.st_googleplus_custom{
	background: url("http://www.healthline.com/hlcmsresource/images/YouveGotThisNew/images/hlis-googleplus.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}
.st_googleplus_custom:hover{
	background: url("hlis-googleplus-hover.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}

For Pinterest –


.st_pinterest_custom{
	background: url("hlis-print.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}
.st_pinterest_custom:hover{
	background: url("hlis-print-hover.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}

For Email–


.st_email_custom{
	background: url("hlis-mail.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}
.st_email_custom:hover{
	background: url("hlis-mail-hover.png") no-repeat scroll left top transparent;
	padding:0px 40px 25px 0 !important;
	cursor:pointer;
}

Now change your button’s CSS class with the new CSS class


<span class='st_facebook_custom' st_summary='' st_title='' st_url='' displayText='Facebook'></span>

Recent Post

Popular Categories:

Popular Tags

Useful links

Contact - USA

Brent Fowler
Director, Business
Development