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:
<a href="http://api.tweetmeme.com/share?url={Permalink}&service=bit.ly&source=mled"><img src="http://api.tweetmeme.com/imagebutton.gif?url={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'.

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!

53 responses
But where's the source code found for the post to put this code into?
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.
I'll update the post...
Sorry for the slightly newbish post. I've added it to the top of each post but how do you have it lining up nicely to the left. Aesthetically looks much better.
This is what I meant by "I cheated a little". You use CSS to hold things in position. This blog's theme came with the date stamp to the left of the post, but I've deleted that and replaced it with the Tweetmeme button. If I figure something out, I'll let you know. "&style=compact" doesn't work with this button - that could have been a slightly neater alternative. I might ask Tweetmeme about that...
Thanks for this, just what I was looking for. However, I think iframes are supported. I'm using one.
In that case I need to take another look at it!
Had a hell of a time trying to position the image. Ended up going for a more minimalist, text-only approach. Thanks again.
I'm having problems with adding the tweetmeme button. I have to figure out how to position it nicely, but it removes the "edit, tag,.. options" or it messes around with the posterous label.
This is brilliant, thanks for the info. So far I have been adding an iframe into the start of the actual post, it works quite well and allows me to decide when to use the button.

I've included the code below ... not sure how it will display once I hit the comment button though! ...

<iframe src="http://api.tweetmeme.com/widget.js?url=http://r..." height="61" width="50"></iframe>
Do you use that code in the website's code or do you include it in the post independently? (your pictures don't have it)
On my test Posterous (http://posttest.posterous.com), it's added to the theme with the {Permalink} so it can appear on every post.

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 ;)

Thanks for the information on iframes! During the alpha stage of Posterous theming support for iframes was missing. I'm going to try adding the compact button to blog.journotwit.com

Anyone using other widgets with iframes on Posterous? I'd love to see some examples.
I've added a few iframe widgets into the Posterous theme but then decided to remove them! ... I did however, make a post listing (and embedding) a load of common ones here ... http://richard.mackney.com/handy-widgets-and-badges
This is the code im using..


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?

I've changed my code to use an iframe:

<"iframe src="http://api.tweetmeme.com/widget.js?url={Permali..." 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.

Thank you so much! This really helped :)
Dan, I'm trying to use this code..

<iframe src="http://api.tweetmeme.com/widget.js?url={Permali..." 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.

Sorry about the slow reply. I'd say the reason is because you've put the height and width of the full size button there... I think it might work if you just delete the height and width parts. Give it a try.
Cheers for that. I took the dimensions out and it left a huge space between the button and the headline of the post. Tried moving it around eg to the end of the post and still the same. Bizarre. Stumped. Can twitpic if necessary. (or take this over to email..)
Drop me an email - dan@mled.me
Feel free to share on http://posterize.us =]
I'm trying to use this code...

<iframe src="http://api.tweetmeme.com/widget.js?url=http://s... Ford Is Rich/&style=compact&source=SuburbanBully&service=bit.ly" height="20" width="90"></iframe>

When i click on it the original page title does not shows on "Retweet This" popup window. It shows "FrontLookCMS.com" instead of "Harold Ford Is Rich".

Anybody help me?

I'm not sure where you're trying to embed that, but I tried suburbanbully.com and the tweetmeme button worked there. Can you give more details?
Thanks for your valuable feedback but I got fixed it.
I'm having problems with adding the tweetmeme button. I have to figure out how to position it nicely, but it removes the "edit, tag,.. options" or it messes around with the posterous label.
What is your blog URL? You will need to make adjustments to the theme CSS
I'm having problems with adding the tweetmeme button. I have to figure out how to position it nicely, but it removes the "edit, tag,.. options" or it messes around with the posterous label.
thanks for code
This is the code im using..
Had a hell of a time trying to position the image. Ended up going for a more minimalist, text-only approach. Thanks again.
So, any thoughts about the new twitter button Dan? ... I've banged it in an iFrame for now ... http://richard.mackney.com/add-the-new-tweet-button-to-posterous
Hi Richard, I haven't had a chance to take a look at the new Twitter button yet. Thanks for the link! I see you've tested it on customising.posterous.com, I'll have to try it for myself over the weekend.
The Posterous is the easiest publishing platform around. If you can email, you can manage a website and share it with small groups or the world Thanks for sharing the information.
Regards,
Jack - minnesota attorney
The planning that goes into a wedding is something akin to a full out declaration of war. There are dress fittings, shoes that will not come out the right color and that miserable. Thanks for sharing the informative post.
Regards,
Jack - helmet camera
You have provided ample information here on your post that can easily be understand by your readers. I am admiring you for that. Thanks for this insightful post and I am hoping more to come.

Multi vitamins

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 a fantastic service for tracking .
lA LA LA A! i LA
This post is really sweetest on this notable topic. I harmonise with your conclusions and will thirstily look forward to your incoming updates. Keep posting good blogs. Thanks. joomla developers | joomla developer
Spot on with this write-up, I actually think this website wants far more consideration. I’ll in all probability be again to read far more, thanks for that info.
Spot on with this write-up, I actually suppose this web site wants much more consideration. I’ll in all probability be again to learn much more, thanks for that info.
Amazing thought,
good stuff, There are many individuals browsing about the same topic.,now they will get satisfactory resources by your guide.
We're anticipating for more particulars about this
Transmission Repair Denver
Used cars Brighton CO
denver heating company
My wife and i felt thankful that Raymond could deal with his research from the precious recommendations he had when using the site. It's not at all simplistic just to possibly be handing out tips and tricks that many many people have been trying to sell. And we recognize we have got you to appreciate for this. The most important explanations you've made, the simple blog navigation, the friendships your site assist to engender - it is most fabulous, and it is leading our son and us reason why that topic is cool, and that's exceedingly pressing. Thanks for the whole thing!

pinterest invites

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 a fantastic service for tracking .
8 visitors upvoted this post.