Sunday, January 10, 2010

Last FM Widget Found

Dotaloc's Last.FM Recently Played Songs - Widget












Maybe it's just me, but I had the hardest time finding this thing. What thing? Oh, let me start from the beginning...

Skip straight to the code

Backstory


I signed up with last.fm, a music streaming/information aggregation and listening habit analyzation site a couple of years ago. I have a scrobbler running on my computer, and it sends information about what I play in winamp to last.fm. They take that information and compare it to what other people who listen to some of the same bands listen to...recommend other artists to you, stuff like that.

You don't have to scrobble to enjoy. I sometimes just go to the website, type in an artist I like, and listen to a 'station' last.fm creates based on the artist, and others they have determined are similar or listened to by people who like the artist. I've been turned on to a few bands this way...as information about the current band/song is displayed on the website or in the standalone player (great for bypassing streaming radio site blocks, which are sometimes implemented by employers/etc. in order to cut down on excessive bandwidth usage).

This services, or similar ones such as Pandora are not new to lots of people...but this is my blog and I will ramble if I want.

That said, what good is it to scrobble all day if you can't integrate with all these awesome social networking sites and show your fans what songs listen to via an interactive widget? Not much. I found one that I was able to put on my dog's myspace page a while back and was pretty happy with it. I don't have a myspace...or facebook...account. My wife handles that stuff.

I wanted that widget on my personal website, though...seems appropriate. I have personal information...links to pictures...information about important happenings in my life like my son being born on October 9th...and the likes. Why not tell the world what songs I'm listening to so people will have a chance to learn some amazing new bands thanks to my chronic listening and hard work. Exactly.

Situation


So I want that same type of thing...on my personal site. Shouldn't be hard...the 'widget' wasn't myspace specific. I googled something like 'last.fm widget'...which actually searched 'last.fm' for the word 'widget'. This didn't end up doing what I needed. Let me re-arrange my search terms...'widget last.fm'. This was what I wanted to do...but didn't show me what I wanted. Last.fm has some type of page that seems like it is supposed to offer the type of list i was looking for with themes and all of that, but it has been broken for at least two days...probably more. I don't like waiting. Even though they have an API (Application Program Interface)...accessing the information I want surely has been done loads of times...there is no reason for me to write brand new code to do this, even if I am able, when I can just use someone else's. No luck...there are some scripts that use the API and pull up some fancy information...but I just want the list of the most frequent songs I've scrobbled. Nothing. You try. See.

*facepalm*

I guess I can reference my, still working, myspace code. At this point, I didn't remember if I had access to the code or if it was a clickable option myspace had enabled or something. Nope...the code was listed plain as day when I went to edit my profile. The 'widget' links to the broken last.fm page...but actually works.

I took the code and put it on my page. It didn't fit my color scheme, so I dug through the code a little and changed some of the 'red' graphics to 'black'...hoping it'd work. It did.

Moral


I tried this the hard way and wasted a few hours of my life. Boo to that. Don't be like me. Attempt easiest solution first, especially if you can determine if it'll work or not within a few minutes.

Want the Widget for Yourself


Hopefully this'll help someone else. I'll provide the straight JavaScript first, then the php that I use.

JavaScript


replace 'dotaloc' with your last.fm username
<span style="font-style:italic;">replace 'dotaloc' with your last.fm username</span>
<style>table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_red.png) no-repeat 0 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmEmbed object {float:left;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat 0px 0 !important;;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -85px 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget346494d0b5f3a8b580d15b4053d6d02a" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tbody><tr class="lfmHead"><td><a title="dotaloc: Recently Listened Tracks" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_red.png) no-repeat 0 -20px;text-decoration:none;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" allowscriptaccess="never" allownetworking="internal" height="199" width="184" data="http://cdn.last.fm/widgets/chart/friends_4.swf">
<param name="allowScriptAccess" value="never">
<param name="allowNetworking" value="internal">
<param name="movie" value="http://cdn.last.fm/widgets/chart/friends_4.swf">
<param name="flashvars" value="type=recenttracks&amp;user=dotaloc&amp;theme=red&amp;lang=en&amp;widget_id=346494d0b5f3a8b580d15b4053d6d02a">
<param name="bgcolor" value="#d01f3c">
<param name="quality" value="high">
</object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/red.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tbody><tr><td class="lfmConfig"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQ=" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat 0px -20px;text-decoration:none;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" title="View dotaloc's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -85px -20px;text-decoration:none;"></a></td><td class="lfmPopup" style="width:25px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy9wb3B1cC8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQmYW1wO3Jlc2l6ZT0x" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -159px -20px;text-decoration:none;"></a></td></tr></tbody></table></td></tr></tbody></table>


PHP


edit the variables accordingly. the colors should probably be plain html written out word colors (blue, green, red) for the best chance of them working. check the PHP out and you can probably fine-tune it to your liking.
//set lastfm widget color and widget hover color -- these should be very basic for the highest probability they will work as some reference graphics
$lfmwc='black';
$lfmwhc='black';

//right-float last.fm widget
$lastfmwidget='<div class="floatright" style="margin-top: 15px; border: 1px solid #222; ">'

//taken from old myspace widget -- can't find anymore
.'<style>table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_'.$lfmwhc.'.png) no-repeat 0 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmEmbed object {float:left;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwhc.'.png) no-repeat 0px 0 !important;;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwhc.'.png) no-repeat -85px 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwhc.'.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget346494d0b5f3a8b580d15b4053d6d02a" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="dotaloc: Recently Listened Tracks" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_'.$lfmwc.'.png) no-repeat 0 -20px;text-decoration:none;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="199" width="184" data="http://cdn.last.fm/widgets/chart/friends_4.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://cdn.last.fm/widgets/chart/friends_4.swf" />
<param name="flashvars" value="type=recenttracks&user=dotaloc&theme='.$lfmwc.'&lang=en&widget_id=346494d0b5f3a8b580d15b4053d6d02a" />
<param name="bgcolor" value="#FF6600'.x/*#d01f3c*/.'" />
<param name="quality" value="high" />
</object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/'.$lfmwc.'.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQ=" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwc.'.png) no-repeat 0px -20px;text-decoration:none;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" title="View dotaloc\'s profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwc.'.png) no-repeat -85px -20px;text-decoration:none;"></a></td><td class="lfmPopup" style="width:25px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy9wb3B1cC8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQmYW1wO3Jlc2l6ZT0x" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwc.'.png) no-repeat -159px -20px;text-decoration:none;"></a></td></tr></table></td></tr></table>'
//end div
.'</div>';


Conclusion


Contact me if you need any help. Contact info at http://nick.chapmanit.com or chapmanit.com.

References


To post code to blogger, I followed instruction here: http://thoughtsomething.blogspot.com/2008/11/display-html-javascript-code-in-blogger.html

18 comments:

Pansy Vision said...

is there a way to get it to autoplay on my blog?

nick c said...

i'm not a javascript expert, but not that i see in the code, there.

to be fair, though, i'm kinda anti auto-play media anyway...so i can't say i spent weeks upon end trying to find it for you.

sorry for the delayed response.

Unknown said...

is there other colour? :(

Petr Ikhwan said...

how to expand this widget to fit into 235px width? i've tried to change the width value, but it doesn't seem to work.

nick c said...

@Octoberfly...
[mentioned briefly in original post] yes. I did a search and replace on the originals 'red' and changed it to 'black' and it worked. I'd imagine other plain colors will work, but am doubtful that fancy (#FFAAFF) colors will work.

@Petr Ikhwan
this widget seems to be a javascript wrapper for a flash widget. that said, i'm not surprised that the sizing controls don't work, as flash is lame. sadly, your best bet is probably to center it and hope it doesn't look ridiculous. Alternately, you may be able to throw it in a auto-width div with some type of background...that might help? if you find a way around this, let me know!

Dardo said...

Thank you SO MUCH for the code!!! You have no idea how much I wanted to find this code!

nick c said...

Glad to help. I'm sure I have no idea...but I'm a fan, so maybe I can empathize a little?

Thanks for the appreciation! It makes me likely to keep posting this stuff, even though I don't feel like I get enough views to justify the work. Comments like yours make me wanna keep it up!

Noora said...

I'm here to thank you too. You saved me for a lot of searching!

Jane Copland said...

Thanks for this - I was using this widget, but my code appeared to break. I was nowhere near good enough to try and fix it myself. Your code has put the widget back in my sidebar (since I know everyone's desperate to know what I've been listening to :p).

Thanks again.

JT said...

From one computer scientist to another: thank you so much for all the code! It only took me like 15min to figure out how to get it to work. Merci beaucoup!

maria. said...

I was looking for this code like forever! THANK YOU! :)

nick c said...

glad people are still finding this useful! i appreciate the comments.

Gabriela said...

Do you know how to take off the "My Friends' Tracks" thing? Thank you.

nick c said...

Gabriella
Sorry for the delay.

In short, no. I'd wager it can't be done. It is part of the widget's flash...and doesn't seem to be editable.

Sorry!

Sciura said...

This widget is awesome! Thank you!

Kristel "Kazaki" Cuadra said...

Thank you for this awesome widget! Though it would be a hassle to fully-customize it, since it uses images instead of colors, otherwise it's very useful. Perhaps maybe, if this will be updated, album art could be added.

Nick Chapman said...

Kazaki,

Don't hold your breath on an update. They seem to have abandoned this code as I can't even find it from last.fm anymore. They do allow some API usage which could allow a better (and, non-flash) widget, but nothing I found last time I looked provided something like this with as little work. Let us know if you find otherwise.

Oh, and album art is included on mouseover (for supported albums) -- try it on mine. Guess that is no help on mobile/touch.

Kristel "Kazaki" Cuadra said...

I did try the album art, I just realized right after I commented. XD

The reason why I picked this is that the Last.fm widget designer doesn't load at all, and the premade designs don't fit my blog's small space. XD

Anyways, thank you! :D