Easy del.icio.us integration with JSON and Dishy

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

• getRelatedTags(tag)
• compactOutput(feed)
• Dishy the Plugin
• Dishy the Musical

Written by Christian Heilmann. Some rights reserved