Check out my
new book!
HTML5 Games book
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.

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:

  • 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.

    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]
    ⇓ 10 comments richtaur

    But why did you use the old ugly one on this post? ;)

    September 7, 2008 at 3:46 PM
    Jacob Seidelin

    Oh, that was just to show it for comparison.

    September 7, 2008 at 9:37 PM
    Anonymous

    Lost! My precious is lost!

    But, seriously, the link to the zip file appears to be broken now. I'd love to integrate this, and others, into Chiron.

    September 18, 2008 at 12:12 PM
    Jacob Seidelin

    Fixed. The correct link is http://www.nihilogic.dk/labs/digg_button/prettydigg-0.1.1.zip

    September 18, 2008 at 12:57 PM
    Anonymous

    Nice 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
    Anonymous

    you 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.

    I 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/

    November 17, 2008 at 11:38 AM
    Jacob Seidelin

    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
    Anonymous

    hi, how i can set topic?

    March 24, 2009 at 6:01 AM
    Anonymous

    Hi,
    If 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

    March 26, 2009 at 4:58 AM
    Mike

    Many thanks for your code! this has been a god-send for our site :).

    September 30, 2009 at 9:50 PM
    Post a Comment