Coredump

There is, of course, a ready-made Javascript code to include the latest del.icio.us postings to your blog or web page, but if you want to ‘beautify’ it, take a look at what I’ve done.

I used del.icio.us’ JSON object, named Delicious.posts that contains the latest bookmarks. I snatched the code from the del.icio.us JSON help page and added a few enhancements, like the extended note and the associated tags.

This is the code:

<h2 class="sidebar-title">latest del.icio.us postings</h2>
<div id="delicious-posts"></div>
<script type="text/javascript" src="http://del.icio.us/feeds/json/iandexter \\
   ?count=5"></script>
<script type="text/javascript">
/**
 * Delicious linkroll - Modified code from del.icio.us link roller.
 * Ian Dexter R. Marquez, 2006
 */
 document.write('<style type="text/css">#delicious-posts ul{ \\
   list-style-type:none}#delicious-posts span{ \
   font-size:smaller;margin:0;}</style>');
 function showImage(img) { return (function(){ img.style.display='inline'; }) }
 var ul = document.createElement('ul');
 for(var i=0; i<Delicious.posts.length; i++) {
  var post = Delicious.posts[i];
  var li = document.createElement('li');
  var url = document.createElement('a');
  var note = document.createElement('span');
  var img = document.createElement('img');
  img.style.display = 'none';
  img.style.padding = '0 2px 0 0';
  img.height = img.width = 16;
  img.src = post.u.split('/').splice(0,3).join('/')+'/favicon.ico';
  img.onload = showImage(img);
  url.setAttribute('href', post.u);
  url.appendChild(document.createTextNode(post.d));
  if(post.t) {
   note.appendChild(document.createTextNode(' / '));
   for(var j=0; j<post.t.length; j++) {
    var tag = document.createElement('a');
    var tagu = 'http://del.icio.us/iandexter/' + post.t[j];
    tag.setAttribute('href', tagu);
    tag.appendChild(document.createTextNode(post.t[j]));
    note.appendChild(tag);
    note.appendChild(document.createTextNode(' '));
   }
  }
  if(post.n) {
   var post_note = post.n ? post.n : '';
   url.setAttribute('title', post_note);
   note.appendChild(document.createElement('br'));
   note.appendChild(document.createTextNode(post_note));
  }
  li.appendChild(img);
  li.appendChild(url);
  li.appendChild(note);
  ul.appendChild(li);
 }
 document.getElementById('delicious-posts').appendChild(ul);
</script>
<noscript><h2 class=”sidebar-title”><a href=”http://del.icio.us/iandexter”> \\
   latest del.icio.us postings</a></h2></noscript>

First, set up the HTML container for the heading and the postings. The Delicious.posts object is fetched using:

<script type=”text/javascript” src=”http://del.icio.us/feeds/json/iandexter \\
   ?count=5"></script>

The script iterates through the object, parsing the URL (Delicious.posts[i].u), description (d), and extended note, if any (n). The inner j loop iterates through the tags (t).

The script also fetches the page icon of each link.

To roll your own, just replace the username in:

<script type=”text/javascript” src=”http://del.icio.us/feeds/json/username \\
   ?count=5"></script>

and

    var tagu = 'http://del.icio.us/iandexter/' + post.t[j];

Paste in the code somewhere in body of your web page, and you got yourself a yummy link roller.