.:. tweet

Put Your Digg in a Box .:.

Off to The Rich Web Experience early tomorrow morning; before I go, here's the second in what I hope will be an ongoing series of case-hardened JavaScript badges, Put Your Digg in a Box.

As with the Twitterati badge, I'm hosting this one over on, in the hope that any weird bandwidth surge will hurt more over there than it will in here.

Most of this should look familiar; if it doesn't, please go read Case-Hardened JavaScript. Briefly: we are passing a JSON object with a bunch of arguments to a remotely-hosted script; anything not specified here will come up defaulted to the CSS.

What's different here: Digg has about 50 standard categories, any of which can be specified in the addTopics object. Please send an array of objects, each of which show a valid name and short_name value ... to figure out what these are, visit Digg and poke around.

To add new topics on the fly, wait for your first set of results to come up, mouse over the little Digg dingbat, and observe the note that says shift-click to add this topic. If you shift-click, your topic will be added to the drop-down list on the page and you'll be able to flip back and forth.

Other stuff not on display in Twitterati: next, previous, and show all/show popular links. If you'd like to start the badge with just the popular stuff showing, set popular to true.

Get This For Your Page

<script type="text/javascript" src="">{
   "border":"2px solid black",

Valid Arguments

  • title : defaults to Put Your Digg in a Box, which I personally find hilarious. :)
  • topic : defaults to nothing, which will show what's popular on the front page.
  • count : number of entries per page; defaults to ten.
  • addTopics : see above; you want to pass an object of topics to show by default.
  • className : send a CSS class name if you want to completely hose my default CSS and use your own.
  • addClassName : send a CSS class name if you want to use your own CSS in addition to mine.
  • popular : send true if you want your badge to come up with the popular view shown first.
  • width : defaults to 100% of the available width
  • border : defaults to 1px solid black
  • background : defaults to white; if you set evenBackground, oddBackground, and headerBackground, you won't see it at all.
  • headerBackground : defaults to your main background.
  • headerColor : defaults to black.
  • evenBackground : defaults to your main background.
  • oddBackground : defaults to gray.
  • evenColor : defaults to black.
  • oddColor : defaults to black.
  • hoverBackground : defaults to #ffa, a light yellow.
  • hoverBorder : defaults to black.
  • hoverColor : defaults to black.

Have fun with this, feel free to try it on your site or Digg it, and please do let me know how it goes.

Comments from before Disqus:

dang nguyen .:. 2007-11-27 06:43:51

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact