Adding Tweetmeme to Tumblr blogs

I’ve added a Tweetmeme button to this Tumblr. It didn’t take me long to figure out where it should go in my theme, Tweetmeme have a good system so installing it is quite simple. Tweetmeme didn’t seem to pick up on individual post URLs which is why you need to remember to include the line

tweetmeme_url = ‘{Permalink}’;

Here’s how I did it…

You need to put this javascript:

<script type=”text/javascript”>
tweetmeme_url = ‘{Permalink}’;
tweetmeme_source = ‘YOUR TWITTER USERNAME’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>

somewhere in between {block:Posts} <div class=”post”> and </div> {/block:Posts} so that it can use {Permalink}, otherwise it’ll just try to tweet your whole website.

Obviously you should put your twitter username where it says “source =”, or else delete that whole line to have “RT @tweetmeme” sent in the tweet instead.

If you’ve got a theme similar to mine, it might help to see the code in context, so here’s what my rather messy HTML looks like:

{block:Posts}
<div class=”post”>
{block:NewDayDate}
<div class=”date”>
<script type=”text/javascript”>
tweetmeme_url = ‘{Permalink}’;
tweetmeme_source = ‘mled’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script><br><a href=”{Permalink}”>{ShortMonth} <span class=”day”>{DayOfMonthWithZero}</span> {Year}</a></div>
{/block:NewDayDate}
{block:SameDayDate}
<div class=”date”>
<script type=”text/javascript”>
tweetmeme_url = ‘{Permalink}’;
tweetmeme_source = ‘mled’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script><br><a href=”{Permalink}”>{ShortMonth} <span class=”day”>{DayOfMonthWithZero}</span> {Year}</a>
</div>
{/block:SameDayDate}

There’s an alternative Tweetmeme button which is much more compact, and you can use that by adding this line:

tweetmeme_style = ’compact’;

before the first </script>

If you’re still stuck there’s a help page on Tweetmeme which describes the choices for customising the button and lists all the code snippets you’ll need.

Update:

A couple of people have asked why the code hasn’t worked for them, and I originally thought it was a problem unique to the Classy/Bigfoot themes. Many thanks to Sam Julien for this post explaining his fix. Problem solved!

In short, you need to retype the quotation marks (all the ” and ’ ) once you’ve pasted them into your Custom HTML editor when customising the Tumblr theme. Sam figured out that when pasted, the editor applied a different “curly smart” type of quotation mark, instead of a plain and recognisable type.

Those of you using Classy/Bigfoot themes might want to check out Sam’s cunning CSS code - he has made a .retweet { } segment for styling the Tweetmeme button and positioning it neatly between each post’s date and tags.

Nice work Sam!