Digg Button Generator - Tested in IE 7.0, Netscape 8.1.2, Opera 9.20, Firefox 2.0.0.3 and AOL Explorer 1.5

Looking for an easy way to add Digg buttons and links to your Web pages? The instructions given on the Digg Web site can be a bit tedious. Use this generator instead, to make it easier. You can place it on your site for others to use also.

"...... Digg is a popular social content site that allows its members to digg websites, news articles, videos and podcasts they find useful or enjoyable. In other words, members determine the content shown through out the Digg network. It works similar to 'vote for this site' programs where the more diggs your website gets the more chance of it being displayed on their main directory pages for millions of people to see.

One way a website owner can encourage diggs is to give their visitors a direct link to digg.com by placing a button on their pages like so:

Unfortunately the instructions explained by [ Digg ] on how to integrate the buttons into a webpage are a tad tedious to incorporate. We have also found people new to website design find the steps hard to follow, especially if they are unfamiliar with URL encoding.

Our Solution? We've come up with a Digg button generator. This online generator helps you to make the code you need to link your digg buttons.

Step 1: Choose a digg button from the images below. When you find one you like, right click on it and save to your hard drive. Then insert it into your webpage as normal......"
[ Tanya Puntti ]
[ Web Site ]
[ Digg Generator ]

The quote on the left is from the author and designer of the Digg Button Generator.

We have tested the code in IE 7.0, Firefox 2.0.0.3, Opera 9.20, Netscape 8.1.2 and AOL Explorer 1.5. This script worked well in all platforms with one (1) variation observed in Firefox 2.0.0.3, Opera 9.20 and Netscape 8.1.2.

Once you enter all your information and select " Click to create link ", the code will not wrap to the textarea form. It stretches out in a single line.
We have even tried to fix this by adding the attribute of wrap="virtual into the form but to no avail. It does not want to wrap to the form.
This does not hinder the operation or the generated code in any way, shape or form.

Depending on your knowledge of HTML and javascripts, this is a four (4) part copy and paste code that goes in both the <HEAD> and <BODY> sections (wherever you want it to appear) in your document as well as uploading a some images* into your directory. It also makes use of an external.js file you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

* There are twenty eight (28) images, fourteen in (14) in gif format (as shown below) and fourteen in (14) in png format (identical to the below) in the zip file that is listed on the code site as "Other". These images as seen below are not part of the generator but as a convenience for people to select which "Digg Button" they prefer when linking to the code and adding it to there website.

Digg It

[ Return Whence You Came ]

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="diggTool.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

Once you have completed either of the above steps for the <HEAD> section, all that is left is to paste the <BODY> section of code where you want the effect to appear.

Little Extra Not Included In The Script: The <BODY> section of code is rather large and take up lots of space in your document. If you would prefer to make this section of code into an external.js file and only have a snipplet of code in the <BODY> section (along with the external.js file already in the <HEAD> section) as opposed to the bloated overweight code, this is no problem. For the <BODY> section of code we have a [ Generator/Converter ] that takes the work out of converting all the code into an external file. All you need to do is copy and paste the <BODY> section of code into our converter and follow the steps. Once you follow all the simple steps, just upload the "Saved As" file into your directory and add the snipplet of code anywhere within the <BODY> section you want the effect to appear.
[ Generator/Converter ]

* Once you put the <BODY> section of code into the converter, you can not make any reconfigurations. That is why it is imperative you make your reconfigurations prior to adding the code into the converter. The only possible reconfigurations would be that of the cols and rows in the textarea forms.

Define Cols and Rows

rows="8" This denotes how high from top to bottom the textarea will be

cols="15" This denotes how wide from side to side the textarea will be

If you would like to see our example of making use of the external .js file in both the <HEAD> and <BODY> sections, grab the below link.
[ External .js Files <HEAD> and <BODY> Sections ]

Note Of Importance You may want to keep a copy of the original <BODY> section of code if at any time you may decide to change it. This way you will have the code to reconfigure then replace the external.js file with the updated one. If you would like to see the <BODY> section of code once it has been reconfigured in our Generator/Converter, grab the below link and you are there. Once you view this file, you will understand why you may want to keep a copy of the original <BODY> section of code.
[ Reconfigured <BODY> Section Of Code ]

For your Information: We named the <BODY> section external.js file diggitGeneratorBody.js. You can name it anything you want. We did it so we would know what it is at all times.

Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect is on, be sure of one thing within either the linking URL or the URL this effect is on. Be sure you "Do Not" have the backslash-forward slash / (which ever you call it) at the end of the linking URL. If you do, the effect "Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/diggitgenerator1.html
Wrong Way: 'https://www.angelfire.com/ny5/consigliere/diggitgenerator1.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

Once you generate the code for the "Digg Button", you must attach it to one of the [ above graphics ] and make it into a clickable link. What the generator does is to generate the code with what you input, not the graphic or the link. See below where and howto insert in into a clickable image link.

Generated Example Code

http://digg.com/submit?phase=2&url=http%3A%2F%2Fwww.angelfire.com%2Fny5%2Fconsigliere%2Fdiggitgenerator.html&title=Digg%20Button%20Generator%20-%20And%20Howto&bodytext=Page%20has%20Digg%20Button%20Generator%20to%20take%20the%20work%20out%20of%20attempting%20to%20figure%20out%20howto%20incorporate%20the%20button%20into%20your%20site.%20It%20also%20has%20the%20code%20and%20the%20howto%20to%20add%20the%20generator%20itself%20into%20your%20site%20for%20your%20visitors%20to%20be%20able%20to%20generate%20the%20code%20to%20add%20a%20Digg%20button%20into%20their%20site&topic=design

Howto Make Into Clickable Image Link

The above is self-explanitory except possibly the align="?". This can be either top, middle or bottom depending on how you want the image to align with anything else on the same line.

This has an alignment of bottom

This has an alignment of top

This has an alignment of middle

You can remove the alignment attribute if it is not needed. This is completely up to you.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]