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 http://posterous.com/main/account 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:You should change the following parts:
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.
UPDATE
I've recently changed the theme here on blog.mled.me. 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="http://api.tweetmeme.com/widget.js?url={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="http://api.tweetmeme.com/widget.js?url={Permalink}&source=mled&style=compact" frameborder="0" height="62" width="52"></%iframe>
Hope this helps!
23 comments
I've included the code below ... not sure how it will display once I hit the comment button though! ...
On my main Posterous, I prefer to add it to the body of the post (manually) as a lot of stuff is not worth re-tweeting ;)
Anyone using other widgets with iframes on Posterous? I'd love to see some examples.
src="http://api.tweetmeme.com/imagebutton.gif?url={Permalink}"height="61"
width="51"/>
As of right now the picture shows up but it just links me to the tweetmeme webpage instead of actually being able to retweet.
Any ideas?
<"iframe src="http://api.tweetmeme.com/widget.js?url={Permalink}&source=mled" frameborder="0" height="62" width="52"></"iframe>
Take out the " before the words iframe, I've done this in case the button appears in my comments.
I will update this post to include my new code.
<iframe src="http://api.tweetmeme.com/widget.js?url={Permalink}&source=litmanlive&style=compact" height="62" width="52"></iframe>
But it only shows a thin line of green, not the entire compact button with the word retweet if that makes sense. Tried adjusting the height and width dimensions. Any ideas?
I originally used the larger style retweet button but felt it to be a bit too cumbersome.

