Last.fm JSONP Recent Tracks Widget

Published on February 17, 2009 in General, JSONP and JavaScript. Comments

I wanted to add a recent tracks on Last.fm widget to my blog. The caveat is that I use wp-cache, meaning, a standard RSS feed widget would be often out of date. I opted for a JSONP widget, the implementation is fairly straight forward. After signing up for a Last.fm API account, I hooked into the recent tracks API, which is capable of providing a JSONP response.

I ended up using jQuery, since it comes with Wordpress. Though a library isn’t entirely necessary for such a simple widget, it’s already on the page, so why not use it. Also, it gave me a good reason to play around and test out that library. For the most part, jQuery is like all the other mainstream libraries in terms of syntax. The no-conflict mode is very nice for pages where name space collision might be an issue, but it did have a few odd behaviors that I’m not sure I understand. One that really confused me was jQuery’s getElementById() equivalent.

    var elem = jQuery('#my_id')

For some reason, this returns an array. To actually access the element above, you need to say elem[0]. By definition getElementById() returns only one element. There is probably a good reason for this (at least I hope so), but I’m not sure why yet.

Take a look at my implementation in you’re interested. Help yourself to the code, but please get your own api key. It’s not much more than a simple for-loop that creates a handful of elements. I could probably make it more plug-and-play, but it suits my needs for now.

Update: I have turned this code into a full fledged Wordpress Plugin / Widget. You can download the plugin here. Perfect for both widget-enabled themes and non-widget-enabled. Themes. Get it now.

  • Interesting post- I'm currently trying to build a similar widget - the 'my implmenentation' link was broken though - would it be possible to recreate that? Thanks!
  • Sorry about that, fixed now, it's here

    http://gregorytomlinson.com/encoded/wp-content/...
  • cdanr
    I'd love to get this plugin working. I uploaded it to my plugins directory and activated yet even though I am using a widget-enabled theme it doesn't appear in the list of widgets.
  • Hi, sorry to hear you're having trouble. I sent you an email asking for more
    info so I can take a look and get it fixed! thanks!
  • It's confusing you because it's not a getElementById() equivalent. It's their entire selector interface -- so jQuery('li.cheese a:first') works just as well as jQuery('#my_id').

    It's also not returning an array, it's returning a jQuery result object, which has all the same methods available to it as the root jQuery object. This lets you do things like jQuery('#my_id').click(function() { alert('you clicked me!'); }).hide()

    jQuery's whole 'chaining' thing is very compelling once you get used to it.
  • thanks david, so if it's not the equivalent - is it as fast?
  • It's pretty good at optimizing things. If it sees you're just looking for an element by id, it reduces it down to getElementById internally, for instance.

    There is a slight performance cost to using jQuery over using standard javascript DOM manipulation -- it's been my experience that it's not a terribly high cost, though. And I certainly trust the jQuery people to handle optimization better than I would. (John Resig keeps posting about thoroughly arcane performance optimizations they're evaluating for jQuery.)
  • great to know. I'm certainly no jQuery expert :)
blog comments powered by Disqus