Add Retweet Links to Your Blog Entries in Moveable Type

After reading Amy Iris's post on encouraging retweeting, I wanted to add an option for users to easily retweet posts on this site. Unfortunately, the method that Amy's recommending is very manual, and I'm a little bit lazy about things like that (especially anything that makes it harder to post something to the site, and won't work for automated posts from services like Posterous and Flickr.)

I've quickly written up some javascript MT code that does 75% of what Amy's doing manually -- it generates the appropriate link to Twitter, with the title of the post and the link URL properly escaped. It <i>does not</i> shorten the link the way that Amy proposes doing, nor does it allow you to track clicks on ths link. Twitter will automatically shorten URLs entered directly into its web page, so don't worry about your links being too long when users get sent there - the retweet will still work. (If anyone knows of a URL shortening service that has a Javascript-accessible API and click tracking, let me know.) Also, to get this automated, you'll have to add it to your blog's entry template, and substitute the appropriate variables (I've put in the right ones for Moveable Type, which I use.)

I'm considering coming up with a server-supported solution that will implement that last 25% and doesn't require you to have access to templates on your weblog, but in the meantime, here's the javascript code you need to add to your blog entries each have a retweet link.

(And of course, if you find this useful, retweet it!)

Updated March 13, 2009:
I've removed the use of the javascript function to encode the Retweet link and instead used Moveable Type's encode_url tag output modifier. This protects against entry titles with an apostrophe that would prematurely end the string being fed to escape(). The downside is that if you're adopting this code to Wordpress or another CMS, you'll have to look up how to modify your tag output to ensure properly escaped title text. Pretty much any mainstream CMS will have support for this; at worse, you can still use an escape() command in the javascript and just make sure not to use apostrophes in your title texts (or escape them manually.)

Remember to replace @USERNAME with your Twitter username.

<!-- Retweet link from http://karlo.org/ -->
<a href=\"http://twitter.com/home?status=RT%20@USERNAME%20<$MTEntryTitle encode_url="1"$>%20<$MTEntryPermalink encode_url="1"$>">Retweet</a>
<!-- End Retweet link script -->

For ease, here's a Pastie of the same.

Here's the previous Javascript version in case it's useful to anyone; it may be useful as a template if your CMS doesn't support escaping tag outputs or you want to otherwise pre-process the link:

<!-- Retweet link script from http://karlo.org/ -->
<script language="Javascript"> 
  document.write('<a href=\"http://twitter.com/home?status=' 
  + escape('RT @USERNAME <$MTEntryTitle$> ')
  + escape('<$MTEntryPermalink$>')
  + '\">Retweet</a>');
</script>
<!-- End Retweet link script -->

For those of you wondering: yes, I feel silly for not figuring out the non-Javascript version of this the first time I looked at it. Such is life... I couldn't let it stop me from posting the newer, non-JS version here since it seems like this topic has been of interest to a good number of folks. Sometimes the solution you come to first just isn't optimal.

 

Comments

[Amy Iris]

Pretty Cool!

So are the values $MTEntryTitle$ and $MTEntryPermalink$ universally accepted? Is that a Blogger thing, or will it work in Word Press, etc.?

As you probably know, I'm all about automations!

-AI

[Tom Karlo]

Amy,

Those tags are the ones used in MoveableType. Folks using Wordpress or other platforms will need to substitute in the appropriate tags for their system. Since the whole clip should go into the entry template (which already includes the substitution tags for the title and the URL, generally) it should be pretty straightforward to find them in the existing template.

Tom

[Jag SEO Follow]

Thanks for the code how will i fix a width size for long urls?, some times it appears

[Tom Karlo]

A "long" URL may appear in the retweet if the overall message plus the URL is short enough that Twitter decides not to shorten it. One option might be to replace the "MTEntryPermalink" with a pre-shortened link.

The longer URL showing up in the Twitter window when the user clicks on the retweet link is generally not a problem - Twitter will automatically shorten links and also keeps the longer version of long tweets available for users on the web.

[BiblioScribe]

What if $MTEntryTitle$ has the potential for containing an apostraphe. The escape will not work and the javascript will not run. Is there a way around?

[Tom Karlo]

Thanks to the previous comment I have updated the code slightly to fix that bug with handling apostrophes.

Jag SEO: URL shortening is managed by Twitter in this case, so unless you want to add a URL shortening mechanism to your CMS and have it done there isn't any way to control it as long as you are trying to do automated Tweets. I _have_ seen an increasing number of web sites that are doing their own short URLs (Zappos.com for one) so I wouldn't be surprised if someone made a short URL generator plugin for MT one of these days.

[airguitarandy]

Hey great post, Im trying to make a retweet link for in my youtube videos info section like in the vid below.

http://www.youtube.com/watch?v=N0B4ysclq4U

Im guessing it involves some sort of routing to a script via the bit.ly the link!? Would be great if you could do a post on how to do this!

That would rock, cheers, Andy