Blogger delicious Widget

This is a read any single del.icio.us feed widget to use in you Blogger sidebar. You can customize it to show the date, notes, tags and specify the size of note to display. You can use it for any del.icio.us feed not just your own. Check out the bottom of del.icio.us feeds for a list of all the possibilities.

I originally wrote this for My Comments Elsewhere but have now made it a generic del.icio.us feed reader to put in your side bar. The defaults are as for My Comments Elsewhere .If you want a simple install for just My Comments Elsewhere, there is a one button installer at that link. I am not going to write a widget installer for this more generic solution, since this is more useful for anyone who wants to any any deli.icio.us feed in their sidebar and so you will have to go into to edit the feed parameters. You can use the code to put multiple feeds into one sidebar and so on.

The is the HTML/Javascript code to put into the HTML/Javascript Page Element. Or you can download it (remember to right click save or the browser will try to run it and it wont since it has a false del.icio.us id until customised by you). This contains commented settings to change.

<script type="text/javascript">
var alpha=0; // alpabetical sort =1
var tags=0;  // show tages =1
var time=1;  // date/time = 1
var note=0;  // show note =1
var notesize=100; // size of note
// change "DELICIOUSID" below
// you can change tags from "mycomments"
// and "count" to the number of items to display
</script>
<script src="http://martinfreedman.googlepages.com/sidedeli.js"></script>
<script src="http://feeds.delicious.com/v2/json/DELICIOUSID/mycomments?count=10;callback=show"></script>
<noscript>You need to enable JavaScript to read this</noscript>

This is the javascript source is for sidedeli.js (you can download sidedeli.js if you are having difficulty copying and pasting or try a browser better than Internet Explorer).

function timestamp(ts) {
ts=ts.split('T');
var D=ts[0].split('-');
var T=ts[1].split(':');
var myTS= new Date(Date.UTC(D[0],D[1]-1,D[2],T[0],T[1],0));
var now= new Date();
if ((myTS.getDate() == now.getDate()) && (myTS.getMonth() == now.getMonth())){
return myTS.toLocaleTimeString();
}
else return myTS.toLocaleDateString();
}

function readobj(feedobj) {
var uppersort=feedobj.d.toUpperCase();
return new Array(uppersort, feedobj);
}

function writeitem(item){
document.write('<li><a href="'+ item.u + '" target="_blank">'+ item.d +'</a>');
if (time) document.write(' - <i>'+ timestamp(item.dt)+ '</i>');
if (note && item.n.length){
if (item.n.length > notesize) item.n = item.n.substring(0,notesize) + '...';
document.write('<br/>'+ item.n);
}
if (tags) document.write('<br/>['+ item.t+ ']');
document.write('</li>');
}

function show(json) {
var links= new Array();
for (key in json) links.push(readobj(json[key]));
if (alpha) links.sort();
document.write('<ul>');
for (key in links) writeitem(links[key][1]);
document.write('</ul>');
document.write('<div style="font-size:75%; text-align:center"> <a href="http://impartialism.blogspot.com/2009/01/blogger-delicious-widget.html">Widget by faithlessgod</a></div>');
}

tags below the existing code - that is after the

// and "count" to the number of items to display

line.

That's it, enjoy!

Post Script 1: Now I have (cough) mastered javascript and JSON it takes me longer to write such a post as this than to write, test, deploy and release the widget. Damn!

Post Script 2: The sidedeli.js on my server has been updated, no bugs, just cleaner. Will post on that shortly and then put a link to that post here.

Post Script 3: sidedeli.js has been update in this post. This is includes a better timestamp function, no globals and a more functional level way of moving the data between functions and makes it more readable.