Over the years, I have started a couple of last.fm projects. All have one thing in common: they provide a way to display covers on your site, and do it more elegantly than the standard last.fm widget. One of the things that really bugged me about my projects was the different pieces of code I maintain; and how difficult it becomes to support all these variants.
As we’re approaching the new year, here is my resolution: one codebase for all, starting today with a basic object that can be used as-is, or with some additional programming, for platforms as WordPress and Drupal. This also means that my WordPress plugins will be built on this code once it gets out of beta (hey, even Chrome did!).
In case you’re wondering: yes, the covers on the top right of this page are there thanks to this new code. And no, it’s not a WordPress plugin or widget yet, I wrote it directly in themes/sidebar.php
I’m releasing this code under GPL, so it is available to use in your own projects. If you do, I ask you to
- keep my info in the javascript file
- change the last.fm API key
- let me know where you are going with it
Once installed, the javascript hands you one object you can configure and run, like this:
jQuery(document).ready( function() { // last.fm username lastFmRecords.setUser('hondjevandirkie'); // id of the div element where script can add covers lastFmRecords.setPlaceholder('lastfmrecords'); // image to show while loading images or when image not found lastFmRecords.setDefaultThumb('./lastfm_logo.jpg'); // TODO: value is ignored at the moment lastFmRecords.setPeriod('smart'); // TODO: value is ignored at the moment lastFmRecords.setStyle('lightbox'); // number of covers, at the moment max. 50 lastFmRecords.setCount(20); // refresh interval (get fresh data from last.fm) lastFmRecords.setRefreshMinutes(1); // GMT offset lastFmRecords.setTimeOffset(1); // log to console lastFmRecords.debug(); // run lastFmRecords.init(); });
Most options come from my earlier projects; the refresh is new. And best of all, I found out how to get JSON from last.fm. This means jQuery can make the requests, so all requests now go directly from the browser to last.fm, without a data provider in PHP on your own server.
So what do you need to get this running?
- include jQuery
- include last.fm.records.js
(see download link below) - a last.fm username (you’re free to use mine when you like Randy Newman)
- a div on the page where the script can put the HTML in
(default: <div id=”lastfmrecords” />)
You can download the beta of Last.Fm Records 3.1 here.
UPDATE: see this page for the javascript file. It’s in the WordPress package, but can be used alone.
Welkom! Op deze pagina's vind je meer info over mij en het werk dat ik als zelfstandig programmeur uitvoer (en hier en daar een spelletje).
5 Comments
Great jQuery tool! I’ve been slowly hacking pieces of it into my blog, and this is something that I’ve been looking for for a while.
However, I cannot get it to play well with jQuery tweet and jQuery Flickr on the same page. This is the error I get from Firebug:
Console is undefined:
if (‘function’ != typeof console.log || !_debug) {
Any ideas?
Hi Dan — I have. You’re still on version 3.0.
Great tool!
I was wondering if you could have the album art for most recently listened to ALBUMS as opposed to tracks. Because if I listen to a whole CD with 10 tracks, the first 10 spots will all the be the same image. Any insight?
Thanks!
I see that Run for Cover does what I’m asking, but I’m not using WordPress, and I can’t get the PHP last.fm records to work…
anyway to modify this jQuery version?
Excellent work. Is there a way to display more than one category for the same user. For example display the recent tracks and loved tracks on the same page? I can get it to display either or but not both on the same page. Any ideas or suggestions would be greatly appreciated. Thanks. :-)