Twitter’s way of linking URLs is broken. It’s annoying to users, and a pain in the arse to developers. This quick post talks about the problem and offers a solution.

I’ve raised a bug with Twitter and I hope you’ll star it as important to you.

Preamble

A common trope in programming classes is “how do you detect valid email address?”

It should be obvious, right? A string of text, an @, a domain – probably ending in .com.
As it turns out, it’s not that simple. “who+o’toole@invalid.museum” is a potentially valid address, for example.
There are literally thousands of ways to detect the potentially infinite variety of email addresses.

The same is true for URLs – and slavish adherence to guidelines is killing Twitter’s usefulness.

The URL Matching Problem

Which of these strings should be turned into hyperlinks?

www.bbc.co.uk

example.com

http://test

https://test.test

ftp://news.com

As it happens, Twitter only matches “https://test.test” and none of the others.

Twitter’s matching regex is, as far as I can tell, this

If it starts with http:// or https:// and has a dot in it - it's a URL

I think this is a serious weakness. Twitter users are sharing URLs which their followers can’t click on – Twitter is also linking to URLs which don’t exist.

I’ve picked these examples more or less at random.

Solution?

Much like the email regexes, I would take a much more lax approach. Essentially, if it looks vaguely like a URL – link to it.

I would suggest the following rules:

• If it starts with a protocol – http:// ftp:// tel: etc – create a hyperlink.
• If it starts with www. – create a hyperlink.
• If it ends . then a valid TLD – create a hyperlink.
• If it contains a valid TLD followed by a slash then some other characters – create a hyperlink.

The “correct” method would then be for Twitter to perform an HTTP HEAD request to see if the URL is potentially valid. There are three drawbacks to this.

1. It may place excessive load on Twitter’s servers to process and cache these requests.
2. The URL may be that of an Intranet site – and thus inaccessible to Twitter.
3. The URL may be valid but temporarily inaccessible.

Regardless of the method, surely it’s inexcusable that “www.example.com” isn’t detected as a URL whereas “http://bork.bork.bork” is?

ACTION!

If you think Twitter’s approach to hyperlinks is wrong – please make your voice heard at the bug report.

Rather than using an external service like Embed.ly to retrieve thumbnails, all the data is embedded within Twitter Entities.

So, if you request a status using “include_entities=true“, you will be able to grab the image and display the thumbnail using the following code.

So, a tweet like this:

#Photos on Twitter: taking flight http://t.co/qbJx26r

02/06/2011 18:53 via webReplyRetweetFavorite

@twitter

Twitter

Notes

This is very rough and ready proof of concept code. Beware of the following:

• This will only take the first image from the tweet.
• Only images are supported – I’m not sure how their proposed video sharing will work.
• There’s no error checking.
• In the above code, the https URL is used – if you want a non-SSL link, you’ll need to remove the “_https”

Enjoy!

Twitter’s secure API hides the contents of the tweets you are reading. But it doesn’t hide the images of those you converse with.

Raised as Issue 2175.

A Bit More Detail

Twitter has a secure (HTTPS) and insecure (HTTP) API.

When calling the secure API, all the content of the returned message (tweets) are encrypted. Eavesdroppers only see the cipher-text – essentially garbage.

However, within that cipher-text are links to insecure resources.

For example, a user requesting my tweets will get an object which contains a link to my avatar image.

Twitter is currently returning the insecure link:

"profile_image_url" :
    "http://a2.twimg.com/profile_images/1283757621/Sketch_Avatar.jpg"

Twitter should be returning the secure link:

"profile_image_url" :
    "https://si0.twimg.com/profile_images/1283757621/Sketch_Avatar.jpg"

Exploiting This Weakness

A user (Anna) will request the encrypted text of my tweets
She then requests the unencrypted image.
An eavesdropper (Eve) is listening in on the connection between Anna and Twitter.

Anna ---->Eve---->Twitter  (Secure request)
Anna <----Eve<----Twitter  (Secure response)

When Anna makes the initial request to Twitter, the malicious Eve can’t see what they’re talking about.

• The request “https://example.com/twitter/edent” is itself encrypted. Eve only sees an encrypted request to example.com – not “twitter/edent
• The response containing all the tweets is also encrypted

Anna ---->Eve---->Images  (insecure request)
Anna <----Eve<----Twitter  (insecure response)

Anna then makes the subsequent request for the twitter user’s image, a malicious user can see

• The URI of the request.
• The content of the image.

Impact

Truth is, this has a pretty low security impact.

• There is no way to determine a user’s name based on the URI for their image. (Unless you already have both).
• An eavesdropper has no way of knowing if the image is from the timeline, a reply, a DM, a search, a retweet, or the public timeline.
• Images may be locally cached by the user’s browser – so frequency analysis isn’t reliable.
• A malicious user could alter the image in transit.

Worst case scenario is that if a malicious man-in-the-middle knows which images relate to which Twitter users, they know the intercepted user has seen at least one tweet from that user.

Let’s say Anna is communicating with Bob. Eve is trying to eavesdrop.
If Bob has never tweeted, and Eve sees repeated requests from Anna for Bob’s avatar, she may reasonably surmise that they are exchanging DMs.

Overall

This is a pretty low-impact privacy risk.
It can be fixed by Twitter’s API returning HTTPS URIs where possible.
In the meantime, developers can replace “http://a2.twimg.com/” with “https://si0.twimg.com”.

So, how do we go from http://4sq.com/fgIWov
to
?

1 Expand the URL

Get your Bit.ly API Key.

http://api.bitly.com/v3/expand

   ?shortUrl=http://4sq.com/fgIWov
   &login=YOUR_BIT_LY_USERNAME
   &apiKey=YOUR_BIT_LY_API_KEY
   &format=txt

You can, if you prefer, get the info back in JSON or XML. See the Bit.ly API Expand Documentation.

2 The Foursquare URL

Bit.ly gives us the URL which includes a checkin ID and a signature.

http://foursquare.com/edent/checkin/4d7e5b4f9df3f04d7400c394

   ?s=afH3jJg3L9HpLqVIwiqp-YpNL5k

3 The Foursquare API Call

From this, we construct an API call to Foursquare. It looks like this

https://api.foursquare.com/v2/checkins/4d7e5b4f9df3f04d7400c394

   ?signature=afH3jJg3L9HpLqVIwiqp-YpNL5k
   &oauth_token=YOUR_FOURSQUARE_OAUTH_TOKEN

NOTE the Foursquare URL says ?s= whereas the API call requires ?signature=
That caused me more frustration than it should…

Getting your OAuth token is a little cumbersome – follow the steps at the Foursquare Developers site.

4 The JSON Response

I’ll cut the cruft out of here, so you only see what you need to display images.
The response gives us the link to the full sized image – as well as several different sizes should you wish to display thumbnails.

5 Gotchas

Again, nothing in life is easy. Not all foursquare checkins have an image associated with them. In which case, we can do one of three things.

1. Display no image
2. Display the user’s avatar – if it’s public
3. Display an image of the venue – or one of the icons associated with it.

6 Embed.ly

Dabr uses the awesome Embedly service. Rather than having hundreds of different regular expressions and API calls to get embedded images, Embed.ly gives us a single end point to call.
So, rather than rewrite huge chunks of Dabr’s code, I’ve submitted this to the clever-clogs behind Embed.ly – that way, everyone can benefit.

Any questions, comments, or clarifications – please let me know in the comments box.

Here’s some basic code for an Android app which will post the URL of your app to Twitter. Stick it in a button or menu item for easy sharing.

Some important things to note.

1. This is set to post to the mobile version of Twitter.  Your user is on a phone – don’t direct them to a site that won’t work on their device.
2. The second string is URI encoded.
3. Consider if you want to post a “market://” link.  I would advise against it.  Twitter won’t render it as a link and, even if it did, 90% of users won’t be able to click on it.  Make it a link that will direct desktop users to your website, mobile users to a mobile friendly site and Android users direct to the market.

Facebook also has an API for this sort of sharing.

http://m.facebook.com/sharer.php?u=example.com&t=test

Again, it points to the mobile site and needs to be URL encoded.

Happy sharing!

I’ve used this as the basis of a demo widget – “MI5 Terror Threat Level”. The widget displays the UK’s Threat Level on your homescreen. Clicking on it takes you to the MI5 page discussing the threat level.

The threat level is determined by parsing the RSS that the security services so helpfully provide. At the moment, the widget keeps a local copy of the graphics because the RSS feed contains references to “localhost” images.

You can download the widget by scanning in this QR code.

MI5 Widget - QR Code

Pagination is the act of splitting data into logical  pages. Suppose I had a list of item, numbered 0 – 99.  If I want 20 items per page, it’s trivial to see that pagination looks like:

p1 = 0-19
p2 = 20-40
p3 = 41-61
p4 = 62-82
p5 = 83-99

If I wanted to start at, say, page 55 – pagination would look like:

p1 = 55-75
p2 = 76-96
p3 = 97-99

Easy, right?  So why am I telling you this?

Twitter Timeline

Imagine that those items are Twitter Status ID.  Each one represents a tweet in your timeline.

Twitter will allow us to “page” back and forth through our timeline. If we say status ID 80 is the most recent post in our timeline, and we want to see 20 tweets at a time, pagination would look like this.

p1 = 80-60
p2 = 60-40
... etc.

Normally, that would be fine.

The only issue is that friends are posting all the time.  Imagine we start with tweets 80-60.  We go to page 2, but in the meantime, 5 new tweets have been made.

p1 = 80-60
p2 = 65-45

The user sees 5 tweets she has already read.  Not desirable.

If 20 tweets had been made before clicking on the “next” button, this is what happens.

p1 = 80-60
p2 = 80-60

Max_ID To The Rescue (AKA, the easy bit)

Luckily, Twitter allows us to use a max_id parameter in our API calls.  This says “Get the tweets older than this number.”

http://api.twitter.com/1/statuses/home_timeline.json?max_id=123465789

So, using max_id we can ensure that the user never has to read the same tweet twice.  Instead of dumbly using pages, we call the specific tweets we want.

p1 max_id=80 = 80-60

p2 max_id=60 = 60-40

Easy!  We just use the oldest tweet on the page as the max_id parameter when we call the next page.

Looking To The Future (AKA, where it all goes horribly wrong)

So far, we’ve looked at stepping back in time.  Seeing older tweets.  Suppose we want to see newer tweets?

Twitter provides us with a since_id parameter for API calls.  This says “Get the tweets newer than this number.”

Unfortunately, it doesn’t work.  Well, it works but not the way I expected it to!

Suppose our user is deep down in her tweets, this is how I would expect since_id to work

max_id=60  = 60-40

 (So, let's show any more recent tweets)

since_id=60 = 80-60

We see the 20 tweets that occured since the since_id.  Right?  Wrong!  This is what happens?

max_id=60  = 60-40

(So, let's show any more recent tweets)

since_id=60 = 100-80

What?

An Explanation

The since_id retrieves tweets starting with the most recent.  It stops when it reaches the since_id.

I don’t know the max_id that I’m looking for, so I can’t call that.

I could call the most recent 200 tweets and look for the 20 I need.  That’s wasteful in terms of bandwidth and processing – there’s also no guarantee that the since_id will be in there.

So, I have a problem.  The “Older” link in my Twitter application will work.  The “Newer” links won’t.

Any suggestions?

The easy bit.

It’s easy to post the data to Twitpic

$media_data = array(
	'media' => '@'.$_FILES['media']['tmp_name'],
	'message' => html_entity_decode($_POST['message']),
	'key'=>'123465789132465'
);
curl_setopt($ch,CURLOPT_POSTFIELDS,$media_data);

OAuth Credentials

Using Abrahams OAuth library for PHP, it’s easy to get the required OAuth data.

require_once('OAuth.php');
// instantiating OAuth customer
$consumer = new OAuthConsumer(OAUTH_CONSUMER_KEY, OAUTH_CONSUMER_SECRET);
// instantiating signer
$sha1_method = new OAuthSignatureMethod_HMAC_SHA1();
// user's token
list($oauth_token, $oauth_token_secret) = explode('|', $GLOBALS['user']['password']);
$token = new OAuthConsumer($oauth_token, $oauth_token_secret);

// signing URL
$fakeurl = 'https://twitter.com/account/verify_credentials.xml';
$request = OAuthRequest::from_consumer_and_token($consumer, $token, 'GET', $fakeurl, array());
$request->sign_request($sha1_method, $consumer, $token);
$OAuthurl = $request->to_url();

The Tricky Bit

I’m following the header example in the API documentation. Passing these variable to Twitpic is where I seem to go wrong.

$header = array(
'X-Auth-Service-Provider: https://api.twitter.com/1/account/verify_credentials.json',
'X-Verify-Credentials-Authorization: OAuth realm="http://api.twitter.com/"'
);

I then modify the second header so it reads

"X-Verify-Credentials-Authorization: OAuth realm="http://api.twitter.com/",
oauth_consumer_key="aaaaaaa",
oauth_nonce="bbbbbbbbbbb",
oauth_signature="ccccccccccccc%3D",
oauth_signature_method="HMAC-SHA1",
oauth_timestamp="123456798",
oauth_token="15948715-dddddddddd",
oauth_version="1.0""

The Error

401 “Could not authenticate you (header rejected by twitter).”

GAH!

I posted a request asking if there was a pattern to the image sizes and, if not, was it possible to have the sizes returned in the API.

The “standard” open source reply – “fix it yerself” – was predictably swift.

So I did.

The source code is remarkably accessible – although a few more comments wouldn’t go amiss.  This was my first experience with GIT and Github.  It was easy to get the code and, luckily, I didn’t have to dive too far in to its syntax.

I had initially thought about using the EXIF data within the images to get the width and height.  Unfortunately, not every image can be guaranteed to have (accurate) EXIF data.  PHP to the rescue once again with the getimagesize() function.

So, where we previously had

if ($image) $row['image'] = $image;

This becomes

if ($image) {
	list($width, $height) = getimagesize($image);
	$row['image'] = $image;
	$row['image_height'] = $height;
	$row['image_width'] = $width;
}

Many thanks to Matthew Somerville for testing and releasing the patch in double quick time. You can examine the changes made to the code.

So now the API returns,

<image>/images/mps/10409.jpg</image>
<image_height>59</image_height>
<image_width>49</image_width>

Brilliant!

So, I have a problem, I can see how much effort it will be to fix, I suggest a solution, it works and goes into production.  That’s the awesome power of open source.

#hashtag – As long has there has been a way to search Tweets* people have been adding information to make the easy to find. The #hashtag syntax has become the standard for attaching a succinct tag to Tweets.

The Twitter Engineering Blog

That’s all well and good, but as I discovered yesterday, without standardisation the ability to search falls apart.

I’m not talking about whether you should use the #LondonFire tag rather than #FireOfLondon or #LDNfire. Rather; how does a computer recognise what a valid tag is?

Why Does This Matter?

Search and tracking quickly break down if they are inconsistent.
For example, if you are using #Romeo&Juliet to mark all your conversations about the play you are watching, different Twitter clients will link through to either #Romeo, #Romeo&, or #Romeo&Juliet.  Each search returning potentially different conversations.

What’s The Convention?

Twitter’s website ought to be the definitive source of how hashtags work. This is their main site.

Twitter Website Hashtag

Yet, when we visit their mobile site – we get a completely different experience.

Mobile.Twitter's hashtags

Application Confusion

Because there aren’t any widely publicised definitions for what hashtags are, some applications have a significantly different attitude to hashtags

SocialScope Hashtags

UberTwitter's Hashtag Support

Standardisation

To be fair, the Twitter team do have a standard.  Even if they don’t use it themselves.

They even have some limited test cases and libraries in Ruby and Java.

So, given that Twitter, their implementation and apps all disagree on what a hashtag is, let’s try to work our what they should be.

Anatomy of a Tag

To begin at the beginning.  A hashtag starts with a hash. #.  Simple, no? No.

There are two different hash symbols! There’s the # we all know and love, and there’s ＃.  Looks pretty similar, but in fact it’s the unicode symbol [U+FF03]

Actually, that’s not the beginning.  What comes before the # of the hashtag?

Consider the following examples – which should be hashtags?

• #tag – the # starts off the Tweet
• This is my tweet #test – the # comes after a space.
• This is it.#tag – the # is pushed against some punctuation, perhaps for reasons of space.
• Here we go-#LiftOff – the # is pushed against a -
• I’ve run out of space#OhNo – the # is pushed against some text
• &#nbsp; – the # is part of an HTML entity
• text　#hashtag – the # comes after a “wide space” (U+3000)
• Should I use #tag/#hashtag? The # comes after a /
• Is this valid ##tag – there are two #s

So, we can see it’s a little more complicated than we first thought.

The End

Let’s skip over what’s in a hashtag and as “how do we know that a tag has finished?”

Consider the following examples -

• New album #OMG! – should the ! be part of the hashtag?
• #BreakingNews: dog bites man – should the : be part of the hashtag?
• (is this a #tag) – should the ) be part of the hashtag?
• I like #tags#

We probably don’t want to have any punctuation at the end of our tag.  Can you think of any counter examples?

Yummy Filling

Our language is more than just the letters A-Z. We’ve got punctuation, numbers, symbols and all manner of other glyphs.  Which of them count as part of a hashtag?

Take a look at these examples

• Vote Bush! #Don’t
• My dog died #:-(
• Einstein #e=mc^2
• I’m on bus #123
• I’m giving #110%

Using Twitter’s standards, none of the above render as complete tags.

Foreign Languages

We’ve mentioned accents above.  As we can see in the first example, “funny” characters can cause problems.  Broadly speaking, there are three issues.

1. Accents.  Should the é on #Café be linked?
2. Accents.  Is #Romeo the same as #Ŕöméø?
3. Japanese, and some other languages, don’t use spaces.  Is #tagの valid? What about # 会議中 ?

Exhausted

These are a fraction of the possible problems.  It’s exhausting trying to find all the possible textual combinations and permutations which could lead into a hashtag.  No wonder there is confusion!

Search is a complex, profitable, and useful business.  It’s of vital importance that there is a legitimate, comprehensive standard which all sites and applications can follow.

This sort of knowledge is common in life – but is fatal in computing and design. Take the following tweet I received.

Mawkins

(Mark Hawkins)

@edent @dabr you folks aware ampersands / &s don't seem to work as part of hashtag links?

On 24-2-2010 16:27:19 from TweetDeck in reply to Terence Eden

The complaint was that #tfm&a should be rendered as #tfm&a not #tfm&a.

Everyone knows that’s how hashtags work!

On Twitter’s website, find the page which discusses hashtag syntax. Find where they explain how they should be styled.

You can’t.

And thus implicit knowledge is born. Dabr only looks at letters and numbers in a hashtag. It assumes that any other character is the end of the tag.

Dabr's Hashtag

Without official guidance – implicit knowledge develops.

Has Dabr Got It Wrong?

No. I don’t think so. Take a look at how Twitter on the web renders hashtags…

Twitter's Web Site

…and on the mobile.

Twitter Mobile

So Where Does Render The Full Tag?

Several applications don’t render tags in the same way as Twitter. Take a look at SocialScope

SocialScope Hashtags

Tweetie2

I’ll upload more screenshots if I find examples of “badly behaved” hashtags.  Please let me know if you find any.

What Does Twitter Say?

Twitter has one page devoted to hashtags.  It is a support page for hashtags.  This explains to people what hashtags are.  There’s no detail on valid characters, maximum length, or any of the things which might be useful for a developer or designer.

Edit 2010-02-25

David Dorward has pointed out that there is an official resource. On the Twitter Engineering blog – which isn’t linked to from the developer site – there is a page discussing hashtags and how to validate them. You’ll notice that they are rather circumspect on what should constitute a hashtag.

Conclusion

Standards and guidelines allow developers to create compatible applications.

Without explicit recommendations, developers will diverge as widely as possible.  Twitter – and everyone with an interest in compatibility and usability – needs to ensure that the knowledge they impart is explicit.

Letting people make it up as they go along leads to confusion.

It’s one of my gripes with Linux.  If you’re editing a configuration file, you are relying on yourself to sanity check your input – often without knowing what the limits are.

Take these two different examples.

In a text file, we might have:

#Maximum Widgets to fidget
maxW_to-F = 0

Whereas a GUI would show

How many Widgets do you want to fidget?
1235

Even if you don’t know the rules behind Widget fidgetting (must be a prime number lower than 7), the GUI won’t let you choose a value that you can’t select. The GUI doesn’t prevent you setting an innapropriate value – just an illegal one. Your config file, however, could be set to any crazy value that a user type – often resulting in “unpredictable” results.

#Maximum Widgets to fidget
maxW_to-F = seventeen

It’s with this in mind that I’ve made the following change to Dabr – the mobile Twitter client.

To Auth or Not To Auth? That Is The Question

Twitter’s API has bug / peculiarity (reported to their discussion board) which causes Dabr to log a user out. Let me explain the steps

• User 1 (@private) has set her tweets to “protected”.
• This means no one can see @private’s tweet unless she allows them.
• @private has not allowed User 2 (@edent) to view her tweets.  She is protect from his view.
• @edent clicks to view @private’s profile.
• @edent can see that @private has 42 friends, 17 followers and 3 favourites.

So far, this is the same behaviour on Twitter’s website as it is through their API.  Here’s the difference

Web

• @edent tries to see @private’s followers and can see their names, profile pictures etc.
• @edent can also see @private’s friends
• @edent cannot see @private’s favourites (or even how many favourites she has)

API

• @edent tries to see @private’s followers, friends or favourites
• Because @edent isn’t allowed to see @private’s info, the API returns 401 Authorisation Required.

This is where things get tricky. Dabr sees the 401 and concludes that the user has invalid credentials.  It then, as a security measure, clears the user’s cookie and logs them out.

This may be a little harsh, but HTTP 401 essentially says that the authorisation has failed.

Fixing It

There are 3 ways that this could be fixed

1. Twitter could rationalise the API to allow access to the same content that a web user gets.
2. Twitter could return a different status code.
3. Dabr needs fixing.

So, how do we get Dabr not to log out when it receives a 401 only under these specific circumstances?

Looking at the code, we can see that Dabr simply sees the HTTP response code.  To fix it we’ll need to pass extra parameters, check where the code was called from, investigate all the edge cases, add more logic to the system, futz around breaking things, etc… etc…

What a pain in the…

Or

Don’t let users do things they can’t do.

If a user can’t see the information – why do we even let them try to see the information?  Why can’t we just get rid of the link?

This is what a user currently sees:

Old Style

We’ve established that they can’t view followers, friends and favourites.  So we can get rid of those links (but not the information).

New Style

(Incidentally, I’ve changed the order of the links.  I’ve tried to group together similar items.  Followers, friends, favourites and lists go together. Then DM. Finally, follow, block, report spam.)

Now a user cannot click through to an unwanted error message.

Or

There is another way round this.  With “Direct Messages” we could do the same thing – simply remove the link if you’re not able to send that user a DM.

Instead, we’ve taken the approach of displaying a suitable error message.

Direct Message Warning

The advantage of this is that the user gets an explanation as to why they are unable to complete an action.

Your Thought?

Which do you prefer? Being unable to click on a link (with no explanation) or clicking on a link only to be given a warning message?

Thanks – once again – to the clever-clogs at TheyWorkForYou, at least half of the problem has been solved.

The API call getConstituency now has a future parameter.  Adding future=1 to the call will return the constituency the Postcode will be in for the 2010 General Election.

I’ve also made use of TWFY’s getMP API call.  It returns enough detail about the current MP to be useful – including a photo.

So, a valid postcode will get you something like this:

MP Photo

One thing to note about the photos. Each one is a different size. This gives us two small problems.

Firstly there is no guarantee of how small the photo is. Should one MP’s photo be massive, that could cause a problem for the phone trying to download it. All the ones I’ve tried so far have been thumbnail size.

Secondly, because we don’t know the height and width of the image, we can’t put the height and width attributes in the <img> tag.  Not only is this poor HTML, but it will mean that rendering the page will take longer and – depending on the phone – page reflow may occur.

To mitigate this issue, I’m using http://tinysrc.mobi/ – it will automatically shrink the picture to fit the phone.  This doesn’t help with the page reflow issue though.

As for geo-locating Postcodes – I suggest you respond to Ordnance Survey’s consultation and / or lobby your MP.

Until there’s an official source for postcode data, I’ve gone back to using Yahoo!’s geo-location API.  I then pass these co-ordinates on to the Google Maps API.

So, VoteUK lives on.  Next steps are to make sure that all the data I got from the Electoral Commission is valid and build a framework for volunteers to enter their local candidate details.

I’m a big fan of AudioBoo – for those who don’t know it,  AudioBoo allows you to record some audio on your phone and then publish it to the web.  It’s like instant podcasting.  Originally only for the iPhone, AudioBoo now works on Android and there’s an S60 version comeing out “soon”.

I’m very proud to announce that as of r260 – Dabr now support AudioBoo!

It all started with a tweet from David Carrington (creator of Dabr) asking how one would go about linking directly to a tweeted ‘boo.

So – how do I turn a tweeted ‘boo like http://boo.fm/b73803 to the associated MP3 of http://audioboo.fm/boos/73803-rockbandboo.mp3 ?

Bring Me The API!

An API is a way for two computers to talk to each other.  The client (dabr) asks the server (AudioBoo) a question.  The server replies with some data and the client then does something with it.

AudioBoo’s API is a “work in progress” – that’s the polite term for “not quite finished”.
There are various APIs to get information about a ‘boo. However, it’s not particularly intuitive. For example, if I use /audio_clips/

http://api.audioboo.fm/audio_clips/b73803.mp3

I get an error.
I have to drop the b to get

http://api.audioboo.fm/audio_clips/73803.mp3

I asked on the AudioBoo forums if there was a better way but I didn’t get a quick response – so I turned to twitter. One of the top AudioBoo bods, Mark Rock, is an active twitterer (seriously – isn’t there a better word than that?)

markrock

(Mark Rock)

@davidcarrington @edent just updated server so this works - http://boo.fm/b1234.mp3

On 21-12-2009 12:12:59 from TweetDeck in reply to David Carrington

So, now I can link http://boo.fm/b73803 to http://boo.fm/b73803.mp3 – simple. Here’s what it looks like in the browser.

AudioBoo

Phreadz

Phreadz is a service which allows you to post VITAL – Video Images Text Audio Links – it’s a fantastic service, so when Kosso (its founder) asked me to integrate it into Dabr, I was keen to take on the challenge.

The code was quite simple and can be seen in r261. But there was one small complication – image sizes.

The thumbnail images from Phreadz aren’t always suitable for mobiles. If images are too large, it will slow download speeds and potentially cost people money.

So, I used tinysrc.mobi. Tinysrc is a very simple API which will resize any image to a mobile friendly format. It detects the phone’s user-agent string and creates a suitable sized image.

Here’s what it looks like.

Phreadz

Conclusions

I’ve used 4 separate APIs here – twitter, AudioBoo, Phreadz, tinysrc – the joy of Web 2.0 is that all those disparate services can combine to create something new and magical.

API designers often need to think about how their products will be used “in the wild”. It’s very easy to create something that works very well for your requirements – but much harder to think about what others will need.