Last.fm “Recently listened” on your blog without using widgets or image charts!
No more “oh god update already that’s like days old” image charts or bulky widgets. This simple Javascript code displays your recently listened tracks as links and gives you full control over the looks!
1. Go to your Last.fm profile. In the “Recently Listened Tracks” section, click on the little orange RSS icon on the right. It’s next to the “Settings” link.
2. Copy the URL. It should end in “.rss”. Example:
http://ws.audioscrobbler.com/1.0/user/nnisha/recenttracks.rss
3. Go to this RSS feed to Javascript Converter. Enter the URL you copied to the box where it asks you to do so: URL Replace the URL of the RSS Feed below or Try it.
4. The settings should be the following:
Number of items to display: The number of tracks you want to be displayed. I used 5.
Show/Hide item descriptions: Type in 0
Use HTML in item display: Choose ‘no’
Show item posting date: If you want the date you listened to the track to be displayed, choose “yes”. Otherwise choose “no”.
Time Zone Offset: Leave it as it is.
Target links in the new window: Leave it as it is.
UTF-8 Character Encoding: Tick the box.
5. Click on Preview Feed. Don’t worry about how it looks, we’ll change that later. Just check it displays the tracks properly. Close the window.
6. Click on Generate Feed Javascript, copy the code it gives you and add it to your blog to the place where you wish the tracks to be displayed (i.e. the sidebar).
7. Add the following to your CSS. This is how you will change the looks of the feed. I have filled in some things to make it easier for you to modify. You can leave the comments there for reminders if you so wish.
.rss-box {
background:#FFFFFF;
width:200px;
border:0;
}
/* The title of the feed. Uses the default “username’s Recently Listened Tracks”. If you wish to hide it, add the following line: display:none; */
.rss-title {
color:#000000;
font-size:12pt;
font-weight:bold;
}
/* The list. Use to edit margin or padding. */
.rss-items {
margin:0 0 0 5px;
padding:0;
}
/* This is the actual track name. Edit font-size, color etc. */
.rss-item {
color:#FF0000;
}
/* The tracks are displayed as links. If you want them to look different from other links on your blog, edit font-size, color etc. */
.rss-item a {
color:#FF0000;
text-decoration:none;
}
/* When you move your mouse over the link */
.rss-item a:hover {
color:#808080;
text-decoration:none;
}
/* How the dates are displayed. Change color and anything you like. */
.rss-date {
color:#C0C0C0;
font-size:8pt;
}
8. Click on Save + Close and you’re all done!
