About a month ago, Digg announced new “Smart” Digg buttons on the Digg blog. You’ve seen them before — the familiar Digg badges that appear next to some blog entries showing how many Diggs a particular post has received. There is an example with a skimpy number of Diggs shown at the left for this very post.

Digg has a pretty good tutorial page describing different ways you can implement the Digg This button on your own blog: https://digg.com/tools/integrate

However, that tutorial does not include previews of what the actual Digg badges look like for each set of code. Nor does it include the additional code needed to float your Digg badge to the left (or right) of your blog post text.

I’m posting this short cheat sheet showing the code for a couple standard uses of the Digg buttons — along with a preview of each result.

#1: Basic “Digg This” Button

This is the simplest example of a “Digg This” button. Copy the code below and paste it into one of your blog posts (assuming your blogging package allows the use of <script type=" in the post). Replace the WEBSITE_URL value with the permalink for your particular blog post. This is necessary so your number of Diggs remains correct whether a reader is viewing the post from an archive page, or the actual permalink.

Basic: Copy and modify this code.

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

Float Left “Digg This” Button

This is the same basic “Digg This” button with a DIV added to float the badge to the left of your text. There is also a 10-pixel margin on the right, and 2-pixel margin added to the bottom to give a bit of space from the text of your blog post. You can adjust the margin values to taste.

Float Left: Copy and modify this code.

<div style="float: left; margin-right: 10px; margin-bottom: 2px;">
<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="https://digg.com/tools/diggthis.js" type="text/javascript">
</script>
</div>

Float Right “Digg This” Button

This time, the added DIV is set to float to the right of your text. Now the 10-pixel margin is moved to the left, while the 2-pixel margin remains for the bottom. As before, you can adjust the margin values to give as much or as little space as you like.

Float Right: Copy and modify this code

<div style="float: right; margin-left: 10px; margin-bottom: 2px;">
<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="https://digg.com/tools/diggthis.js" type="text/javascript">
</script>
</div>

Hope this is helpful to someone. I know it’s made my own blogging life a little easier.