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