After taking a look at http://imagegen.last.fm/basic10/tracks/slicenice.gif a coworker had on his website, I said: “oh I can do better…”.
Since bootstrap is my new go-to thing for web-design (they do a better job than I ever could) I designed the base widget template to use bootstrap components. This could be easily re-factored out.
- Drop in solution - input my user-name and bam we got stats. This lead to the next point,
- No API key usage. All the data is we need is available without needing a api key. The only advantage one would get is json returned data.
- Bootstrap usage for aesthetically an pleasing look that would fit the rest of my site and allow the widget to be themed
One of the goals of the project was to not use api keys to access data. All the data I needed/wanted was offered in XML and or json format. (sadly not much in json) This fit the goal of having a mostly drop in
Initialization:
fm = new jlastfm("slicenice","#jlastfm");
fm.init();Include this div, with the selector you passed into the ‘jlastfm’
<div id="jlastfm"></div>The demo will not work browsing the file path. (google’s rss → json breaks) for a demo you can do
$ cd jlastfm_widget
$ python -m SimpleHTTPServerthen point your browser to localhost:8000
| name | repo | file/s |
|---|---|---|
| jQuery | https://github.com/jquery/jquery (not sure version) | unsure |
| bootstrap | https://github.com/twbs/bootstrap (version 3?) | https://github.com/twbs/bootstrap/tree/master/dist |
| xml2json | https://github.com/josefvanniekerk/jQuery-xml2json | https://github.com/josefvanniekerk/jQuery-xml2json/blob/master/js/xml2json.js |
| information on converting rss → json[fn:1] | http://stackoverflow.com/questions/670511/convert-rss-to-json |
And of course last.fm!
[fn:1] This uses the google ajax service. I had started with this part first (before the xml2json part). The code could most likely be re-factored to use the xml2json stuff removing google from the mix