A prettier, more styleable Digg button
Lately, I've been looking at APIs at some of the big sites (like Flickr) and most recently I've been playing around with the Digg API. I've got something nice coming soon but as a simple intro project - and since I'm also working on a redesign of nihilogic.dk - I decided to pretty up the "Digg this" button as I've always found the official one rather ugly and inflexible.
A compromise
But, like any other respectable Web 2.0 service, Digg also has an API for developers wanting to use their services in their own software so I was surprised that I couldn't really find anyone who had built their own custom Digg buttons with this. The API is unfortunately somewhat limited (for security reasons, no doubt) in that it only allows you to retrieve info from Digg, ie. you cannot submit or vote for sites directly using the API. Still, this lets us at least get any information Digg has about the page in question so we can show something other than a dull "Digg This" link.
Let's skip to the end result for a bit. Doing this (the bare minimum):
Options
Optionally, you can pass an options object like this:
A few more settings are available, the full list being:
url: Override the URL of the page. Useful for blog posts. Like "digg_url" for the official button.
title: Title to submit the page with (when not already submitted). Like "digg_title" for the official button.
description: Description to submit the page with (when not already submitted). Like "digg_bodytext" for the official button.
topic: Topic to submit the page under (when not already submitted). Like "digg_topic" for the official button.
media: Media to submit the page under (when not already submitted). Like "digg_media" for the official utton.
style: Style of the button. See below.
newWindow: If true, clicking the button will open a new window/tab.
autoUpdate: If true, the Digg count will be updated automatically.
updateInterval: Interval for the autoUpdate timer in miliseconds. Defaults to 30000, minimum is 10000.
onlyIfDugg: Only displays the button if the page has already been submitted to Digg.
submitText: Alternative text instead of "Submit", ie. "Digg This!" or whatever you fancy.
Styles
Different styles are available and it's rather easy to create your own. See the included CSS files for examples. The CSS classes use a naming pattern like this:
dg_container_<keyword>
dg_diggs_link_<keyword>
...
where keyword is the value of the "style" setting in the options object above.
Ie. if you create your own style called "prettydigg", name your classes dg_container_prettydigg, dg_diggs_prettydigg, etc. and call Digg.createButton(parentNode, {style:"prettydigg"}).
Below you'll see a selection of the styles in the package. There are only a couple and they're nothing fancy, but it's pretty easy to make your own.
There is one more method: Digg.setAPIKey(). Digg asks for an API key (that you decide) for each call, using the URL for your homepage or application is cool:
Get the files here: prettydigg-0.1.1.zip [15 KB]
Official Digg button
Even if including a dynamic "Digg this" button on your blog or website is easy as pie and only requires setting a few variables and including a JavaScript file from their server (which includes a few more files) it doesn't leave you a lot of options with regards to styling (ie. 2 different button sizes and a custom text color, that's about it). If you want it to blend better with your layout, you're stuck with a static link to Digg, trading appearance for interactivity.
A compromise
But, like any other respectable Web 2.0 service, Digg also has an API for developers wanting to use their services in their own software so I was surprised that I couldn't really find anyone who had built their own custom Digg buttons with this. The API is unfortunately somewhat limited (for security reasons, no doubt) in that it only allows you to retrieve info from Digg, ie. you cannot submit or vote for sites directly using the API. Still, this lets us at least get any information Digg has about the page in question so we can show something other than a dull "Digg This" link.
Let's skip to the end result for a bit. Doing this (the bare minimum):
Digg.createButton(document.getElementById("buttonParent"));
..will get you a Digg button that displays the number of Diggs the current page has gotten or, if it has not been submitted yet, the text "Submit". The first argument is required and is the DOM element the button will be added to. Clicking the button will take you to either the relevant page on Digg.com or to the submission page if it has not been submitted yet. The default button looks like this:
Options
Optionally, you can pass an options object like this:
Digg.createButton(
document.getElementById("buttonParent"),
{
style : "digg_guy_dark",
newWindow : true,
autoUpdate : 30000
}
);
This will give you a button in another style (more about those in a bit) which opens in a new window when clicked and automatically updates the displayed Digg count every 30 seconds.A few more settings are available, the full list being:
Styles
Different styles are available and it's rather easy to create your own. See the included CSS files for examples. The CSS classes use a naming pattern like this:
dg_container_<keyword>
dg_diggs_link_<keyword>
...
where keyword is the value of the "style" setting in the options object above.
Ie. if you create your own style called "prettydigg", name your classes dg_container_prettydigg, dg_diggs_prettydigg, etc. and call Digg.createButton(parentNode, {style:"prettydigg"}).
Below you'll see a selection of the styles in the package. There are only a couple and they're nothing fancy, but it's pretty easy to make your own.
| Default style | |
| Default style (red) | |
| Default style (dark) | |
| "Digg Guy" style (dark) | |
| "Badge" style (dark) |
There is one more method: Digg.setAPIKey(). Digg asks for an API key (that you decide) for each call, using the URL for your homepage or application is cool:
Digg.setAPIKey("http://www.nihilogic.dk/");
Anyway, that was a lot of words for a simple button. Get the files here: prettydigg-0.1.1.zip [15 KB]
But why did you use the old ugly one on this post? ;)
September 7, 2008 at 3:46 PM Jacob SeidelinOh, that was just to show it for comparison.
September 7, 2008 at 9:37 PM AnonymousLost! My precious is lost!
September 18, 2008 at 12:12 PM Jacob SeidelinBut, seriously, the link to the zip file appears to be broken now. I'd love to integrate this, and others, into Chiron.
Fixed. The correct link is http://www.nihilogic.dk/labs/digg_button/prettydigg-0.1.1.zip
September 18, 2008 at 12:57 PM AnonymousNice post, been looking for a custom digg counter for ages. Just a pity articles cannot be dugg from your own site using this
November 6, 2008 at 4:59 PM Anonymousyou say it's not possible to use the API to submit articles from your site to digg. But this sites offers an API version which does let you do that.
November 17, 2008 at 11:38 AM Jacob SeidelinI would like to see this however converted for website use, instead of just a wordpress version.
here is the url: http://www.leigeber.com/2008/04/custom-digg-counter-in-wordpress-with-php/
It's possible to go to a submission page with the url, title, etc. already filled in, and my script does that too if the page hasn't been submitted. What it can't do is let the reader vote without leaving the page, I don't think the one at the site you linked does that either. They work in somewhat similar ways as far as I can tell, only mine uses JavaScript and the other is PHP. Please correct me if I'm wrong.
November 17, 2008 at 12:04 PM Anonymoushi, how i can set topic?
March 24, 2009 at 6:01 AM AnonymousHi,
March 26, 2009 at 4:58 AM MikeIf any developer reading this can help us make a button for the bottom of the SAVE THE FROGS! website http://savethefrogs.com please email us through that site's contact page. Thanks, Kerry
Many thanks for your code! this has been a god-send for our site :).
September 30, 2009 at 9:50 PM