After previously adding the DZone.com voting buttons manually to each post (which you really don’t want to do every time as you need to set the post URL manually for the index page) I have modified the JavaScript provided by DZone and integrated some code into the WordPress files so that a button is added automatically on each post now just like the button to the left of this text.
Uploading The Modified JavaScript File
I noticed that DZone isn’t currently sending a cache header on every JavaScript request and that the snippet you are given to integrate into your post redirects via a 302 header to the real file. If you have 5 DZone buttons on your blog’s homepage (if you are displaying 5 posts) that means 10 additional HTTP requests to DZone.com that take time and delay the page loading process.
If you have already integrated the JavaScript snippet provided by DZone you should remove it now otherwise you will get two buttons per post. Just download this file and upload it to a directory of your choice on your server. You may even use the WordPress uploader but write down the final path to the JavaScript file as you need to enter it in the next step.
Now open Appearance > Editor in the WordPress Admin Panel on the left hand side and click on header.php on the right hand side. Add the following line somewhere within the <head> of the document:
<script src="/js/dzone.js" type="text/javascript"></script>
Replace “/js/dzone.js” by the path where you have uploaded the dzone.js file before. Then click on “Update File“.
Adding The Button To Every Post
After saving click on the link “single.php” on the right side just as you did before with the header.php file. Depending on your chosen WordPress theme the HTML code may look more or less like this:
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
Just between the opened <div> tag and the following <?php tag insert the snippet code:
<span style="float:left;margin:0 10px 10px 0"><script type="text/javascript">dzone_show_linkbox('<?php the_permalink(); ?>', '<?php the_title(); ?>', null, 1);</script></span>
Thus the modified code will look like this:
<div class="entry"><span style="float:left;margin:0 10px 10px 0"><script type="text/javascript">dzone_show_linkbox('<?php the_permalink(); ?>', '<?php the_title(); ?>', null, 1);</script></span><?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
Save the file by clicking on “Update File” afterwards.
Repeat this step for the index.php file and you’re done.
If you are using the WP Super Cache plugin or any other caching plugin you may need to clear the cache otherwise you won’t see the modified pages. When using WP Super Cache select Settings > WP Super Cache on the left side and then on the “Delete Cache” button on the page.
After reloading your blog’s homepage or any article page you will now see a DZone button just like this article does.
