Integrating “Digg This” Button with Textpattern

Textpattern allows the Digg submission form to be automatically filled out using the integrated “Digg This” button and some Textpatterm magic. This tutorial details the code used and a way to still display the button even with JavaScript disabled.

The “Digg This” button allows site visitors to easily submit posts to digg, the popular social news networking website, or vote for articles by “digging” them if they have already been submitted by someone else.

Submitting your posts to Digg is a good way to gain some exposure for you site and generate traffic (this can also be a bad thing, see the digg effect). Once your article has been submitted people “digg” (vote for) your article if they like it, the more people that “digg” your story the more exposure it will receive.

The easiest way to get your articles on Digg is to encourage your visitors to submit their favourite posts directly to Digg. Social bookmarking icons link directly to the Digg URL submission page. While this works, the integrated “Digg This” button takes it one step further by pre-populating the submission form with a title, description, and topic. The button is also capable of display the real-time digg count for content already on Digg.

Textpattern, the CMS this site uses can pre-populate the Digg submission data automatically for its posts. To add a “Digg This” button similar to the one you see to the left of this page that pre-populates submission data and allows submission even with javascript disabled, implement the following on your TXP install.

1. Create a Custom Field in the Advanced area of the Admin tab through TXP admin interface. This field will be used to define the digg topic and should be named accordingly. At the end of this article you will find the list of topics Digg restricts you to.

2. Upload the static image of the Digg button available here to a location on your server or directly into TXP under the Image tab. This will be used for instances when JavaScript is disabled on the clients browser.

3. Under the Presentation tab chose Forms to create a new form that will contain the code below. Chose your own name for your form and set the type to misc.

<noscript>
  <a href=“http://digg.com/submit?phase=2&url=<txp:permlink />&title=<txp:title />”>
    <img src=”../images/digg-noscript.gif” alt=“Digg This”>
  </a>
</noscript>
<script type=“text/javascript”>
  digg_url = ‘<txp:permlink />’;
  digg_title = ‘<txp:title />’;
  digg_bodytext = ‘<txp:excerpt />’
  digg_topic = ‘<txp:custom_field name=“digg topic” />’;
</script>
<script src=“http://digg.com/tools/diggthis.js” type=“text/javascript”></script>


Example code specifies default details for submission to Digg and an alternative to the JavaScript button if required.

4. Insert a tag that calls your custom form in your page/form wherever you want to add your Digg button.

5. Your done. Start Digging your posts.

Note: Digg topics are currently limited to: apple, arts_culture, autos, baseball, basketball, business_finance, celebrity, comedy, comics_animation, design, educational, environment, extreme_sports, food_drink, football, gadgets, gaming_news, general_sciences, golf, hardware, health, hockey, linux_unix, microsoft, mods, motorsport, movies, music, nintendo, odd_stuff, other_sports, pc_games, people, pets_animals, playable_web_games, playstation, political_opinion, politics, programming, security, soccer, software, space, tech_news, television, tennis, travel_places, world_news, and xbox.

This article was posted on 6 February 2009 in Code, Textpattern

What you have had to say about all this...

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.