Forums

aarongmoore

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!

chrisburton

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

aarongmoore

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

Also, anyone know how to do so with LibraryThing?

chrisburton

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

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('<li><h2><a href="'+item.url+'" >'+item.name+'</a></h2><p>'+item.artist.text+'</p></li>');			
				});
			}
			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.

aarongmoore

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 <strong>p</strong> element inside another element with the class <strong>.class</strong>');

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('<ul />'); }
	 //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('<li><a href="'+item.url+'">'+item.name+'</a>- <cite>'+item.artist.text+'</cite></li>');
	 	 	 });
	 	 }
	 });
	 });

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:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js&quot; type="text/javascript"></script>
<script src="PATH TO YOUR JS FILE" type="text/javascript" ></script>

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

<div class="lastfm"></div>

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

treehouse : what would you like to learn today?

Forums

CSS - Display Last.FM Recently Listened Tracks and LibraryThing Books

JSON

jQuery

How to implement a json to your site