Adding Tweetmeme button to Posterous blogs

About 20 mins ago I realised that my post on adding the Tweetmeme button to Tumblr blogs had been added to the Related Articles section of Tweetmeme's Help section. How cool! For those that have been living under a rock - Tweetmeme is a fantastic service for tracking what's hot on Twitter and provides some great stats for content publishers to show how far word-of-mouth pushes each blog post. Tweetmeme is performing extremely well - check out this Chart of the Day from Silicon Alley Insider.

Having participated in the Posterous Custom Theme Alpha (many thanks Garry), I thought I should have a quick play with this blog to see if I could get the Tweetmeme button added to my theme. Looking around, I knew this must be possible as Guy's Holykaw! Alltop/Posterous blog is already using it.

It turns out that the process is even easier than on Tumblr because there's no javascript or iframe allowed in a Posterous theme (yet), so the only route left is to use the image based Tweetmeme button designed for RSS and email.

Go to Click on the down arrow to the right of the "Post by email" button and click on "Theme my site". Once that has loaded, there's a tab in the top left labeled "Advanced" which will show you all the code.

Here's the code I am using:
<a href="{Permalink}&"><img src="{Permalink}" height="61" width="51" /></a>

You should change the following parts:

&service=Your Preferred URL Shortener
&source=Your Twitter Username

To use this on your Posterous blog, insert it somewhere between {block:Posts} and {/block:Posts}
so that the ?url={Permalink} actually picks up the individual post's URL. I cheated a little by using the CSS that was designed to keep the date to the top left of each post's title as a way to hold the Tweetmeme button in place - <div class="date"></div> - and I then put the post's date stamp at the bottom of each post before the Comments.

If you need more info on including API keys for URL shorteners then check this help page on Tweetmeme, otherwise this should 'just work'.


I've recently changed the theme here on The new theme is Posterous' Paramaibo plus some CSS tweaks of my own. The Tweetmeme button is no longer included on my main page, simply on a permalink page for each post.

I'm no longer using the image based button, instead I've included the iframe version. Here's the code, but I've added two % before the words iframe in the hope that this Posterous doesn't embed it:

<%iframe src="{Permalink}&source=mled" frameborder="0" height="62" width="52"></%iframe>

If you want to use the compact version of the iframe, the code should look like this:

<%iframe src="{Permalink}&source=mled&style=compact" frameborder="0" height="62" width="52"></%iframe>

Hope this helps!