Custom Buttons

 
 

Overview

Dont like our button? Don't worry, you can easily change the look and feel. We won't mind.

Attributes

Name Definition Default Requirement
st_title Defines a custom title for the share document.title Optional
st_url Defines a custom URL for the share document.location.href Optional
displayText Change the text that appears with the button ShareThis Optional

Options

Name Definition Default Requirement
publisher Your unique ShareThis publisher key none Required

 

Default Button

This is the default ShareThis button implementation.

Example

		<span class="st_sharethis" st_url="http://sharethis.com" st_title="Sharing Rocks!"
displayText="ShareThis"></span>

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
	stLight.options({
		publisher:'12345',
	});
</script>

Result:

Notes: We recommend placing ShareThis scripts just before the </body> tag on your page. Also, be sure to use your own Publisher ID when implementing the code. You will need to register (it's free!) to obtain one.

 

Customize Button Text

displayText="Your Text"

This will change what text appears next to the ShareThis Button.

Example 

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

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
	stLight.options({
		publisher:'12345',
	});
</script>

Result:

 

Customize Button Image

class="st_sharethis_custom"

You may modify the ShareThis button icon to use different colors or sizes but the overall look and shape should be maintained. ShareThis image files are available here.

Example

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

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
	stLight.options({
		publisher:'12345',
	});
</script>

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

		.st_sharethis_custom{
	background: url("http://path/to/image/file") no-repeat scroll left top transparent;
	padding:0px 16px 0 0;
}

Notes: You may need to adjust the CSS padding values depending on your image size. Using a custom button image will also disable the displayText attribute.

Result: ShareThis