Creating A Custom Digg Button For You Website – The Easy Way!

Well, yesterday, I decided to look for a better alternative to those ugly, common digg buttons that nearly every person use on their website.  So I googled the terms “custom digg button” and came up with this post.  I got a nifty little script, which allows me to create a digg it button like the one below, which you can find under this page title too.

Of course, the default output is not like this.  The above has been styled according to my website.  The default output of the script is:

  

 

Clicking on the digg link sends you on the digg page to digg the page.

 

Implementation

Here is a little tutorial on how to include the script on your page.  You start by placing this code in the page header, before the </head> tag:

 

<script src="diggbutton.js" type="text/javascript"></script>

 

Then you need to create the button by placing the following code where you want the button to appear.

 

<script type="text/javascript"> Digg.setAPIKey("http://codefusionlab.blogspot.com"); var postURL = "http://codefusionlab.blogspot.com/2009/06/4-incredibly-useful-mobile-apps-for.html"; </script>

<span id="test1"></span> <script>Digg.createButton(document.getElementById("test1"), {url : postURL});</script>

 

 Here are some parameters that you will need to configure:

 

Digg.setAPIKey

You can put you website address as your Digg API key, just delete http://codefusionlab.blogspot.com and replace it with you website address of your website.

 

var postURL

This is the actual page address.  If you are implementing this on a static page, delete the http://codefusionlab.blogspot.com/2009/06/4-incredibly-useful-mobile-apps-for.html and replace it with your webpage link.

If you are using Wordpress, the line of code becomes like this:

var postURL = "<?php the_permalink() ?>";

 

If you are on Blogger, like me, then you can use this line of code instead:

 

var postURL = "<data:post.url/>";

 

Div To Output To and Additional Configuration

The final line of code can accept further parameters.

 

document.getElementById("test1")

 

The test1 string can be change to the id of any other element which will accept the output.

 

{url : postURL}

 

Between those brackets, these option can be added, separated by commas:

 

title: The title of the page, when not yet submitted.

description: The description text when the page is not yet submitted

topic: topic to submit page under

media: media to submit page under

newWindow: specifies if link opens in same or new window. This can be set to true or false.

autoUpdate: If true, the Digg count will update automatically.

UpdateInterval: Time interval between autoupdate in millisecond. Default is 30000, minimum is 10000.

onlyifdugg: Display the button only if the page has already been dugg, i.e. does not display Submit link.

submittext: Alternative to the Submit text which appears when the page has not yet been submitted to Digg.

 

An example of the code with additional options:

 

{url : postURL,newWindow : true,autoUpdate : 30000}

 

You can download the script here: Diggbutton.js (8 KB).  You can get more information on the script here.