Current Version: 0.2 (Download)
Release Date: September 8, 2006
Compatibility: Only tested with WordPress 2.0




The Digg Button plug-in for WordPress will let you easily pick and choose what posts to display the “Digg It” button on. This was created because there was no way to insert the Digg API code so that it works for ALL browsers. There was always a temporary solution that worked for Firefox but nothing would get displayed for Internet Explorer users.

I thought about using the Digg This plug-in because it would automatically add the links I need anytime it detected someone coming from a Digg article. The thing I don’t like about that is every article that gets submitted would receive the button. I like to put it on a few articles but I don’t want it on every article. Not only that but I couldn’t easily place that button within a post which is now very easy with the Digg Button plug-in.

Update:
Someone has branched off of this Digg Button plug-in to create DiggClick. It will automatically detect when someone has Dugg your post and add the Digg button. You can then pick and choose which posts are able to display the Digg Button.

 

–Changelog–

09/08/2006 – Created image placeholder for when the Digg URL is missing
– Changed CSS tag from “digg_button” to “diggbutton” for wider browser compatibility.
08/24/2006 – Original Release

 

–Installation–
All you have to do for the installation is drag the entire diggbutton folder into the WordPress “plugins” folder and activate it. Do not rename the folder. Your folder structure should look like this: /wp-content/plugins/diggbutton/.

 

–Implementation–
There are two versions of the instructions: a long and a short. The long version goes into more detail about how everything works while the short version tells you only how to use it.

SHORT:

  1. Use the “Digg” quicktag button or manually insert <!--digg--> into the post where you would like the button to be displayed. To ensure maximum compatibility with your theme you should NOT place the code in between the paragraph tags. Instead, you should do something like this: <!--digg--><p>blah blah blah</p>...and so on.
  2. Add a Custom Field with “digg” (without the quotes and no capitalization) as the Key. After you do this for the first article you will see the value in the drop-down list.
  3. Set the Value to be the URL of the Digg article.
  4. That’s it. To customize the layout see the Customization section below.

LONG:
If you have the quicktags enabled (a.k.a. you’re not using the WYSIWYG editor) then there will be a “Digg” button placed on the toolbar. Just press that button when you have your cursor where you want the Digg Button to appear in the post.

Digg Button Quick Tag

An alternate solution would be to manually enter in the code where you would like the button to appear. The necessary code is:
<!--digg-->
The plug-in will then replace that code with the Digg API code. The format of the code makes it easy to disable the plug-in at any time and it will not affect the layout of your posts.

You’re almost there. If you try to view your post right now it will show a “submit this story” button:

Digg Button Error

The reason a “submit this story” button appears is because there has been no Digg URL entered in. To enter a URL go towards the bottom of the post page to the “Custom Fields” section. In the “Key” field type in “digg” (without the quotes and no capitalization) and in the “Value” field just type in the URL. Now press the “Add Custom Field” button. It should look something like this:

Digg Button Add URL

That’s All! You should now have a “Digg It” button on your blog post. After the first time you have done this you will no longer have to manually type in “digg” because it will be located in that drop-down box:

Digg Button Drop Down Key

 

–Customization–
The Digg Button can be customized using CSS. On our site we try to be consistent with where we place the button and it is normally left-aligned like this:

Digg Button Example

The CSS class that you need to use is “.diggbutton” and to make it look like the example above you would use:
.diggbutton {
float:left;
padding:3px 5px 5px 5px;
}

 

–Overall–
Remember, this plug-in is not designed to automatically recognize when someone has submitted your story to Digg. There is already a plug-in for that and it didn’t work how I needed it to. Often times I also like to display an image at the top of my post and have the “Digg It” button located below the image and inline with the text. With this plug-in you can place the button wherever you would like!

If you are using the plug-in or have some suggestions feel free to let me know by posting a comment below!

Update:
Ajay has also done a great job of making a similar plug-in available for Reddit. Make sure you check that out as well.