ShareThis Social Bookmarking Counters on your WordPress Blog

So I was really impressed with the new buttons that ShareThis is offering now but was disappointed to find out that they don’t currently support them for WordPress (If you use their WordPress plug-in you get the old version of the ShareThis button).The new ShareThis WordPress plug-in has been released and you can find it here. But, they did provide some copy & paste code, so I figured where there’s a will there’s a way (As you can see from the counters below this post there’s a happy ending to this story!).

NOTE: This tutorial involves making edits to the functions.php file in your WordPress theme.

So here’s the copy & paste code provided by ShareThis:

This code goes in the loop with the post:

<span class="st_twitter_vcount" displayText="Tweet"</span>
<span class="st_facebook_vcount" displayText="Share"></span>
<span class="st_email_vcount" displayText="Email"></span>
<span class="st_sharethis_vcount" displayText="Share"></span>

This code goes in the footer of your page:

<script src="http://wd.sharethis.com/button/buttons.js" type="text/javascript"></script>
<script type="text/javascript">
stLight.options({publisher:'YOUR PUBLISHER KEY'})
</script>

This particular code is for the vertical counters if you pick a different button type you will get different results. Note however, that if you aren’t going to use the counters then you may have issues outside of the scope of this tutorial. I’ve provided the above as an example of what the code looks like when we start out, you should really go to the ShareThis site yourself (sign up if you haven’t already) and copy and paste the button code from them because it will already have your publisher key embedded in it.

How to add the URL and title of your post:

ShareThis provides some attributes to control your counters. You need to add the st_url and st_title attributes to each one of the spans in the loop code shown above. If you don’t add these attributes then by default the counters will share and track the URL and title of the current page. Which is fine if we are viewing a single post, but on the home page for example, the buttons will be tracking and sharing the home page and not the individual posts with which they are associated.

How do we fix this?

You will need to use the get_permalink() and get_the_title() functions to return the URL and title of the current post in the loop. Then insert these values into all of your spans. This brings us to our first function which we will add to functions.php found in your themes directory.

sharethis_button()

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&amp" displayText="Email"></span>
		<span  '.$st_url.$st_title.'class="st_sharethis_vcount" displayText="Share"></span>
		</p>
		';
}

First we write our post’s URL and title to variables including the rest of the attribute definitions as well. So the value of these variables would be something like: st_url="http://www.piddmedia.com/tutorials/sharethis-social-bookmarking-counters-on-your-wordpress-blog" and st_title="ShareThis Social Bookmarking Counters on your WordPress Blog" Then we return our original spans but with the new attributes inserted into each one. I also wrapped the spans in p tags so the counters don’t misbehave with the layout. You might add some other styling depending on your needs.

NEXT:How to insert the counters into your posts: