January 26, 2010

Add a Last.fm widget to any web site with jQuery

This is my next to last blog post about the new widgets on my home page.  The “Lastest Music” widget pulls data from my Last.fm account. Currently I’m displaying the 12 artists/albums that I’ve listened to the most on Last.fm over the last week. It shows the cover art for each album and links to the album’s page on Last.fm.

CropperCapture[56]

Like the Twitter widget, the Flickr widget and the YouTube widget, the Last.fm widget is all JQuery/JavaScript all the time. Unlike most of the others, in this case I used an unmodified “stock” plugin. The plugin I chose is Jeroen Smeet’s Last.fm plugin, which was designed for WordPress but works just fine on its own.

To implement the widget grab the last.fm.records.js script from the zip at the Wordpress Plugin Directory, add a script reference for it and jQuery on the page, add a container to hold the rendered HTML and add a few lines of JavaScript to wire it up.

<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”last.fm.records.js”></script>

<div id="lastfmrecords"></div>

<script type='text/javascript'>
$(document).ready( function() {
var _config = {
username: 'diggerdanh', // last.fm username
placeholder: 'lastfmrecords', // id of the div in HTML to use for cd covers
//defaultthumb: './lastfm_logo.jpg', // image when no cd cover or artist image is found
period: '7day', // which period/type of data do you want to show? you can choose from
// recenttracks, 7day, 3month, 6month, 12month, overall,
// topalbums and lovedtracks

count: 12, // number of images to show
refresh: 5, // when to get new data from last.fm (in minutes)
offset: 5 // difference between your timezone and GMT.
};
lastFmRecords.init(_config);
});
</script>

That’s all there is to it. It doesn’t get much easier than that. Enjoy.

Comments,

  • Trackbacks,
  • and Pingbacks
blog comments powered by Disqus

 

Trackbacks and Pingbacks


  1. Pingback from Twitter Trackbacks for Add a Last.fm widget to any web site with jQuery : Digging My Blog [danhounshell.com] on Topsy.com

  2. You've been kicked (a good thing) - Trackback from DotNetKicks.com

Shortcuts

Where is Dan?


My Blog
My Blog
Twitter
Twitter
Facebook
Facebook
LinkedIn
LinkedIn
Flickr
Flickr
YouTube
YouTube
Delicious
Delicious
Foursquare
Foursquare
Pinterest
Pinterest
GetGlue
GetGlue
Pintley
Pintley
XBOX Live
XBOX Live
Last.fm
Last.fm
Windows Live
Windows Live
Telligent.com
Telligent
Graffiti CMS on CodePlex
Graffiti CMS
Popular

Recent Posts