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:
- Delicious linkroll, revised
- Yummy?
- Snag movie audio tracks
- Link blogging
- “Bookmark this site” script
5 Comments