How to Customize Share Buttons with ShareThis

Overview

The following instructions will teach you how to customize your share buttons within our widget. You can use any custom image or text for your ShareThis buttons!

Default Button

Below is the default ShareThis button implementation.

Example:        
   

Source code:

<span class="st_sharethis_large" displaytext="ShareThis" st_processed="yes">
<span class="st_facebook_large" displaytext="Facebook" st_processed="yes">
<span class="st_twitter_large" displaytext="Twitter" st_processed="yes">
<span class="st_linkedin_large" displaytext="LinkedIn" st_processed="yes">
<span class="st_email_large" displaytext="Email" st_processed="yes">
<span class="st_fblike_large" displaytext="Facebook Like" st_processed="yes">
<span class="st_plusone_large" displaytext="Google +1" st_processed="yes">
<span class="st_pinterest_large" displaytext="Pinterest" st_processed="yes">


Customize Button Image

You may modify the ShareThis button icon to use different colors or sizes to your liking.

To switch to customize buttons, the first step is adding 'custom' after each social media line.

		<span class="st_sharethis_custom">ShareThis</span>


You will then need to define your button image within a new CSS class. Then replace the below highlighted area with the respective link to the image of your custom button. 

		.st_sharethis_custom{
	background: url("http://path/to/image/file") no-repeat scroll left top transparent;
	padding:0px 16px 0 0;
} 
 
Once this is completed, continue to add custom on the other social services you wish to change so that your code eventually looks like so:

HTML:
<span class="st_sharethis_custom" displaytext="ShareThis" st_processed="yes">
<span class="st_facebook_custom" displaytext="Facebook" st_processed="yes">
<span class="st_twitter_custom" displaytext="Twitter" st_processed="yes">
<span class="st_linkedin_custom" displaytext="LinkedIn" st_processed="yes">
<span class="st_email_custom" displaytext="Email" st_processed="yes">
<span class="st_fblike_custom" displaytext="Facebook Like" st_processed="yes">
<span class="st_plusone_custom" displaytext="Google +1" st_processed="yes">
<span class="st_pinterest_custom" displaytext="Pinterest" st_processed="yes">

CSS:
		.st_sharethis_custom{
	background: url("http://path/to/image/sharethis-file") no-repeat scroll left top transparent;
	padding:0px 16px 0 0;
} 
.st_facebook_custom{ background: url("http://path/to/image/facebook-file") no-repeat scroll left top transparent; padding:0px 16px 0 0; } 
.st_twitter_custom{ background: url("http://path/to/image/twitter-file") no-repeat scroll left top transparent; padding:0px 16px 0 0; } 
.st_linkedin_custom{ background: url("http://path/to/image/linkedin-file") no-repeat scroll left top transparent; padding:0px 16px 0 0; } 
.st_email_custom{ background: url("http://path/to/image/email-file") no-repeat scroll left top transparent; padding:0px 16px 0 0; } 
.st_fblike_custom{ background: url("http://path/to/image/fblike-file") no-repeat scroll left top transparent; padding:0px 16px 0 0; } 
.st_plusone_custom{ background: url("http://path/to/image/plusone-file") no-repeat scroll left top transparent; padding:0px 16px 0 0; } 
.st_pinterest_custom{ background: url("http://path/to/image/pinterest-file") no-repeat scroll left top transparent; padding:0px 16px 0 0; } 

 

Customize Button Text

If you're interested in changing the text that appears next to the ShareThis Button, append the following:

displayText="Your Text"

Example:

		<span class="st_sharethis" displayText="Your Text"></span>