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.
