Manually Install Digg This to Your WordPress Theme

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

Earlier today I finally came to the decision that I wanted to add a Digg submit button the post page of Evolutionary Designs. Originally I really didn’t like the buttons, but after the redesign of the button and the site’s new look, it grew on me. In the past I used Digg Digg for Digg submission but the plugin did not look very good with my site’s theme, and playing with code didn’t seem to help.

Rcently I tried to get Dig Dig To work on the site after the programmer updated and added a lot more features. But I did not like results. After not having success with Digg Digg and several other plugins, I decided to grab the JavaScript and code the plugin directly to my post page like I did with MMO Social Network, Twitter Submit, and the StumbleUpon button.

So earlier this morning, I went out and found the Digg This Submit Button on the the Digg website. I then added this code to the single.php file on my theme. Adding the button is really that hard. It should only take a few minutes. The only thing with this code is, it does not style it to work with your theme. You will have to decide where you want to put the button and know a little CSS.

How to Manually the Digg This Button

Of course, you can go to Digg’s site and get the code, but their walk through is not complete and it can be a little confusing for a non coder. With this walk through, I try and break down and make it easy for anyone to do you. I will explain how and where to add the code. All you need to know is a little CSS if my example does not work, and little about WordPress file structure.

The first think you want to do is grab the JavaScript Code. Then decide what type of button you to want use. Then Code it. Or you can grab the code here, I have code for each button option for you to choose from

Compact

[javascript]<a class="DiggThisButton DiggCompact" href="http://digg.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&bodytext=<?php the_excerpt(); ?>"</a>

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script> [/javascript]

Medium

[javascript]
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&bodytext=<?php the_excerpt(); ?>"</a>

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script> [/javascript]

Large

[javascript]
<a class="DiggThisButton DiggLarge" href="http://digg.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&bodytext=<?php the_excerpt(); ?>"</a>

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script> [/javascript]

Icon

[javascript]
<a class="DiggThisButton DiggIcon" href="http://digg.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&bodytext=<?php the_excerpt(); ?>"</a>

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script> [/javascript]

Adding The Code To WordPress

Once you have the code you will need to go to your admin dashboard >>> appearance>>> Editor>>> Single.php. Once you have the filed pulled, copy the entire text to a word or notepad document and save it your desktop. This will be used as a backup, if you make any mistakes and can not find where the code was damaged. All you will have to do is remove the corrupted code (select all delete) and paste the original code back on the form.

BEFORE WE GO ANY FARTHER, BACK UP YOUR CODE!

Next We will need to decide where to put the code. In this example, I will put the code above content and floated right.  In order to this we need to place the code just before the content. Take a look at the printscreen. You need to look for a line code that tells you are at the beginning of the post. You will need for something like main content. Once you find that, you should something below that says post. Below that is where you want to add the code.

Here is the code I used to submit all of the voting buttons that are floated left. If you only want the Dig Code, then skip this part and grab the second set of code below

[javascript]
<!– backtype Code –>
<span style="margin: 0px 6px 0px 0px; float: Right;">
<div class="backtype_style">
<script type="text/javascript">
tweetcount_url = ‘<?php the_permalink() ?>’;
tweetcount_title = ‘<?php the_title(); ?>’;
tweetcount_src = ‘RT @element321:’;
tweetcount_via = false;
tweetcount_links = true;
tweetcount_size = ‘large’;
tweetcount_background = ‘FFFFFF’;
tweetcount_border = ‘CCCCCC’;
</script>
<script type="text/javascript" src="http://widgets.backtype.com/tweetcount.js"></script>
</div>
</span>
<!– End of backtype –>

<span style="margin: 0px 6px 0px 0px; float: Right;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</span>

<span style="margin: 0px 6px 0px 0px; float: Right;">
<script type="text/javascript">url_site='<?php the_permalink(); ?>’; </script>
<script src="http://www.mmosocialnetwork.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script>
</span>

<span style="margin: 0px 6px 0px 0px; float: Right;">
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&bodytext=<?php the_excerpt(); ?>"</a>
<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>
</span>
[/javascript]

The code I use to style Digg is below. This code should work with most themes.

[javascript]
<span style="margin: 0px 6px 0px 0px; float: Right;">
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&bodytext=<?php the_excerpt(); ?>"</a>
<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>
</span>
[/javascript]

If not, then you will need to play with the margin. If you want to place it somewhere else then you will tell it float left. If you want at the bottom, the add the code the bottom of the code. You will need to add where it says /!post. This will be easiest way to get this to work.

Conclusion

So far I am still testing the code and noticed a few things. One of those is, the code still reads as if there are no votes even if there are votes before the plugin was added. The button worked before Digg made major changes to their site. My guess the code will either be corrected or the issue will resolve its self over the next weeks. If doesn’t resolve and stays this way, I will remvoe the plugin all together.

In general I do not like plugins or submit buttons that show the number of submits and that is mainly because it slows my site down. So, if you have a lot of vote buttons, this could slow your load time. I would try and keep to no more than three buttons. In the future I will removing more of these buttons, if not all them.

Image Source Grunge Social Media Icons