Add Digg It Badge to Wordpress

I just recently added the Digg It buttons on here. I had to do some debugging to try to get it to work properly, so I figured I’d pass along my work for anyone else to use. There are two things that I did to make it work right:

  1. Modify the posts loop on the template pages I wanted the badge to appear on. In my case this was the index.php, single.php, and page.php templates.
  2. I encapsulated the Digg code in a DIV so I could style it up.

This snippet of code below is what you will want to put in your posts loop, right above the <?php the_content(); ?> function call. I chose to include the digg_url and digg_title JavaScript variables.

The digg_url variable is required if you are going to place the badge in your index.php template, or any template where it is possible to see multiple posts e.g. archives.php. What it does is encodes each badge with the permalink for the appropriate post, rather than using the URL of the page you are currently viewing. I decided to include digg_url on single.php and page.php for consistency. The digg_title variable pre-populates the Story Title field for the first person to Digg the post.

<div class="diggit"><script type="text/javascript">
digg_url = '<?php the_permalink() ?>';
digg_title = '<?php the_title(); ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div>
<?php the_content(); ?>

Now for the CSS stuff. For my template I only needed to float the DIV to one side — I chose left — and modify the padding options to get it in position.

.entry .diggit {
float:left;
padding: 20px 5px 0 0;
}

The general information for this came from the Digg Tools Integration section. I added in the necessary Wordpress PHP functions in order to fill in the JavaScript variables. Try it out and let me know how it goes.