Grow your CSS skills. Land your dream job.

Display Last.FM Recently Listened Tracks and LibraryThing Books

  • Anonymous
    # February 12, 2011 at 6:46 pm

    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!

    # February 12, 2011 at 6:56 pm

    No, you need an API to do this. Funny enough, I’ve been trying to do this exact thing except only 3 latest tracks. API HERE

    Anonymous
    # February 12, 2011 at 6:59 pm

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

    Also, anyone know how to do so with LibraryThing?

    # February 12, 2011 at 7:10 pm

    I’m still testing mine at the moment. I’ll let you know

    # February 14, 2011 at 11:00 am

    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
    # February 14, 2011 at 5:27 pm

    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

    # February 14, 2011 at 6:20 pm

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

    # February 15, 2011 at 5:02 am

    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

    # February 18, 2011 at 1:04 am

    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

    # August 15, 2013 at 12:09 am

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".