Using the NEW Digg JavaScript Button with WordPress

By this weekend I hope to have a new version of the diggIntegrator plugin up and running for everyone. While that release date moves closer I thought I'd offer up a little code snippet for anyone interested in including the new Digg Buttons without adding a plugin.

One of the major downsides Digg's newest implementation is the lack of a "not dugg" state. You basically just get a digg counter set to 0 until your post is submitted and dugg - that's why the diggIntegrator plugin is so nice. Now, if you're ok with the 0 count then there's a quick way to get the JavaScript up and running without a plugin - here's how it works.

Setting up the Code

In this theme I've made room for the JavaScript to appear next to the post's opening paragraph. You can see a screenshot of what I mean above.

This portion of the code is handled with a little CSS and html. I created a custom <div> and gave it a class "diggContainer." It's basically just set to "float:left" with a left and right margin of about 1em. The styling is really upto you. With the exception of the JavaScript itself this portion, the styling, is totally upto you. It's just a matter of creative CSS and HTML.

Using the JavaScript

With the newest set of buttons Digg simplified a lot of the process. In it's initial release you were required to include the url containing your post on digg. Because you have little to no control over where your story turned up (unless you submitted it yourself) the code really couldn't be implemented well until after you'd received your first digg. One of the major problems I encountered in writing the diggIntegrator plugin was a need to "sniff out" the right referring URL.

Now we don't need to worry about that so much. Digg was nice enough to change how the JavaScript works and we can now simply include the url of our post to get the code working. I should note that Digg suggests URL encoding your link - I've found that this doesn't seem to work so we'll be skipping that step. Once you've figured out where to put the JavaScript (and after you've applied the proper styling) you can add the JavaScript. Here's how it would look for the example above:

<div class="diggContainer"><script type="text/javascript">

digg_url = '<?php the_permalink() ?>';

</script>

<script src="http://digg.com/tools/diggthis.js" type="text/javascript"> </script></div>

As I said - the styling is done using the class "diggContainer" and some external CSS. The code itself is all handled by Digg. Remember that this method is for WordPress blogs which offer direct access to your theme code.

diggIntegrator

This weekend I'm hoping to release the new version of my diggIntegrator plugin which will allow for much more varied customization of this script. I'm adding the option to display a different icon for the pre-dugg state as well as some special customization which will make theme integration much easier. If you're looking for any specific customizations please let me know and be sure to watch the official diggIntegrator page for the release.