Getting the right code to add a Digg Badge that automatically populates the submission information onto my WordPress blog was a challenge, but I managed it! Here’s how I accomplished the task.
It should have been simple thing, I wanted to add a Digg button to my blog to make it easier for my visitors to Digg my posts. I was alarmed to find that none of the code snippets that I could find, including those on the Digg Website seemed to work. After hunting around for awhile I found that the single quotes in the sample code available from Digg was the first piece that need to be corrected. Eventually, through trial and error, I was able to find WordPress template tags that gave me the results that I was looking for.
The code for the Digg badge can be copied from here directly into your WordPress theme templates. Usually in the index.php, single.php, and archive.php. For my own theme I chose to put the code in right after the call for “the_title” You should also note that this code is written specifically to be placed within “the_loop” The code for placing a Digg badge in a sidebar, header or footer, would be different.
The basic code:
[sourcecode language='js']
[/sourcecode] What the code does:
- This code uses the post’s permalink as the url that is being submitted to Digg.
- The post’s title and the first 40 words of the post will be pre-filled on the Digg submission screen
- Optionally, the Digg topic, badge background color, badge type(skin), link target can be set (see below)
On the my front page I wanted a Compact Digg badge. I didn’t like having so many large badges on the front page but I also didn’t want to completely eliminate the badge. All of the preset information can be modified prior to submission by the individual doing the first Digg. I set the code within it’s own div with a class of “diggbadge” so that I can modify the way the badge displays using CSS. The code for a compact badge with the Digg topic of “software” preselected with a link that opens a new window: [sourcecode language='js']
[/sourcecode] The code for a full size badge with the Digg topic of “software” preselected with a link that opens a new window:
[sourcecode language='js']
[/sourcecode]
There are other options that can be added in the code as well:
[sourcecode language='html']
digg_bgcolor = “#ff9900″;
digg_skin = “compact”;
digg_window = “new”;
digg_topic = “software”;
[/sourcecode]
digg_bgcolor sets the background color of the Digg badge. This value will change the background color around the outer edge of the button. If omitted, the default color is white. Any valid CSS color can be entered here.
digg_skin defaults to the full size badge, by setting the value to compact you can have a smaller badge displayed on your site. I like this for pages with multiple posts such as the front page or an archive page. the value of “icon” can also be set which will display a 16X16 icon instead of a badge.
digg_window sets the target of the link. A value of “new” will open a new window when the badge is clicked.
digg_topic sets the topic that the post will be filed under on the Digg site. If you have a consistent topic that your posts fit within this is an additional help for those that might want to Digg your site. The value can be changed from the submission screen by the person Digging your post. The value set here must be one of the topics in the following list:
- 2008_us_elections
- 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
- xbox
I hope that this demonstration will be useful! Don’t forget to use the Digg badge up at the top of the post! I’ve done all I can to make it easy for you! For my loyal readers using a feed reader, come on over to the site to see the badges in action. Report any problems with the code snippets back to me!
Follow Daisy!