Add a Digg button to every post on Blogger blog

Tweet

This post is about adding an old Digg button on Blogger blog. For the new one, check out this post.

Digg is a social news website where members can submit interesting stories, images and videos. Once the article is submitted, it will be available for other Digg users. Depending on popularity and interest, your articles are commented on by members.

Voting articles up or down is the Digg's main function, and it's called digging or burying. Many articles get submitted every day, but only the most dugg articles appear on the home page of Digg.

If your blog have an original and interesting post, then you can submit it to Digg and see if it climbs up the charts and drives traffic to your site. You can simply add a Digg button on your blog and encourage your readers to Digg your articles. The button will display a real time count of the number of times your post has been dugg.

More diggs will make your article popular on web as result you will get more traffic on your blog. While Digg support both a smart Digg button and a static Digg button, I recommend using the Smart Digg button, as it displays a real-time Digg count and is more customizable.

Demo

Normal button	Compact button

Integrating a standard smart Digg button on Blogger

First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'download full template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML and check the "Expand Widget Templates" option.
2. Press CTRL+F to find the code which looks like <data:post.body/>
3. Copy the below code

<!--DIGG BUTTON BEGINS-->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'>
</script></div>
<!--DIGG BUTTON ENDS-->

4. Paste it on top of <data:post.body/> this code. If you would like the button to appear at the end of your post, then paste the code below to <data:post.body/> this code.
5. Preview your template and if everything works fine, then save it.

Compact smart Digg button

Digg has a compact button too, a compact version which fits in less space. If you want to add this small Digg button, then paste the below code on top of <data:post.body/> instead of the above button code.

<!--COMPACT DIGG BUTTON BEGINS-->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_skin = 'compact';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'>
</script></div>
<!--COMPACT DIGG BUTTON ENDS-->

Open link in a new tab or window on Digging

By default, clicking on the Digg button sends you on the Digg page in the same window. By specifying the 'digg_window' parameter in the JavaScript you can change the way of opening links. So now you can able to open Digg page in a new tab or window by adding the code below:

<!--DIGG BUTTON BEGINS-->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_window = 'new';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'>
</script></div>
<!--DIGG BUTTON ENDS-->

This is the final code for Digg compact button with links that open in a new window on Digging.

<!--COMPACT DIGG BUTTON BEGINS-->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'>
</script></div>
<!--COMPACT DIGG BUTTON ENDS-->

Now you can see a Digg button to the next of your post paragraph. Your visitors will be able to Digg your blog posts simply by clicking on the Digg button.