If you’ll notice on my sidebar, I list the 6 more recent songs I’ve listened to on Last.fm.  I used to just display the album covers but became kinda bored of that when it came to enhancing some features on my site, so I decided to make them appear as individual CDs.  

So figured I’d explain how to do this incase you like what you see and want to do this on your blog too.

If you are running wordpress (if not, you should be), go download the fmTuner plugin and install it in your plugins directory on your server.  Next, activate it.  Find the fmTuner settings in your WordPress admin.  

You’ll notice some options such as:

• last.fm user name
• Track type (recent, loved or top tracks… I do recent)
• Track limit (mine is set to 6)
• Update frequency (mine is set to every 30 minutes)
• Options for customizing the output

1
2
3
4
5
6

<dl>
<div><div class="cdtop"><a href="[::url::]"><img src="/<strong>your_images_directory</strong>/cdoverlay.png"></a></div>
<dt><img src="[::image::]" alt="[::title::] by [::artist::]" /></dt>
<dd><strong>[::artist::]</strong> <br/> [::title::]</dd>
<div class="clearme"></div>
</dl>

dl { width: 94px !important; height: 88px !important; margin: 0;  padding: 0; float: left; display inline; }
 
dl dt { width: 94px !important; height: 88px !important; display: block; margin: 0; padding: 0; overflow: hidden; }
 
dl dt img { border: 0px none #fff; margin: 0; padding: 0;}
 
dl dd { display: none; }
 
.cdtop { position: absolute; z-index: 9999; margin: 0; padding: 0; overflow: hidden; }

Next: place this image in your images directory and you should be set to go!  One important step to remember is that you should change the color of the area surrounding the CD to match the background of your blog!

Now, there are probably a couple small enhancements that could be done to this to make it work like tightening up the code possibly.  If you find them, please feel free to comment with some improvements and/or suggestions.