Digg Button Generator

Tanya Puntti Apr 27, 2007

General

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. The image file contains Digg buttons to put on your Web site or blog, which can also be customized for your site, using the included Photoshop file.

Digg Your Web Page

Enter the full URL of the Web page you want to Digg
e.g., http://www.yourSite.com/yourStory.htm

Enter a title for the page

Enter a description for the page

Choose a topic under which you want the page listed

Link your Digg button using the URL below

Notes

Created by: Tanya Puntti
Web Site: http://www.hypergurl.com

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: diggTool.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Tanya Puntti | http://www.hypergurl.com */
<!--
// ==========================================================================
// JavaScript Tool for making Digg buttons
// Copyright (C) 2007 Hypergurl
//
// Website: http://www.hypergurl.com/digg-generator.html
// Webmasters can download the script to use on their own sites
// as long as all comments and links back to http://www.hypergurl.com remain.
// ==========================================================================

// Set variables for reserved and unreserved characters allowed in text boxes

var unreserved = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_.~";
var reserved = "!*'();:@&=+$,/?%#[]";
var allowed = unreserved + reserved;
var hexchars = "0123456789ABCDEFabcdef";

// --------------------------------- Encoding -------------------------------

// This function returns a percent sign followed by two hexadecimal digits.
// Input is a decimal value not greater than 255.
function gethex(decimal) 
{
  return "%" + hexchars.charAt(decimal >> 4) + hexchars.charAt(decimal & 0xF);
}

// Encode function

function encode() 
{
  // Clear output field:
  document.converter.urlencoded.value = "";

  // Some variables for website address
  var url = document.converter.url.value;
  var urlencoded = "";

  // Some variables for title
  var title = document.converter.title.value;
  var titleencoded = "";

  // Some variables for description
  var description = document.converter.description.value;
  var descriptionencoded = "";

  // Some variables for Topic
  var topic = document.converter.topic.value;

    // non-ASCII characters will not be encoded:
    var notascii = "";

    // encode website address
	for (var i = 0; i < url.length; i++ ) {
      var ch = url.charAt(i);
      // Check if character is an unreserved character:
      if (unreserved.indexOf(ch) != -1) {
        urlencoded = urlencoded + ch;
      } else {
        // If position in the Unicode table is smaller than 128, then we have
        // an ASCII character:
        var charcode = url.charCodeAt(i);
        if (charcode < 128) {
          urlencoded = urlencoded + gethex(charcode);
        } else {
          urlencoded = urlencoded + ch;
          notascii = notascii + ch + " ";
        }
      
    }

	}

// encode title
	for (var j = 0; j < title.length; j++ ) 
	{
      var ch = title.charAt(j);
      // Check if character is an unreserved character:
      if (unreserved.indexOf(ch) != -1)
	  {
        titleencoded = titleencoded + ch;
      } 
	  else 
	  {
        // If position in the Unicode table is smaller than 128, then we have
        // an ASCII character:
        var charcode = title.charCodeAt(j);
        if (charcode < 128)
		{
          titleencoded = titleencoded + gethex(charcode);
        } 
		else 
		{
          titleencoded = titleencoded + ch;
          notascii = notascii + ch + " ";
		}
     }
	 }

	 // encode description
	for (var x = 0; x < description.length; x++ ) 
	{
      var ch = description.charAt(x);
      // Check if character is an unreserved character:
      if (unreserved.indexOf(ch) != -1)
	  {
        descriptionencoded = descriptionencoded + ch;
      } 
	  else 
	  {
        // If position in the Unicode table is smaller than 128, then we have
        // an ASCII character:
        var charcode = description.charCodeAt(x);
        if (charcode < 128)
		{
          descriptionencoded = descriptionencoded + gethex(charcode);
        } 
		else 
		{
          descriptionencoded = descriptionencoded + ch;
          notascii = notascii + ch + " ";
		}
     }
	 }

  // Write result to lower form box
    document.converter.urlencoded.value = "http://digg.com/submit?phase=2&url=" + urlencoded + "&title=" + titleencoded + "&bodytext=" + descriptionencoded + "&topic=" + topic;

    // Display warning message if necessary
    if (notascii != "") alert("Warning: Non-ASCII characters in text!\n\nThus, these characters have not been encoded:\n" + notascii);
}

Head

Paste this code into the HEAD section of your HTML document.


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

Body

Paste this code into the BODY section of your HTML document


<fieldset style="width: 500px;">
  <legend><strong>Digg Your Web Page</strong></legend>
<form name="converter" onSubmit="return false;" action="">
<br>
<strong>Enter the full URL of the Web page you want to Digg</strong><br>
<small><em>e.g., http://www.yourSite.com/yourStory.htm</em></small><br>
<input type="text" size="50" name="url">
<br><br>
<strong>Enter a title for the page</strong><br>
<input type="text" size="50" name="title">
<br><br>
<strong>Enter a description for the page</strong><br>
<textarea cols="50" rows="4" name="description"></textarea>
<br><br>
<strong>Choose a topic under which you want the page listed</strong>
<br>
  <select name="topic">
    <option label="apple" value="apple" selected>Apple</option>
    <option label="baseball" value="baseball">Baseball</option>
    <option label="basketball" value="basketball">Basketball</option>
    <option label="business_finance" value="business_finance">Business Finance</option>
    <option label="celebrity" value="celebrity">Celebrity</option>
    <option label="design" value="design">Design</option>
    <option label="environment" value="environment">Environment</option>
    <option label="extreme_sports" value="extreme_sports">Extreme Sports</option>
    <option label="football" value="football">Football</option>
    <option label="gadgets" value="gadgets">Gadgets</option>
    <option label="gaming_news" value="gaming_news">Gaming News</option>
    <option label="general_sciences" value="general_sciences">General Sciences</option>
    <option label="golf" value="golf">Golf</option>
    <option label="hardware" value="hardware">Hardware</option>
    <option label="health" value="health">Health</option>
    <option label="hockey" value="hockey">Hockey</option>
    <option label="linux_unix" value="linux_unix">Linux / Unix</option>
    <option label="mods" value="mods">Mods</option>
    <option label="motorsport" value="motorsport">Motorsport</option>
    <option label="movies" value="movies">Movies</option>
    <option label="music" value="music">Music</option>
    <option label="offbeat_news" value="offbeat_news">Offbeat News</option>
    <option label="other_sports" value="other_sports">Other Sports</option>
    <option label="playable_web_games" value="playable_web_games">Playable Web Games</option>
    <option label="podcasts_alternative_health" value="podcasts_alternative_health">Podcasts: Alternative Health</option>
    <option label="podcasts_amateur" value="podcasts_amateur">Podcasts: Amateur</option>
    <option label="podcasts_automotive" value="podcasts_automotive">Podcasts: Automotive</option>
    <option label="podcasts_aviation" value="podcasts_aviation">Podcasts: Aviation</option>
    <option label="podcasts_buddhism" value="podcasts_buddhism">Podcasts: Buddhism</option>
    <option label="podcasts_business_news" value="podcasts_business_news">Podcasts: Business News</option>
    <option label="podcasts_careers" value="podcasts_careers">Podcasts: Careers</option>
    <option label="podcasts_christianity" value="podcasts_christianity">Podcasts: Christianity</option>
    <option label="podcasts_college_high_school" value="podcasts_college_high_school">Podcasts: College High School</option>
    <option label="podcasts_design" value="podcasts_design">Podcasts: Design</option>
    <option label="podcasts_education_technology" value="podcasts_education_technology">Podcasts: Education Technology</option>
    <option label="podcasts_fashion_beauty" value="podcasts_fashion_beauty">Podcasts: Fashion Beauty</option>
    <option label="podcasts_fitness_nutrition" value="podcasts_fitness_nutrition">Podcasts: Fitness Nutrition</option>
    <option label="podcasts_food" value="podcasts_food">Podcasts: Food</option>
    <option label="podcasts_gadgets" value="podcasts_gadgets">Podcasts: Gadgets</option>
    <option label="podcasts_games_hobbies" value="podcasts_games_hobbies">Podcasts: Games Hobbies</option>
    <option label="podcasts_higher_education" value="podcasts_higher_education">Podcasts: Higher Education</option>
    <option label="podcasts_hinduism" value="podcasts_hinduism">Podcasts: Hinduism</option>
    <option label="podcasts_history" value="podcasts_history">Podcasts: History</option>
    <option label="podcasts_investing" value="podcasts_investing">Podcasts: Investing</option>
    <option label="podcasts_islam" value="podcasts_islam">Podcasts: Islam</option>
    <option label="podcasts_judaism" value="podcasts_judaism">Podcasts: Judaism</option>
    <option label="podcasts_k-12" value="podcasts_k-12">Podcasts: K-12</option>
    <option label="podcasts_language_courses" value="podcasts_language_courses">Podcasts: Language Courses</option>
    <option label="podcasts_literature" value="podcasts_literature">Podcasts: Literature</option>
    <option label="podcasts_local" value="podcasts_local">Podcasts: Local</option>
    <option label="podcasts_management_marketing" value="podcasts_management_marketing">Podcasts: Management Marketing</option>
    <option label="podcasts_medicine" value="podcasts_medicine">Podcasts: Medicine</option>
    <option label="podcasts_national" value="podcasts_national">Podcasts: National</option>
    <option label="podcasts_natural_sciences" value="podcasts_natural_sciences">Podcasts: Natural Sciences</option>
    <option label="podcasts_non-profit" value="podcasts_non-profit">Podcasts: Non-Profit</option>
    <option label="podcasts_other" value="podcasts_other">Podcasts: Other</option>
    <option label="podcasts_other_games" value="podcasts_other_games">Podcasts: Other Games</option>
    <option label="podcasts_outdoor" value="podcasts_outdoor">Podcasts: Outdoor</option>
    <option label="podcasts_performing_arts" value="podcasts_performing_arts">Podcasts: Performing Arts</option>
    <option label="podcasts_personal_journals" value="podcasts_personal_journals">Podcasts: Personal Journals</option>
    <option label="podcasts_philosophy" value="podcasts_philosophy">Podcasts: Philosophy</option>
    <option label="podcasts_places_travel" value="podcasts_places_travel">Podcasts: Places Travel</option>
    <option label="podcasts_podcasting" value="podcasts_podcasting">Podcasts: Podcasting</option>
    <option label="podcasts_professional" value="podcasts_professional">Podcasts: Professional</option>
    <option label="podcasts_regional" value="podcasts_regional">Podcasts: Regional</option>
    <option label="podcasts_self-help" value="podcasts_self-help">Podcasts: Self-Help</option>
    <option label="podcasts_sexuality" value="podcasts_sexuality">Podcasts: Sexuality</option>
    <option label="podcasts_shopping" value="podcasts_shopping">Podcasts: Shopping</option>
    <option label="podcasts_social_sciences" value="podcasts_social_sciences">Podcasts: Social Sciences</option>
    <option label="podcasts_software_how-to" value="podcasts_software_how-to">Podcasts: Software How-To</option>
    <option label="podcasts_spirituality" value="podcasts_spirituality">Podcasts: Spirituality</option>
    <option label="podcasts_tech_news" value="podcasts_tech_news">Podcasts: Tech News</option>
    <option label="podcasts_training" value="podcasts_training">Podcasts: Training</option>
    <option label="podcasts_video_games" value="podcasts_video_games">Podcasts: Video Games</option>
    <option label="podcasts_visual_arts" value="podcasts_visual_arts">Podcasts: Visual Arts</option>
    <option label="political_opinion" value="political_opinion">Political Opinion</option>
    <option label="politics" value="politics">Politics</option>
    <option label="programming" value="programming">Programming</option>
    <option label="security" value="security">Security</option>
    <option label="soccer" value="soccer">Soccer</option>
    <option label="software" value="software">Software</option>
    <option label="space" value="space">Space</option>
    <option label="tech_deals" value="tech_deals">Tech Deals</option>
    <option label="tech_news" value="tech_news">Tech News</option>
    <option label="television" value="television">Television</option>
    <option label="tennis" value="tennis">Tennis</option>
    <option label="videos_animation" value="videos_animation">Videos Animation</option>
    <option label="videos_comedy" value="videos_comedy">Videos Comedy</option>
    <option label="videos_educational" value="videos_educational">Videos Educational</option>
    <option label="videos_gaming" value="videos_gaming">Videos Gaming</option>
    <option label="videos_music" value="videos_music">Videos Music</option>
    <option label="videos_people" value="videos_people">Videos People</option>
    <option label="videos_sports" value="videos_sports">Videos Sports</option>
    <option label="world_news" value="world_news">World News</option>
  </select>
<br><br>
<input value="Click to create link" onClick="encode()" type="submit" name="submit">
<br><br>
<strong>Link your Digg button using the URL below</strong>
<br>
<textarea cols="60" name="urlencoded" rows="2"></textarea>
<br><br>
<input type="reset" value="Reset form">
</form>
</fieldset>

Other

Download the images using the URL below:

Download the images here

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details