Go to content

DON'T PANIC Page looking weird? Don't worry.

Either you turned styles off (in which case you might want to turn them back on again), you have CSS disabled or you are using a user agent incapable of rendering stylesheets properly.

You can also view the site in the oldschool 2006 style if you are mental like that.

Changelog

This is where I will try to document all the changes made to the site. Sometimes I'll make lots of changes, sometimes i'll make little tweaks.

Flickr and Audioscrobbler Feeds

1076 days ago

I’ve added feeds from my flickr and Last.FM accounts to my site.

Flickr was easy enough. If you have an account you can visit a page that allows you to create your own badge. I opted for the HTML version, and turned buddy icon, screen name and styling off. I opted for the square 75x75 pixel thumbnails and no orientation (cos i'm going to style it myself) and selected no background and no border so I cet the cleanest code possible.

When I hit "preview and get code" I was given this...

<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position.
Below are some styles to get you started!
*/
#flickr_badge_uber_wrapper {text-align:center; width:150px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<div id="flickr_badge_uber_wrapper"><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=s&layout=x&source=user&user=37464210%40N00"></script>
</div></div>
<!-- End of Flickr Badge -->

Yuk! There's a load of CSS and comments in there - Not what I need at all, so I whittled the code down to...

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=s&layout=x&source=user&user=37464210%40N00"></script>

Hurrah!

Last.FM (AudioScrobbler) was slightly more difficult, as they don't offer a badge like Flickr does.

Firstly I went to the Audioscrobbler Web Services page, and clicked on the RSS link for Recent Tracks. This gave me a link to RJ's feed (http://ws.audioscrobbler.com/1.0/user/RJ/recenttracks.rss - no idea who RJ is).

All I needed to do was change the "RJ" to "bashford" and I had the URL for my RSS feed!

The next step was finding a way to get this RSS feed onto my site. I could write something in PHP, but at this point I can't be bothered so I went to Feed Digest, set up a new account and created a "digest" using the URL I just got from the Audioscrobbler Web Services page!

This gave me the following code...

<script type="text/javascript" src="http://app.feeddigest.com/digest3/WFPZNIYOKI.js">
    <noscript><a href="http://app.feeddigest.com/digest3/WFPZNIYOKI.html">Click for AudioScrobbler.</a>
    By <a href="http://www.feeddigest.com/">Feed Digest</a></noscript>
</script>

The Click for AudioScrobbler link (only displayed if JavaScript is turned off or unavailable) links to an HTML version of the digest I'd just created and wasn't quite what I wanted, so I changed that to a link to my Last.FM statistics page.

Sorted!

Conditional Comments