Jun
16
From the lab: Last.FM for jQuery
…written by Will and has 40 comments so far
To celebrate the opening of our brand new labs section we thought we’d share with you our little widget to display your Last.FM tracks on your website using jQuery.
Last.FM has a very extensive API, many applications use it, but whilst scouring the web the other day looking for a simple jQuery implementation we just couldn’t find one that was lightweight and easily customisable. So we thought we’d write our own plug-in!
Using Json, the plug-in grabs data from the API and then – in a structure you define – places it on your website. The styling and layout is left completely up to you!
Let us know what you think, or ask any questions you may have in the comments bellow.
Mitch Says:
Looks great guys, nice to see some freedom with customisation. No doubt I’ll implement this on my site soon enough, I’ll send you a link so you can see how I’ve implemented it.
Looking forward to the next lab session!
June 16th, 2009 at 1:00 pmWill Says:
Thanks Mitch,
The next labs experiment is on the way pretty soon so keep an eye on the blog next week.
Cheers,
June 16th, 2009 at 3:01 pmWill
Jay Says:
guys, love the plugin. check out how i skinned it with my site. j/w are you planning on developing the same kind of deal for hulu or other like sites?
June 26th, 2009 at 3:52 pmWill Says:
Unfortunately, being in the UK, Hulu doesn’t let us watch. Also, looking around there doesn’t seem to be an obvious API.
In theory though we could quite easily adapt the plug-in to work with other API’s, but a lot have already been done (Twitter, Flickr, Facebook etc etc). Last.FM was just one that seemed to have been overlooked.
Nice work with the plug-in though. It fits right into your site.
June 26th, 2009 at 4:01 pmcameron Says:
I am trying to put this on my blog, and i only want to put one on my page, when i put one in the number section i get 2 recent tracks.. any way to fix that?
December 31st, 2009 at 3:47 amwckdspdr Says:
This is awesome plugin! Hope it’s still in the works?
However, there’s an error on some CD covers to display too large, although in CSS the size has been defined. This happens only with certain covers… any advice?
January 6th, 2010 at 9:18 pmWill Says:
@Cameron I’m not sure… All the number does is change the URL to last.fm a little bit. In the js file that is the chunk of code that defines the number of tracks.
&limit=’+settings.number+’
You could try manually changing it to:
&limit=1
If that doesn’t work it looks like it might actually be an issue with last.fm as all our plugin does is display the data supplied in the JSON file which last.fm generates.
A simple fix would be to use the callback to hide the second track, or even use css to do it using last-child.
@wckdspdr
I had that issue occasionally too, but it stopped happening at some point so I assumed (wrongly, it seems) that I had done something to sort it. The album artwork comes from last.fm’s servers and some of it is old and doesn’t fit the new format on their website.
The most common problem seems to be that they only have one dimension, so it could just be that causing the issue.
If the CSS method targeting the img doesn’t work… which is odd really, a simple fix would be to set the container to overflow hidden, or change this line:
append(“![Artwork for "+album+"]("+art+")
“);
to
append(“![Artwork for "+album+"]("+art+")
“);
Which would put the dimensions into the HTML.
Hope that helps!
January 7th, 2010 at 10:10 amKyle Hotchkiss Says:
So, This plugin does everything from loading the json to building the correct number of songs in the html structure, but the thing is: It’s not filling those divs with anything but whitespace. Any ideas?
January 8th, 2010 at 4:56 pmWill Says:
Do you have a page uploaded I can look at, because it should be doing all those things…
Common things that could go wrong though:
API key is incorrect
January 8th, 2010 at 5:02 pmYour template structure doesn’t have the correct classes/id’s
You haven’t listened to any music…
Kyle Hotchkiss Says:
Yep, http://kylehotchkiss.com. It’s one of the widgets.
It’s loading a JSON with what appears to be my latest music in it, so I will assume I have the correct api key and maybe it’s classes?
January 8th, 2010 at 5:04 pmWill Says:
Ahh, I think I’ve got it!
The javascript is targeting a div with the class lastWP-lastwp-3, but that is your example layout. What you need to do is put that within a container and target the container.
Like this:
<div class="lastWP-lastwp-3">
<div> <!– This extra div is what you're currently missing –>
<div class="lfm_art">
<a href="#" rel="nofollow"><img src="/images/lfm_overlay.png" alt="CD" class="lfm_overlay" /></a>
</div>
<div class="lfm_song"></div>
<div class="lfm_artist"></div>
<div class="lfm_album"></div>
</div>
</div>
Let me know if that sorts it!
Will
January 8th, 2010 at 5:20 pmKyle Hotchkiss Says:
Yep, that does it! Thanks, I really appreciate your help!
January 8th, 2010 at 5:23 pmWill Says:
No problem!
January 8th, 2010 at 5:26 pmCody Sherman Says:
I am having trouble getting this to work
I am setting up a status page for myself that would show kinda like a live look what im up to via like last.fm, twitter, latitude, etc. But I am having trouble getting this last.fm thing to work, I’m super excited because this is exactly what I was looking for. If you could please give me any assistance that would be great!
The page it is at is http://status.codysherman.com/
While trying to get this to work I have reduced the code down to essentially just this last.fm plugin, but even with almost nothing else going on in the code I can’t get it to work. I am not very experienced at all with this stuff so any help would be great! Note: right now I even have your defaults in with ur API code and username.
January 14th, 2010 at 5:03 amWill Says:
Hey Cody,
I think you need to get your page validating first before looking into the plugin. Firstly, I wouldn’t use frames, they just cause issues. That’s probably not the problem though in this instance. As far as I can tell, there are invalid characters all over the page which mean that jquery isn’t actually being loaded.
Check out: http://validator.w3.org/
Once you’re down to 0 errors then any issue with the Javascript should become easier to diagnose.
January 14th, 2010 at 9:44 amCody Sherman Says:
Thank you so much for the tip! I have no idea what invalid characters you were seeing, as they all showed up as just spaces on my Mac, however the validator site did agree with you and so I did a find and replace to just regular spaces. And now I can see the last.fm chart! I have no idea where the weird characters came from as I did just copy and paste.
Oh well, now I can see everything so it is working! Just have to style it myself now
Unfortunately, I do have to keep the frame, this page is just a side-project I am doing for fun and I don’t want to actually invest in a server so I am just using subdomain-forwarding from godaddy to link to a .html file I have in my Dropbox public folder.
By the way, is there any easy way to have some sort of badge appear when I am “currently listening?” I saw that the last.fm API has that built into when you fetch the recently played songs, is there a way to add a little something to your code to support it? http://www.last.fm/api/show?service=278
January 14th, 2010 at 4:48 pmWill Says:
I noticed that as well, and it was something I was looking into, (and maybe at some point I’ll be able to get it done) but we are pretty busy at the moment so for the time being it’s not high on my list of things to-do! Sorry.
Feel free to mess around with the code though and post it back in here if you have any luck!
Will
January 14th, 2010 at 4:54 pmKyle Hotchkiss Says:
Oh – By the way, I managed to get this into a WordPress widget!
January 15th, 2010 at 2:03 amhttp://wordpress.org/extend/plugins/lastwp
Cody Sherman Says:
I have great news! I managed to figure out how to get Now Playing to appear! I’m still tweaking it and all, but have a looky here: http://status.codysherman.com/
Of course, you’ll only see it if I am indeed currently playing a song… but here is the code I have going on:
Updated script: http://dl.dropbox.com/u/4937/codysherman/Javascript/js/engage.lastfm.js
Updated css: http://dl.dropbox.com/u/4937/codysherman/Javascript/style/engage.lastfm.css
Updated code: http://dl.dropbox.com/u/4937/codysherman/lastfm.html
Again, I repeat, this was first time I’ve really had to do anything like this so I have no idea if my code is efficient or if all parts are necessary or what. Just hours and hours of googling and guessing and checking have produced this, so I’m super proud of it, but feel free to help clean things up!
Also, as a bonus I took the last.fm little .gif for now playing and added it into the code and even photoshopped it so that the colors of the edges match
January 16th, 2010 at 3:15 amWill Says:
Nice work!
If I can find some time I’ll get it added into the labs page code.
Thanks,
January 19th, 2010 at 9:39 amWill
Kyle Hotchkiss Says:
This will go nicely in the WP plugin! Does this show “now playing” with a class added to some div, or in another div entirely?
January 19th, 2010 at 6:15 pmCody Sherman Says:
#lastfm dl dd.lfm_nowplaying{
background-image:url(‘http://dl.dropbox.com/u/4937/codysherman/Javascript/images/visualizer.gif’);
background-repeat:no-repeat;
position:absolute;
bottom:5px;
right:10px;
font-weight:bold;
font-size:12px;
padding-bottom:0px;
padding-left:15px;
white-space:nowrap;
overflow:hidden;
margin: 0;
}
Note that I also had to disable wrapping on the Album name line because it would overlap into the Now Playing indicator when the album title was too long.
I am not sure what your WP plugin looks like, but if it is styled just like the example given on this page at the top, the CSS link I gave last comment does look almost exactly the same as the example except with the added Now Playing, so you could just use that. Otherwise, ya, what I got going on is the #lastfm dl dd.lfm_nowplaying{ style added.
January 19th, 2010 at 6:42 pmKyle Hotchkiss Says:
Actually, that works beautifully. All that would be needed is a div with absolute positioning. I wouldn’t use the text to say, rather an image, but that’s a personal preference. Great work Cody!
January 19th, 2010 at 6:47 pmCody Sherman Says:
Yes, admittedly it could look a lot better, this was more of just just getting it to work. If you modify http://dl.dropbox.com/u/4937/codysherman/Javascript/js/engage.lastfm.js on the line:
$current.find(‘[class=lfm_nowplaying]‘).append(“LISTENING NOW!”);
You can replace the LISTENING NOW! with anything, however you will still see the animated gif unless you remove it from the background of the div in the css. If you haven’t seen what it looks like I’ll leave my last.fm playing for like 40 mins right now, so u can see it at: http://status.codysherman.com/
January 19th, 2010 at 7:01 pmKyle Hotchkiss Says:
Hey, Since this is GPL and all in good spirits, and this plugin has lots of potential still, is there any chance we could see it on Github or the like please? =D
January 21st, 2010 at 5:26 pmWill Says:
Hey Kyle,
January 21st, 2010 at 5:36 pmThat’s a great idea, if you could stick our name and maybe a link back to the labs page or this blog post that would be cool.
Post up a link here as well once it’s set up. I’d like to follow it’s progress! (Maybe even pitch in if I get a chance!)
Cheers
Will
Kyle Hotchkiss Says:
Mine’s working over at http://kylehotchkiss.com too. I’m looking at rewriting various parts of the plugin altogether, but I don’t know that much jQuery plugin api!
oh and http://github.com/kylehotchkiss/jQuery.nowPlaying is the Github page Will. I’m new to github, but If you want write access, that’d be totally cool with me. And the rename is just to make it a little catchier
January 21st, 2010 at 11:07 pmMike Dove Says:
hiya, thanks for the great script, took me a while to get working but its awsome! I was just wondering though if its possible to get this to display recent albums played instead of just recent tracks?
January 24th, 2010 at 12:47 pmKyle Hotchkiss Says:
Okay, I managed to get this to display top songs, recent songs (including now playing – thanks Cody), and loved songs. And it all comes in a package! http://code.kylehotchkiss.com/nowplaying/.
A problem with last.fm is that it doesn’t always correctly return album artwork – and they don’t like too many API requests, so even though it is possible to load some album artwork for each song that has no artwork, that’d be so many requests they would have a reason to drop the API account.
January 31st, 2010 at 5:30 pmKyle Hotchkiss Says:
** They also don’t return the album for Loved && Top songs. It’s kind of lame, I know =P
January 31st, 2010 at 5:32 pmBrent Says:
Is there a way to use this with group charts?
February 11th, 2010 at 9:33 pmWill Says:
I think your best bet is to get in touch with Kyle (post above yours) he’s taken on future development of the plugin for the moment.
http://code.kylehotchkiss.com/nowplaying/
February 12th, 2010 at 9:50 amKyle Hotchkiss Says:
Hey @Brent. Um. I did a quick check. It could easily be worked. My code is a little more extensive, but grab the source of the above plugin and throw in the url for this : http://www.last.fm/api/show?service=296 . I don’t plan on integrating group support in my plugin, i don’t have a last.fm group to test with! best of luck and feel free to contact me kyle [ @ t ] kylehotchkiss [ d 0 t ] com
February 13th, 2010 at 1:29 amnikki Says:
wow – awesome site guys!
I’m attempting to add your fabulous widget to my site.
I just created a VERY basic layout – since I wanted to first implement this script before I started to design the site.
I read all the comments above and still can’t figure out what I am doing wrong. I’m going nuts trying to figure it out on my own.
I think it may have something to do with the API key generated for my account .
I have never used an API for anything up til now – is there some step I’m missing that should be obvious to me? Do I have to do anything with the “secret” number?
Or the JQuery. Because its only showing 1 album window – instead of the 5 i set in the .js file.
I really really really would appreciate any help anyone can offer.
here is the site if anyone is willing to take a peak: http://www.kakoke.com
thank you
~ nikki
February 27th, 2010 at 4:23 amnikki Says:
Yaaaay! ……… I was FINALLY able to get it to work!
I don’t know what I did wrong the first time – but I deleted everything and started all over.
Thanks for this FUN plugin!
YOU GUYS ARE WEB SUPERSTARS
February 28th, 2010 at 10:18 pmKyle Hotchkiss Says:
So my version has a github: http://github.com/kylehotchkiss/jQuery.nowPlaying
I’m slowly working towards a nice 1.1 release =D
Last.FM can be a pain if your metadata is bad still =P
April 29th, 2010 at 12:24 amSimon Betty Says:
Hi Guys need a lot of help, first I have tried this over on my new layout beta which is here http://www.ibett.co.uk/beta/index2.html and as you can see it just picks nothing up? Also how would i get it so that it shows in the boxes/background I have created on the right hand side? Guessing CSS, but I have found now way to actually move it so everything fits?
Any helps would be great, preferably if you log in to my site or i give you the source files lol?
Thanks
July 9th, 2010 at 7:35 amMatthew Hill Says:
Hey, this is a fantastic plugin!
If you have time, have a look at the way I have implemented it on my website (hover over the Last.fm logo in the top right-hand corner).
Thanks!
August 1st, 2010 at 8:06 pmDj Stormbrewer Says:
I want to put the time the songs played next to the track, do they list chronologically?
I work in a cafe and I dj on the side, I scrobble my itouch and want to have a “live playlist” that customers can check online as promotion for myself.
Any tips?
danke schön
-Storm-
August 15th, 2010 at 7:14 pmKyle Hotchkiss Says:
@Storm:
Yeah they will, but the scrobbler can be sloppy sometimes (or even your metadata) and I can’t honestly recommend Last.FM for a business as well as just placing the top favourites there yourself. Sometimes the album name doesn’t show up, for example.
Last.FM also has different rules on using their API for commercial purposes. You may want to check into that as well. Sorry to say it like it is, I do love Last.FM a lot myself but these are issues I’ve came across myself. Best of luck with your site,
cheers!
August 15th, 2010 at 8:18 pmkyle hotchkiss