ShareThis links on your tumblog

flickr photostream

elsewhere

June 19, 2009

Those nifty buttons are a great way to make your blog a better place for your readers. ShareThis has worked pretty hard at making them easy to integrate into your site. When you sign up, you get some button code that you can plop down inside your post (like I did earlier in this paragraph), or better yet, inside your post template next to the comment button.

This is fine for a single post, but what if you want users to be able to share posts on the main page without having to click through? Just pasting the script down for each post has the negative effect of linking to your home page instead of the entry you’re trying to share! This is not so helpful later on when your post has wriggled it’s way down into the archives.

Fortunately the ShareThis API allows you to include their script in your <head></head> tag once and then add this snippet with the proper link and other info needed to share your post:

You could fill one of these out manually and put it in each post, but that would be no fun, would it? I’m a lazy guy, so I googled a bit and turned up this automatic solution, which uses prototype (a popular javascript library) to voodoo the information out of your document and into the snippet. I’m more of a jquery guy myself, and got the whole thing working using my favorite library, but it made me uneasy that this was relying on the structure of the page extract information to ShareThis. This is likely to break if you change your post layout.

To get around these problems and make it easer for non javascript hackers, I decided to use tumblr template tags (yay alliteration) to create the ShareThis snippet directly. This gives you control over what fields from tumblr go into ShareThis, and improve the quality of your outgoing links. As you look at the snippet, keep in mind that tumblr template blocks like {block:Photo}{/block:Photo} only appear if the entry is a photo, so you can customize what data you send for each type of post:

To use this script, first paste your ShareThis script <head>Inside the head section</head>, then paste the apove script wherever you want your ShareThis link to go on the individual blog post. For me, this was at the end of the posts loop:

{block:Posts}
 ...
 <!--INSERT SCRIPT HERE-->
{/block:Posts}

Notes:

If you’re editing the script, make sure every key: ‘value’ pair has a comma after it, except for the last one.
The ShareThis publish date is in ISO 8601 format. Pretty easy to reproduce with tumblr template tags.
Tumblr isn’t very consistent in having the same metadata across post types (why? I assume this was a design decision?). Chat posts can have titles, but videos and audio posts cannot. Most of these shenanigans are to map the inconsistent post fields onto the ShareThis API in a way that makes sense.
Using tumblr’s template tags, you may end up with content in the javascript that is not properly escaped. This is a weakness of this solution that is addressed by pulling sanitized data out of the DOM with javascript, but that depends on the layout of your particular template.

I did a fair bit of testing on the links this script produces, but it could certainly use more. Let me know how it works for you, and feel free to fork it on github.

I hope you find this useful!

Was the post too technical for you? Not technical enough?