jQuery.nowPlaying
What are you listening to?
about
Download Source
Do you love Last.FM? I know I do! How about showing off that song you just heard or loved on that webpage of yours? Well now ya can! Just install jQuery.nowPlaying, set up a few lines of code, and BAM, mission accomplised. Your visitors will melt when they see how much you actually love Miley Cyrus, shout when they see how much you love Taylor Swift, and smirk a little when they see that old Micheal Jackson song.
demo
setup
  1. Download and install (include) jQuery.nowPlaying like so: <script type="text/javascript" src="scripts/jQuery.js"></script>
    <script type="text/javascript" src="scripts/jQuery.nowPlaying"></script>
  2. Get a Last.FM API Key. Just create a new application, give it an epic name, and save it. Then take note of the API key (not the secret!). You're not going to want to share this key too, just to let you know in advance.
  3. Give jQuery.nowPlaying a nice, comfortable home DIV, then start up jQuery.nowPlaying just like this: <script type="text/javascript">
     $(document).ready(function() {
      $(".nowplaying").nowPlaying({
       apiKey:'your-api-key', // AS IN DON'T HIJACK MINE =D
       username:'your-last.fm-username'
      });
     });
    </script>

    <div class="nowplaying"></div><!-- You can pick a better name! -->
  4. Don't forget - jQuery.nowPlaying has other cool options too, like number:3, // Show 3 songs

    display:'lovedTracks', // Show "loved" tracks
    display:'topTracks', // Show "top" tracks
    display:'recentTracks', // Show "recent" tracks. Default

    artSize:'small' // 'medium' and 'large' work here too.
  5. Make it yours! jQuery.nowPlaying doesn't include stylesheets, so make it original! No lie, styling this can be an interesting experence when working in small spaces. Here's the div structure each song uses (automatically): <div class="lfm_track">
     <div class="lfm_art">
      <a href="%" title="%" target="_blank"></a>
      <img src="%" />
     </div>
     <div class="lfm_float"><!-- A good div to float -->
      <div class="lfm_fade"></div><!-- Obscure -->
      <div class="lfm_status"></div><!-- Shows the song 'status' your way -->
      <div class="lfm_song"> % </div>
      <div class="lfm_artist">
       <div class="lfm_enlighten"></div><!-- Your own use. Try "content:'by:';" -->
       %
      </div>
      <div class="lfm_album">
       <div class="lfm_enlighten"></div><!-- Your own use. Try "content:'from:';" -->
       %
      </div>
     </div>
     <div class="lfm_clear"><!-- Don't forget to CLEAR that. -->
    </div>
notes
While jQuery.nowPlaying has been tested and tweaked, it's worth noting that there are some issues on Last.FMs side that can take a toll on your own site. Don't be suprised if album artwork doesn't show, album names don't work in certain modes, or if a song doesn't correctly register as "now playing." Hopefully these issues will be fixed in the near future!
thanks
jQuery.nowPlaying is based on jQuery.LastFM by Engage Interactive. It was coded by Kyle Hotchkiss, of course! This demo uses some of Rogie King's amazing art. If jQuery.nowPlaying has changed your life, made you rich and famous, or just made your site a little bit more rad, add Kyle on Last.FM and let him know!