Using The Echo Nest to get the top 100 Twitter artists

This week Twitter and The Echo Nest announced a partnership where  Twitter IDs for verified accounts are incorporated into The Echo Nest’s ID mapping layer (aka Rosetta Stone).  This makes it easy for developers to get the Twitter handle for an artist.   To demonstrate just how easy it is, I wrote a little web app that displays the top 100 artists that have  verified Twitter accounts.    Here’s the core bit of code for the app:


function fetchTopTwitterArtists() {
    var url = 'http://developer.echonest.com/api/v4/artist/top_hottt?callback=?';

    $.getJSON(url, { 'api_key': 'GETYOUROWNAPIKEY', 'format':'jsonp',
      'results': 100, 'bucket': ['hotttnesss', 'id:twitter'], 'limit': true},
     function(data) {
       for (var i = 0; i < data.response.artists.length; i++) {
          var artist = data.response.artists[i];
          var elem = $("<li>");
          var link = $("<a>");
          var handle = artist.foreign_ids[0].foreign_id.replace('twitter:artist:', '');
          link.attr('href', 'http://twitter.com/' + handle);
          link.text(artist.name);
          elem.append(link);
          $("#results").append(elem);
       }
     }
  });
}

The key bits here are creating the artist/top_hottt request to The Echo Nest and  adding the id:twitter bucket and setting limit to true. This tells the Echo Nest to include the twitter handle information in the results and limit the results to only those artists that have twitter information.  After that it is just pulling the data out of the results and formatting it for the lovely display.   The Twitter ID info is returned in an ID block that looks like this:

            {"catalog": "twitter","foreign_id": "twitter:artist:LMFAO"}

Note that the Twitter ID is returned in a URN form. To get the actual Twitter URL for an artist we just need to replace the ‘twitter:artist:’ bits with ‘http://twitter.com/&#8217;.

You can see the app here:  Top 100 artists with verified Twitter accounts.  As you can see, I tried to make the web app as ugly as possible. The only thing it needs is some Comic Sansification.  The code is available for detailed study in this gist.

, ,

  1. #1 by Rich on January 22, 2012 - 6:05 pm

    Fantastic, this is the kind of example I’ve been looking for for the EN API.

    Thanks for getting me started.

%d bloggers like this: