Adding Digg Button to Blogger

By Sarang

Since I have been using Digg for quite some time so now when I am starting a blog the first thing that I am doing is to add it here. Yes I know there wont be many people digging it but hey no harm in trying.

I found the tutorial at Woork to be very useful which helped me achieve what I wanted to do. I am going to build on that and try to make it as simple as possible so that a layman can easily add a Digg vote button in his/her blog.

Here are the steps that need to be performed in order to add Digg vote button:

1. Log into the blogspot account

2. Click on the tab named “Layout”

3. Click on the sub-tab named “Edit HTML” under the “Layout” tab.

4. In the “Edit HTML” tab select the check box “Expand Widget Templates”

5. Now take the backup of the existing template by clicking the link near the top of the page “Download Full Template”. This is only a precaution so that in case anything goes wrong you can easily reload this template whenever you want.

6. Now there are two options – one is to have the Digg button in the subject line (I prefer this) and the second is to have it in the body of the post. Depending on which one you prefer follow only ‘6a’ or ‘6b’:

6a. Subject Line: Find the following code in the template code

-----------------------------------------------------------------------

<data:post.title/>
-----------------------------------------------------------------------

You will find it in the following code section:

-----------------------------------------------------------------------

<div class='post hentry uncustomized-post-template'>
******* DIGG Code will come here *******
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
-----------------------------------------------------------------------

6b. Body: Find the following code in the template code

-----------------------------------------------------------------------

<data:post.body/>
-----------------------------------------------------------------------

You will find it in the following code section:

-----------------------------------------------------------------------

<div class='post-body entry-content'>
******* DIGG Code will come here *******
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
-----------------------------------------------------------------------

7. Copy the following code at the location identified above:

-----------------------------------------------------------------------

<!-- DIGG CODE -->
<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'/>
</div>
-----------------------------------------------------------------------

8. Now click on “Save Template” button at the bottom of the page.

9. Now open your blog page and you will see the Digg Vote button

10. Enjoying digging :-)