ShareThis Social Bookmarking Counters on your WordPress Blog

This is the whole enchilada.

// output the sharethis scripts and some CSS to hide annoying bugs from the ShareThis JavaScript
function sharethis_script() {
	?>
	<script src="http://wd.sharethis.com/button/buttons.js" type="text/javascript"></script>
	<script type="text/javascript">
stLight.options({publisher:'YOUR PUBLISHER KEY'});
</script>
	<style type="text/css">
	#menu-top-nav span,.post_sig span {
		display: none;
		position: absolute
	}
</style>
	< ?php
}

// a filter for adding buttons to the_content
function sharethis_content_filter($content) {
	if (is_single() &&; !in_category('Asides') ||
		is_home() && !in_category('Asides')) {
		$before = sharethis_button();
	}
	if (is_single()) {
		$after = sharethis_button();
	}
	return $before.$content.$after;
}

// write the button code with the appropriate st_url and st_title attributes.
function sharethis_button() {
	$st_url = 'st_url="'.get_permalink().'" ';
$st_title = 'st_title="'.get_the_title().'" ';
	return '
		<p>
		<span  '.$st_url.$st_title.'class="st_twitter_vcount" displayText="Tweet"></span>
		<span  '.$st_url.$st_title.'class="st_facebook_vcount" displayText="Share"></span>
		<span  '.$st_url.$st_title.'class="st_email_vcount" displayText="Email"></span>
		<span  '.$st_url.$st_title.'class="st_sharethis_vcount" displayText="Share"></span>
		</p>
		';
}

// register actions and filters!
add_action('wp_footer','sharethis_script');
add_filter('the_content','sharethis_content_filter');

Extra Credit

The 4 counters used in this tutorial are just the default services included in the copy & paste code from the ShareThis site. You can see I’ve picked some different services for my blog. You can change which counters you are using by creating your own span tags with different class names and displayText attribute values. For example, class="st_digg_vcount" displayText="Digg" Will produce a Digg counter.

How do I know what to put into these attributes?

I couldn’t find a good reference for what class names to use but here’s a method that worked for me: Hover over the “Share” button, this is the counter for ShareThis. When you hover this counter it will pop up a box that lists several services and a link to display even more services. When you mouse over one of these links your browser should display the URL some where (usually somewhere across the bottom of the browser window). In this URL look for destination= For example in the URL for the Google Buzz link you will find destination=gbuzz.

Now you just add gbuzz into your class name like this: class="st_gbuzz_vcount". Next you just give it a display name in your displayText attribute like this: displayText="Buzz" (This name can be anything you want it’s just for display — but keep it short).

Some final thoughts:

I might make this into a plug-in if I thought there would be a use for it. One would hope ShareThis would eventually publish one. To make this a plug-in one would have to be able to control where the buttons are displayed and which services to have buttons for via the admin panel, and of course all the usual extra work that goes into getting a plug-in onto the WordPress Plugins Directory.

CodeProject