Integrate: The Digg Button
The Digg button, also known as the “Digg This” button, is for website and blog publishers that want to encourage their audience to submit content to Digg or Digg their content. Join thousands of sites that have already added the Digg button and have seen their content exposed to the Digg community!
While we support both a Smart Digg button and a static Digg button, we recommend using the Smart Digg button, as it displays a real-time Digg count and is more customizable.
The Smart Digg button is available in 4 different predefined sizes: Wide, Medium, Compact, and Icon
 |
 |
 |
 |
| Wide | Medium | Compact | Icon |
The implementation of all Smart Digg buttons requires that the JavaScript file located at http://widgets.digg.com/buttons.js is included on your page and that <a> tags are added for each button you would like to appear. To have multiple buttons on a page, just add an additional <a> tag where you would like each button to appear. You do not need to include the JavaScript file more than once per page. The script will find the <a> tags and replace them with the appropriate markup for the button.
To include the JavaScript file we recommend that you use Javascript to create the script element, set its src attribute to http://widgets.digg.com/buttons.js, and insert it into the document. Including the file in this manner will cause the file to load asynchronously and not block other downloads.
<script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script> <!-- Wide Button --> <a class="DiggThisButton DiggWide"></a> <!-- Medium Button --> <a class="DiggThisButton DiggMedium"></a> <!-- Compact Button --> <a class="DiggThisButton DiggCompact"></a> <!-- Icon Button --> <a class="DiggThisButton DiggIcon"></a>
This code can be placed in either the <head> or the <body>. The earlier it appears in the document the sooner the download can begin and your buttons can be initialized. And that should be all you need!
A non-javascript version is located here
Smart Digg Button Options
The Smart Digg button also offers options to specify a URL other than that of the current page, suggest the story metadata settings for unsubmitted content, and turn off the default styling of the buttons so that you may specify every detail of their appearance with CSS on your page.
Url
This option sets the url of the page that will be dugg or submitted when users click the button.
The url option is set by adding a query string parameter to the url http://digg.com/submit in the href attribute of the <a> tag.
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=http%3A//mashable.com/2010/03/18/digg-social-news"></a>
In this example, the url parameter indicates that the button's display and action should be associated with the page at http://mashable.com/2010/03/18/digg-social-news. The button will show the number of diggs received by that page and when the button is clicked it is that page that will be dugg (or submitted to digg if it has not been already).
Note: The value of the url parameter must be encoded. Thus
http://mashable.com/2010/03/18/digg-social-news
becomes
http%3A//mashable.com/2010/03/18/digg-social-news
in the example above.
Title
This option sets the story title for unsubmitted stories. A maximum 75 characters is allowed for the title. If you add a title, you must also add a url as they are dependent on each other.
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=http%3A//mashable.com/2010/03/18/digg-social-news&title=Digg%3A%20The%20Future%20of%20Social%20News%3F"></a>
In this example, the title parameter indicates that the title "Digg: The Future of Social News?" should be used when a user clicks the button to submit the story to Digg.
Note: As with the url parameter, the value of the title parameter must be encoded. Thus
Digg: The Future of Social News?
becomes
Digg%3A%20The%20Future%20of%20Social%20News%3F
in the example above.
Media Type and Topic
Use this option to set the media type and topic for unsubmitted stories. Media type and topic are set using the rev attribute of the <a> tag.
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=http%3A//mashable.com/2010/03/18/digg-social-news&title=Digg%3A%20The%20Future%20of%20Social%20News%3F" rev="news, tech_news"></a>
In this example, the rev attribute indicates that the story is of the News media type and the topic is Technology News
It is not possible to specify a media type without a topic or a topic without a media type.
There are three valid values for media type: news, image, and video.
The following topics may be used:
- business
- enterntainment
- gaming
- lifestyle
- offbeat
- politics
- science
- sports
- technology
- world_news
Description
Descriptions may be added by inserting a <span> tag into the <a> tag and placing the description within it. A maximum of 350 characters is allowed for descriptions.
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=http%3A//mashable.com/2010/03/18/digg-social-news&title=Digg%3A%20The%20Future%20of%20Social%20News%3F"> <span style="display:none"> Is Digg defining a new direction for the curation economy? And could the new site help us cope with information overload? </span> </a>
Custom Design
By setting this option you can indicate whether default Digg styles should be used for the button.
The option to turn off default styling is set by adding a query string parameter to the url http://digg.com/submit in the href attribute of the <a> tag.
In this example, the Digg style sheet for the button will not be used. The appearance of the button can be determined entirely by custom CSS placed on the page. Examples of the markup that would be produced are presented below.
<-- if the story has diggs --> <span class="db-clean"> <span> <span class="db-container"> <span class="db-body db-medium"> <span class="db-count">500</span> <span class="db-copy">diggs</span> <a class="db-anchor">digg</a> </span> </span> </span> </span> <-- if the user has dugg the story --> <span class="db-clean"> <span> <span class="db-container db-dugg"> <span class="db-body db-medium"> <span class="db-count">501</span> <span class="db-copy">diggs</span> <a class="db-anchor">digg</a> </span> </span> </span> </span> <-- if the story has not been submitted --> <span class="db-clean"> <span> <span class="db-container db-submit"> <span class="db-body db-medium"> <span class="db-count">0</span> <span class="db-copy">diggs</span> <a class="db-anchor">digg</a> </span> </span> </span> </span>
Disabling Related Stories
This option allows you to specify whether links to related stories should be present in the pop up window that may appear when users click the button. Related stories will be present by default.
The related stories option is set by adding a query string parameter to the url http://digg.com/submit in the href attribute of the <a> tag.
In this example, no related stories will appear in the pop up window.