Coredump
Work, play, and everything in-between [feed]

Roll your own del.icio.us link roll

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></delicious></script>

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.

Read more:


5 Comments

Andrew says:

Dear Ian,

THANK YOU for posting the code above. I love that it includes the favicons. Not knowing the first thing about javascripting, I have found it a real boon. Is there a relatively simple way to sort the feed alphabetically?(I’ve managed to tweak it to show a tag, I just want to see how to sort the results).

I know that the linkroll delicious generates will do that, but it doesn’t include the favicons.

Ultimately I’d like to have a feed that had both favicons and an alphabetical structure, but I don’t really know where to look.

! No hard feelings if it’s not as interesting as real life and you’d rather do something else!

Thanks again

Andrew.

Posted on 28 April 2009 am30 3:06 AM UTC

Ian Dexter says:

Hey, Andrew. Thanks for dropping by.

Here is the code, as requested: http://iandexter.net/850/delicious-linkroll-revised

Enjoy! :)

Posted on 29 April 2009 pm30 7:34 PM UTC

Andrew says:

Dear Ian,

I haven’t tried out the new code yet – I’ve just this minute stopped by, but thank you for taking the time out of your life to do this for everyone. I’ll certainly blog about how much you’ve helped- and how quickly! Thanks a million! (I’ll send a link to my held-together-with-stickytape-noob-site when it’s done, so you can see what I’ve made of your script). Thanks again!

Andrew.

Posted on 5 May 2009 am31 1:36 AM UTC

philip says:

do not get that to work! what can i do?

Posted on 21 July 2010 pm31 11:44 PM UTC

Peter says:

Love it – thanks!

Posted on 3 September 2010 am30 5:52 AM UTC

Leave a comment


« »