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!
