How to Add DZone Buttons to WordPress

DZone is a great site for developers to share the latest news on programming and web development. If your site has anything to do with these topics, be sure to submit to DZone as often as you can.

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

1
2
3
4
5

<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

1
2
3

<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

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6

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

Tagged As: digg, DZone, reddit, social bookmarking, social news, WordPress

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

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 DZone Buttons to WordPress”

Post a Comment