"If you can get along with everyone and everyone loves you, then you don't stand for much. A person who stands his ground for his principles and won't compromise his integrity is not loved by everyone."
- Larry Winget

How to Add Digg Buttons to WordPress

On Digg.com’s Tools/Integrate page, there are 3 types of Digg buttons available for us to display on our web sites:

  • “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

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>

WordPress Default Theme’s index.php Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?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

1
2
3
4
5
6

<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>
1
2
3
4
5
6

.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}
1
2
3
4
5
6

.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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?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.

Tagged As: , , , , , , , , ,

Posted by Vincent on 16 October 2008 2:24 AM in Wordpress Help You can leave a comment, or trackback from your own site. |

Similar Posts

Did You Enjoy This Post?

Subscribe to our blog through our RSS feed or email to receive updates on more posts like this. post on your favourite social networking or media site to let others know about this post. Help us generate more buzz by submitting/voting for this post with the following buttons.

1 Trackback On “How to Add Digg Buttons to WordPress”

Post a Comment


(Required)


(Required)