How to fix the Digg Tools JavaScript for WordPress

If you have a wordpress blog and you’ve ever had a popular enough post to have it posted to Digg.com, you might be tempted to paste the digg tools javascript into your post to integrate your site with the digg post. The first thing you noticed after you got the post edited is that your new Digg.com widget didn’t work properly. It reflects the accurate Digg count on the post page but the home page has an incorrect or 0 count.

The following default Digg.com integration JavaScript works on the post page but not on your blogs front page. Here is a quick explanation of the problem. Notice in the original JavaScript code below, the WEBSITE_URL parameter is enclosed in single quotes. WordPress interprets single quotes when your post is displayed and prints a pretty curved quote instead. This results in pretty apostrophes and broken JavaScript. The reason the Digg count works on the post page is that the digg_url parameter, if not set, is defaulted to the referring URL. If the referring URL, in this case, the post page, is the same as an existing digg article, the Digg count is correctly accessed.

<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>


Well, the fix for this is so simple that I almost didn’t blog about it. Only after helping fix a post for ExtraLife, Scott said that I ought to write all this down and make a post.

The fix is simply to change the single quotes to double quotes. WordPress doesn’t send interpreted double quotes and your Digg widget renders properly in both locations. Since that was such a simple tweak, I’ve also included a div with a style that displays the widget on the right side of the text with the text wrapping around the bottom when the widget ends.

Here is my modified and corrected JavaScript. Enjoy. I’m also pasting it at the top of this page so you can see a working example. I don’t usually Digg my own articles but oh well.

<div style="position: relative; float: right; width: 52px; margin: 0px 10px 0px">
<script type="text/javascript">
digg_url = "WEBSITE_URL";
</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>