On DZone’s Tools, Buttons and Widgets page, there are 2 types of voting buttons you may use on your web site. I chose to use the “Style 1 (tall)” button for my web site.

This tutorial differs from my previous posts on How to Add reddit Buttons to WordPress and How to Add Digg Buttons to WordPress because I no longer display my voting buttons at the right or left of each post. Now, I prefer to display my voting buttons at the bottom of each post on the theme file single.php.

Here’s How the DZone Button Will Look on Your Web Site…

If your blog post has been submitted to DZone, you should see a DZone button with a green arrow pointing upwards and a red arrow pointing downwards, which allows readers to either vote your post up or down on DZone.

If you have not submitted your blog post to DZone, you should see a DZone button with a “submit” text on it.

DZone’s Integration Code

<script type="text/javascript">var dzone_url = '[url]';</script>
<script type="text/javascript">var dzone_title = '[title]';</script>
<script type="text/javascript">var dzone_blurb = '[description]';</script>
<script type="text/javascript">var dzone_style = '1';</script>
<script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

According to DZone:

The options of dzone_url, dzone_title, and dzone_blurb are optional. If you leave out the url and title, the widget will pick them up from the page the widget is currently on.

If you set a dzone_style or have not set a dzone_url and have multiple buttons on a single page, you will need to set them with every use of the button.

What that means is it is best to include the dzone_url, dzone_style and dzone_title variables but you may exclude the dzone_blurb variables.

WordPress Default Theme’s single.php Template

<p class="postmetadata alt">
....................
</p>

Although you may add this code to your index.php and archive.php templates, I would advice against it because it increases your page load times.

What We Need to Do

We need to replace DZone integration code’s [url] and [title] with WordPress’ and respectively somewhere within the WordPress Loop.

DZone Integration with WordPress with HTML and CSS

<p class="postmetadata alt">
....................
</p>
<div class="social_news">
<script type="text/javascript">var dzone_url = '<?php the_permalink() ?>';</script>
<script type="text/javascript">var dzone_title = '<?php the_title(); ?>';</script>
<script type="text/javascript">var dzone_style = '1';</script>
<script type="text/javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>
</div>

.social_news
{
	margin: 0px 5px 0px 0px;
	padding: 0px;
	float: left;
}

You may display multiple buttons in a single row with the social_news class. That is how I displayed my voting buttons below. It has a 5 pixel margin on the right to leave a tiny gap in between buttons.

For now, let’s take a look at what reddit has to offer…

reddit has a larger list of buttons than Digg. For this post, I shall use the button that looks most like the default buttons you see on reddit.com. Again, I selected this button for usability reasons because I want people who are familiar with reddit to feel comforable with the reddit buttons on my web site.

Here’s How the reddit Button Will Look on Your Web Site…

If your blog post has been submitted to reddit, you should see a reddit number and a “reddit” text in your reddit button.

If you or someone else has not submitted your blog post to reddit, you won’t see any redditnumber but you will see the option to submit your blog post to reddit.

reddit’s Integration Code

<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>

WordPress Default Theme’s index.php Template

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endwhile; ?>

What We Need to Do

We need to replace reddit integration code’s [URL] and [TITLE] with WordPress’ <?php the_permalink() ?> and <?php the_title(); ?> respectively somewhere within the WordPress Loop.

Basic Example of reddit Integration with WordPress

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endwhile; ?>

This alone wouldn’t look good on your web site. We need some CSS style to spice things up!

reddit Integration with WordPress with HTML and CSS

<div class="social_news">
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>
</div>

.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}

.social_news
{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
}

Wrap the reddit code with a DIV class. You may choose to align the DIV class left or right but I think it looks better on the right.

Here’s the full source code:

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="social_news">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
		</div>
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endwhile; ?>

You may apply this modification to your WordPress theme’s single.php and page.php or any other template that has the WordPress Loop.

A WordPress Plugin Alternative: Digg & Reddit Me Plugin

If you don’t want to edit your WordPress theme files, try using the Digg & Reddit Me plugin. I personally think it would be too much of a hassle to manually insert the code into each post if I were to use this plugin but it really depends on your preferences and needs for your WordPress blog.

• “Digg This” with Submit Capability
• Simple “Digg This” with Digg Count (original version)
• Custom Submission-Only Button

I think the 1st option makes the most sense. I want a Digg voting button on all my WordPress posts. If I only want a Digg submission button, I can simply use ShareThis, which takes up less space.

Here’s How the “Digg This” with Submit Capability Digg Button Will Look on Your Web Site…

If your blog post has been submitted to Digg, you should see a Digg number and a “digg it” text in your Digg button.

If you or someone else has not submitted your blog post to Digg, you won’t see any Digg number but you will see the option to submit your blog post to Digg.

I would refrain from using another style of Digg buttons because this style is consistent with the Digg buttons on Digg.com. I would not want to confuse my readers by using an Digg button style that they are not used to.

Digg’s Integration Code

<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

WordPress Default Theme’s index.php Template

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endwhile; ?>

What We Need to Do

We need to replace Digg integration code’s WEBSITE_URL with WordPress’ <?php the_permalink() ?> somewhere within the WordPress Loop.

Basic Example of Digg Integration with WordPress

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<script type="text/javascript">
		digg_url = '<?php the_permalink() ?>';
		</script>
		<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endwhile; ?>

The problem with this basic example is it would look like rubbish in your WordPress blog. A little CSS and HTML is required to display it properly.

Digg Integration with WordPress with HTML and CSS

<div class="social_news">
<script type="text/javascript">
digg_url = '<?php the_permalink() ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>

.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}

.social_news
{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
}

Wrap the Digg code with a DIV class. You may choose to align the DIV class left or right but I think it looks better on the right.

Here’s the full source code:

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="social_news">
		<script type="text/javascript">
		digg_url = '<?php the_permalink() ?>';
		</script>
		<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
		</div>
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endwhile; ?>

You may apply this modification to your WordPress theme’s single.php and page.php or any other template that has the WordPress Loop.

A WordPress Plugin Alternative: Digg & Reddit Me Plugin

If you don’t want to edit your WordPress theme files, try using the Digg & Reddit Me plugin. I personally think it would be too much of a hassle to manually insert the code into each post if I were to use this plugin but it really depends on your preferences and needs for your WordPress blog.