Easy del.icio.us integration with JSON and Dishy

The social bookmarking site del.icio.us offers their data in various formats to re-use elsewhere. While they offer the common API access and output formats like PHP, they also go the extra mile for JavaScript developers and make the content available in JSON format.

This in conjunction with dynamically created SCRIPT tags has several benefits:

It can be however a bit tricky to use the JSON output when you haven't dealt with object notation before. This is where Dishy comes in to normalize and ease the retrieval and display of your link and tag data.

What is Dishy?

Dishy is a JavaScript wrapper for the del.icio.us JSON REST API. All you need to use it is to include it in your document.

<script type="text/javascript" src="dishy.js"></script>

You then have several methods to use and properties to overwrite at your disposal:

Dishy properties

owner
Your del.icio.us ID - this is hard coded to my ID now, so make your you overwrite this property!
fontMin
the minimum font size of tags in the tagcloud in pixels
fontMax
the maximum font size of tags in the tagcloud in pixels
amountOfTags
how many tags to get for the tagcloud
showAmount
Boolean if each tag should have the amount of links displayed in parenthesis
callback
function to call when one of the methods successfully retrieved the data. Will be reset to null once the callback function was initiated

Dishy methods

None of the dishy methods have a return value. Instead they populate properties of the main dishy object and you can define a function that will be called once the data has been retrieved in dishy.callback. This makes it easier to use, as you can simply call the methods once the page has loaded and use the data immediately when a visitor for example clicks a link.

dishy.getTags()
will retrieve your tags. If you set amountOfTags to null you get all returned.

Properties affected and their formats:

dishy.tags
Object containing tags and the amount of links using them
{"ajax":3,"CSS":9,"design":43,"fun":4,"geek":2,"humor":4,"JavaScript":6}
dishy.tagsHTML
string of HTML with tags as space separated rel links and inline styles defining the font size. The size is the amount of links using the tag. By default there is a fontMin and fontMax size set which you can overwrite that ensures that tags don't get too small or large.

<a rel="tag" style="font-size: 30px;" 
href="http://del.icio.us/codepo8/ajax">ajax</a> <a 
rel="tag" style="font-size: 13px;" 
href="http://del.icio.us/codepo8/art">art</a> <a 
rel="tag" style="font-size: 14px;" 
href="http://del.icio.us/codepo8/beginningjavascript">beginningjavascript</a> <a 
rel="tag" style="font-size: 24px;" 
href="http://del.icio.us/codepo8/CSS">CSS</a> <a 
rel="tag" style="font-size: 30px;" 
href="http://del.icio.us/codepo8/design">design</a>
	
dishy.getLatest()
will retrieve your latest links.

Properties affected and their formats:

dishy.latest
Array of objects for each link.

[
  {"u":"http://www.openjacob.org/draw2d.html",
   "d":"Open-jACOB Draw2D",
   "t":["ajax","graph","graphics","visualization","tools"]},
  {"u":"http://www.huhcorp.com/","d":"We do stuff.",
   "t":["humor","funny","business","satire","marketing","design"]},
  {"u":"http://www.virtualnes.com/","d":"virtual super nes - 
  play games classics","t":["Games","Nintendo","Emulator","NES","game"]}
...
]
dishy.latestHTML
string of HTML with the links as a nested list marked up as xFolk microformat. Notice there is no outer element, you will need to create a UL to nest these!

<li class="xfolkentry">
  <a class="taggedlink" 
  href="http://www.openjacob.org/draw2d.html">Open-jACOB Draw2D</a>
  <ul class="meta">
    <li>
      <a rel="tag" href="http://www.del.icio.us/codepo8/ajax">ajax</a>
    </li>
    <li>
      <a rel="tag" href="http://www.del.icio.us/codepo8/graph">graph</a>
    </li>
    ...
  </ul>
</li>
<li class="xfolkentry">
  <a class="taggedlink" 
  href="http://www.huhcorp.com/">We do stuff.</a>
  <ul class="meta">
    <li>
      <a rel="tag" href="http://www.del.icio.us/codepo8/humor">humor</a>
    </li>
    <li>
      <a rel="tag" href="http://www.del.icio.us/codepo8/funny">funny</a>
    </li>
  ...
  </ul>
</li>
	
dishy.getByTag(sTag)
will retrieve your links associated with the provided tag.

Properties affected:

dishy.tagFeed[sTag]
Same format as dishy.latest
dishy.tagHTML[sTag]
Same format as dishy.latestHTML

To Do

Get Dishy

Download Dishy Version 1.0

Examples

Interact