Posterous
Dan is using Posterous to post everything online. Shouldn't you?
Me_thumb
 
blog.mled.me
Oct 4 / 2:11pm

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!

23 comments

Oct 04, 2009
Lisa Yallamas said...
But where's the source code found for the post to put this code into?
Oct 04, 2009
Dan Monsieurle said...
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.
Oct 04, 2009
Dan Monsieurle said...
I'll update the post...
Oct 06, 2009
Michael Litman said...
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.
Oct 06, 2009
Dan Monsieurle said...
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...
Oct 12, 2009
Tal Shafik said...
Thanks for this, just what I was looking for. However, I think iframes are supported. I'm using one.
Oct 12, 2009
Dan Monsieurle said...
In that case I need to take another look at it!
Oct 12, 2009
Tal Shafik said...
Had a hell of a time trying to position the image. Ended up going for a more minimalist, text-only approach. Thanks again.
Oct 29, 2009
appfreak said...
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.
Nov 02, 2009
xeleh said...
Thank you for sharing this information, very useful.
Nov 03, 2009
Richard Mackney said...
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://richard.mackney.com/brewing-beer-at-nutbrook-brewery" height="61" width="50"></iframe>

Nov 03, 2009
appfreak said...
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)
Nov 03, 2009
Richard Mackney said...
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 ;)

Nov 03, 2009
Dan Monsieurle said...
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.
Nov 04, 2009
Richard Mackney said...
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
Nov 09, 2009
Brandon Cullum said...
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?

Nov 09, 2009
Dan Monsieurle said...
I've changed my code to use an iframe:

<"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.

Dec 26, 2009
Charnita Fance said...
Thank you so much! This really helped :)
Jan 01, 2010
Michael Litman said...
Dan, I'm trying to use this 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.

Jan 02, 2010
Dan Monsieurle said...
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.
Jan 02, 2010
Michael Litman said...
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..)
Jan 02, 2010
Dan Monsieurle said...
Drop me an email - dan@mled.me
Jan 04, 2010
Cory Watilo said...
Feel free to share on http://posterize.us =]

Leave a comment...

 
Got an account with one of these? Login here, or just enter your comment below.
Posterous-login    Connect    twitter



 
Hi! I'm Dan

my life is still in beta


blog.mled.me logo by DarwinianTheory