Display Last.FM Recently Listened Tracks and LibraryThing Books

[Anonymous]

Is it possible to use CSS to integrate data from Last.FM (like the last 10 tracks I listened to) and/or LibraryThing (like a refreshing books I’ve read cover display) into my web design?

I’ve heard it’s possible to do that with Twitter but my google search turned up nothing for the other sites. Like twitter, they both have widgets you can copy and paste the code from. However, also like twitter, they clash with my sight design. The issue is that the code from those sites (Twitter, Last.FM, LibraryThing) places the widget above any parent DIVs in my design. This means that the widget ends up scrolling over top of the navigation bar of my website, rather than going behind it.

I’m no expert with HTML, PHP or CSS but I know enough to get by. I’d appreciate any help in figuring out how to create a custom css code for those sites. I have no idea if that’s even possible but I’m hoping someone on css tricks will. Thanks!

[Anonymous]

Once I have an API, how do I go about coding it?

Also, anyone know how to do so with LibraryThing?

[Sirlon]

You can do that with jQuery by getting the json feed.

somthing like that:

var user = 'user name';

var akey = 'your api key'

var lfmurl = 'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user='+user+'&api_key='+akey+'&format=json';



$.getJSON(lfmurl, function(data){

if(data && data.length >= 1) {

try {

$.each(data.recenttracks, function(index, item){

$('.recenttracks').append('
'+item.name+'
'+item.artist.text+'
');

});

}

catch(e) {

$('.recenttracks').html(e);

}



finally {

$(".recenttracks").fadeIn(2000);

}

}

});

Thats an example, you can access the json inside the .each. item = track and track name is track.name. just look at the json.

ps: you need an api key.

[Anonymous]

Hello Sirlon,

Thanks for your input. I do have an api key for Last.FM but I know nothing about jQuery and/or json. What do I need to make this work? Also, how would I style this with CSS?

For reference, I want to make it fit into this design:
http://www.aarongmoore.com/test/layout.html

[noahgelman]

I find it funny that we all seem to be doing music realated websites at the moment.

[Sirlon]

First of all this is a javascript discussion, maybe someone can move it in to jungle ;)

JSON

I would call it a Javascript friendly rss feed ;)
http://en.wikipedia.org/wiki/Json

jQuery

jQuery is a JavaScript library, it makes a lot of things easier. http://en.wikipedia.org/wiki/JQuery
You can target and manipulate html elements with css selectors:

 $('.class p').html('This is a p element inside another element with the class .class');

You can find more here: http://api.jquery.com/

How to implement a json to your site

First, create or extend a new Javascript File and insert:

//Do it after the html is loaded and ready

$(document).ready(function(){

// Set some vars

var user = 'user name'; //the user you want to follow

var limit = '10'; //limit the data yoou get

var nowp = "true" //include current track

var akey = 'your api key'; //your api key

// Get the JSON URL

var lfmurl = 'http://ws.audioscrobbler.com/2.0/method=user.getrecenttracks&user='+user+'&limit='+limit+'&nowplaying='+nowp+'&api_key='+akey+'&format=json';



//So we have a div element in our html with the css class .lastfm

// Now insert a list element if it does not exists

if($('.lastfm ul').length <= 0) { $('.lastfm').append('
'); }

//Now get the Data

$.getJSON(lfmurl, function(data){

//check if it isn't empty

if(data && data.length >= 1) {

//for each track do somthing

$.each(data.recenttracks, function(index, item){

//insert a list item for every track

// item is our track object

$('.lastfm ul').append('
'+item.name+'- '+item.artist.text+'
');

});

}

});

});

If you want more track information take a look at the example json for the strukture:
http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=rj&api_key=b25b959554ed76058ac220b7b2e0a026

Now we have our Javascript, let’ s see what we must add in the html:

In your header add:

And finally add our .lastfm div element where ever you want

You can style the element and the list inside like any other element in css.

Maybe i will test this later that day when i have more time. ;)

Sirlon

[chrisburton]

If you need further help @aarongmoore let me know as I accomplished this using a pretty simple method, just a few lines of CSS code and jQuery hover animation (which isn’t necessary).

Example Here

[DoPeT]

Hello, I applied what @Sirlon said by making a new .js called listen with my API and Username while creating a div class called “lastfm” while obviously linking the .js in the html file.

I can’t seem to get it working, cause it should be appending a ul to show recent tracks. Is there anything I need installed server-side, etc? Or should it all work?

Thanks so much guys!

Please check out the example here to see what I may have done wrong.

[Author]

Posts