Adding Digg integration to Wordpress

I just added Digg links to all my Wordpress posts on this page, and it was really easy. Here is a quick tutorial on how to do it yourself, just in case you don’t want to muddle through it yourself.

First, visit the Digg integration site where you’ll find what code snippets you need to add to your page. I’m going to list the code snippets that are available on their site today, but to ensure yours are up-to-date, you’ll want to go to their site and get the latest. There is good info on their page, but I’m going to show you specifically how to make the same graphic as you see on this post.

There is only one real complication: You want readers to be able to digg your posts from within the post’s permanent link page, or anywhere else it shows up in a list of posts. It is really easy to add a digg graphic to individual posts on their permanent link pages. Here is the Digg code snippet you will add:

This snippet will digg the URL of the current page the browser if viewing, so it is only appropriate to be placed on a post’s permalink page. For example, take this entry. This entry’s permalink page is http://weblog.dangertree.net /2007/06/02/ adding-digg- integration-to- wordpress/. But you may be viewing it from the main index page or an archive. To edit the post’s permalink page, you need to edit a template file that handles your theme’s presentation. I use the Wordpress default theme, Kubrick, so I’ll show you how I did it with that theme. If you use another theme, you’ll have to decide where the best place to put your Digg graphic will be.

Open wp-content/themes/default/single.php. You can do with from your server or through the Wordpress admin site (Presentation section). If single.php is not editable, you’ll have to chmod it. I wanted my Digg graphic to float just to the right of the post title, so I encased it in a div tag. So my snippet now looks like this:

Then I placed it just before the heading containing the post title (search for “the_title”). This will float the Digg graphic at the same level as the post title on the right hand side.

Now if you want Digg graphics to show up on the main page and archive pages of your site for all the posts listed, it is just a little bit (but not much!) more complicated. Take a look at the Digg integration site again and see the example for “When the URL you wish dugg differs from the current webpage”. Here is the code snippet that you’ll use:

Where you see WEBSITE_URL is where you’ll have to make Wordpress put the permalink URL to the post that is being viewed. We’re going to work on the archive page and the index page within the your theme directory. You will post the same code into both the archive.php and index.php files, and all you have to do with the code above is replace WEBSITE_URL with <?php the_permalink() ?>. This calls a php method in Wordpress that returns the current post’s permalink URL. It is that easy! So put that code wherever you want in both files, and you should be done!

Also, please Digg this entry to support this tutorial. Thanks!