Whether you’re working with adding the buttons to have your articles submitted to Digg.com (dugg) using basic XHTML and CSS or using dynamic Wordpress PHP code, this article will show you how to do it while keeping your XHTML valid under the strict doctype. And we’re going to do it by example, so you know what you’re adding to your webpage before you add it.
The simple and very default icon-method.
The following, minus the Wordpress integration contained beneath, is taken directly from http://digg.com/tools/buttons/
<img src=”http://digg.com/img/badges/16×16-digg-guy.png” width=”16″ height=”16″ alt=”Digg!” />
</a>
<img src=”http://digg.com/img/badges/16×16-digg-guy.png” width=”100″ height=”20″ alt=”Digg!” />
</a>
<img src=”http://digg.com/img/badges/16×16-digg-guy.png” width=”32″ height=”32″ alt=”Digg!” />
</a>
The simple and very default icon-method with Wordpress in mind.
If you would like to dynamically use these icons to bookmark your index (home) page, use the following code to link the image. The rest of the code above stays the same.
1 | <a href="<?php bloginfo('home'); ?>"> |
Or if you would like to digg the current page you’re viewing..
1 | <a href="<?php the_permalink(); ?>"> |
Digg this with submit capabilities.
1 | <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> |
Digg this for articles you’re currently reading.
1 2 3 4 | <script type="text/javascript"> digg_url = 'WEBSITE_URL'; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> |
Just replace WEBSITE_URL with the URL of the page.
And if you’d like to use this for Wordpress to digg the current article or page being viewed..
1 2 3 4 | <script type="text/javascript"> digg_url = '<?php the_permalink(); ?>'; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> |
Editing The Digg Button..
1 2 3 4 5 6 7 | <script type="text/javascript"> digg_url = 'WEBSITE_URL'; digg_bgcolor = '#e4eba7'; digg_skin = 'compact'; digg_window = 'new'; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> |
Taken from the official, but lacking, tutorial at Digg.com..
.BEGIN
The digg_bgcolor option can take any valid CSS color and is used only to change the background color around the outer edge of the button. If omitted, the default color is white.
The digg_window option can be set to ‘new’ if you wish any clicks to open in a new window, as opposed to the default which is to open links in the same browser window.
The digg_skin option controls the look at the button. If omitted the button defaults to a standard digg button (much like the one you see on Digg itself). If specified as ‘compact’, then a smaller horizontal visual design is used that will fit better into a list of links.
If specified as ‘icon’, then only a 16×16 digger icon is returned. This ‘icon’ skin obviously doesn’t have room for a digg button, but will still automatically choose whether to take the user to a submit page, or to the permalink of the story. It also will provide the current digg count of the story when the cursor hovers over it.
.END
And if we remove the digg_skin line we have this as our default…
Specifying defaults to use when submitting..
Taken from the official, but lacking, tutorial at Digg.com..
So what if you’ve just created new content and you’d like to suggest the exact story title, description and category for your content when that first person submits it to Digg? No problem, use the following additional Javascript variables to specify these values (note that the user who submits your content will be able to change these):
1 2 3 4 5 6 7 8 | <script type="text/javascript"> digg_url = 'WEBSITE_URL'; digg_title = 'TITLE'; digg_bodytext = 'BODY'; digg_media = 'MEDIA'; digg_topic = 'TOPIC'; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> |
Simply replace those variable contents with the appropriate text for your content, and voila! The digg_media variable should be one of ‘video’, ‘image’, or ‘news’ (The default is ‘news’). For the digg_topic variable, it must be one of the following topics:
And we can edit this code to really incorporate it into Wordpress nicely..
1 2 3 4 5 6 | <script type="text/javascript"> digg_url = '<?php the_permalink(); ?>'; digg_title = '<?php the_title(); ?>'; digg_bodytext = '<?php echo get_the_excerpt(); ?>'; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> |
Providing a link to your article that allows users to submit to Digg
Let’s examine the URL:
1 | http://digg.com/submit?url=example.com&title=TITLE&bodytext=DESCRIPTION&media=MEDIA&topic=TOPIC |
This is the default way that digg.com shows its users how to format the URL. The problem with this is that it will invalidate your XHTML. What you’ll want to do is change each ampersand to..
1 | & |
At this point the above URL should be pretty self explanatory. If you’d like to incorporate the Wordpress hackups mentioned earlier, you could write your URL as something like this (which is valid XHTML)..
1 | http://digg.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&bodytext=<?php echo get_the_excerpt(); ?>&media=MEDIA&topic=TOPIC |
I hope this tutorial helps you in your web journeys! And by the way, most all social bookmarking sites give invalid XHTML samples in their tutorials showing users how to place a bookmarking link on their website. So, with that said, you can’t point your finger at one. Even Google’s prized Feedburner gives a massive block of just poor HTML / XHTML for a lot of its flare functions.
Nothing to learn from Sweden. ,