del.icio.us seems to be the flavour of the month! Bloggers around the world are turning their attention to this amazing system.
I’ve been using del.icio.us for a while now and have finally written some code to integrate it into this here blog.
Thanks to an awesome PHP API I’m now able to access the raw data directly from the del.icio.us web API. Its got method calls for everything in the del.icio.us API, namely:
- Get posts by date - http://del.icio.us/api/posts/dates
- Get tags - http://del.icio.us/api/tags/get
- Get posts by tag/date - http://del.icio.us/api/posts/get
- Get recent posts - http://del.icio.us/api/posts/recent
- Get all posts - http://del.icio.us/api/posts/all
- Add new post - http://del.icio.us/api/posts/add
- Delete post - http://del.icio.us/api/posts/delete
- Rename tag - http://del.icio.us/api/tags/rename
I use the PHP API to generate the list of link categories in the bottom navigation and all the links on the links page.
I needed to write three bits of code to get the links page to work as I wanted it to.
XHTML
This was probably the most difficult part. Trying to write perfectly semantic XHTML while still being able to manipulate it with both Javascript and CSS.
I decided to use DL’s for the list of links. The code looks something like this:
<dl class="closed" id="tag_auckland">
<dt><a href="javascript://" onclick="changeState('tag_auckland')" title="1 links">auckland</a> <a name="tag_auckland"> </a></dt>
<dd><h4><a href="https://connect.aucklandcity.govt.nz/ePathway/0216/Web/default.aspx">Pay Fine</a> <small>[<a href="#top">top</a>]</small></h4></dd>
<dd>Pay your parking fines in Auckland City online.</dd>
<dd><small>Related tags: auckland new-zealand</small></dd>
</dl>
I don’t really know why I used DL’s…it may be because I’m totally in love with them at the moment. :) Nevertheless, the end result is totally what I was looking for.
javascript
I used a tiny bit of Javascript perform a sneaky little className change as you can see below:
<script type="text/javascript">
function changeState(this_obj) {
var obj = document.getElementById(this_obj);
if (obj.className == ‘closed’) {
obj.className = ‘open’;
}
else if (obj.className == ‘open’) {
obj.className = ‘closed’;
}
}
</script>
The function takes the id reference of the HTML element and changes the className from either ‘open’ or ‘closes’ depending on the current className of that element.
CSS
The CSS is actually where all the magic happens. The mix of the Javascript and the below CSS allows for the dynamic showing and hiding of the links.
margin-left: 5px;
text-decoration: none;
clear:both;
background: URL(/images/plus.png) no-repeat 0 6px;
}
dl.closed dt a {
font-variant: small-caps;
font-family: Trebuchet MS;
font-weight: bold;
font-size: 140%;
color: #004675;
text-decoration: none;
padding-left: 15px;
margin: 0;
}
dl.open dt a {
font-variant: small-caps;
font-family: Trebuchet MS;
font-weight: bold;
font-size: 140%;
color: #004675;
padding-left: 15px;
text-decoration: none;
}
dl.closed dd {
display: none;
}
dl.open{
margin-left: 5px;
text-decoration: none;
clear:both;
background: URL(/images/minus.png) no-repeat 0 6px;
}
dl.open dd {
display: inherit;
margin-left: 5px;
}
dl.open dd small {
color: #7EA1B9;
}
dl.open dd h4 {
margin: 5px 0 5px 0;
font-size: 100%;
}
so…?
So now we have all the code we need to build a links page listed by tag name. There is just one more thing left to do…make del.icio.us happy.
‘How?’, you ask. Well, there is nothing del.icio.us hates more than getting its bandwidth raped so I decided to only run this script once every 6 hours. I added a line to the crontab to run the PHP code which then generates an include file (I’ve called mine delicious.inc) that I simply include into the links page of my site. Pretty cool, huh?
I’ve included a link to the PHP code I used. Download it, use it, make it better. Just remember where you got it! ;)
Download PHP file
