How to add digg and delicious icons to Blogger

This whole blogging thing is pretty new to me (the writing of one not the reading and adding inane comments). Being the geek I am, I have spent the past week messing about making the whole thing pretty rather than actually write anything (yeah it actually took a fair amount of my spare time to create the crapulent mess on the right)

That said I wanted to see if I could get the now ubiquitous 'Digg this' type icons all over my blog without having to resort to the huge graphics they usually come packaged with

I found the basic code for a few buttons at the Techwrap blog (thanks), but unfortunately these were written for the old style blogger and not the new template so I updated the code slightly, then added buttons and all the usual stuff

The code

The buttons at the bottom of this post were added using the following two pieces of code:

1) The style tag - basically this stops the images from having the standard 5px border or whatever your template style is for images in the post section.

<style id='SubmitButtons' type='text/css'>
/*
-----------------------------------------------
Designer: Enrico Suarve
URL: http://waronstuff.blogspot.com
Date: 07 Mar 2007
----------------------------------------------- */

.submitbuttons {
}
.submitbuttons img {
border: 0px solid #FFFFFF;
}
</style>

2) The buttons

<span class='submitbuttons'>
<a Title='Submit To Digg' expr:href='"http://digg.com/submit?phase=3&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt=' Digg ' border='1' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCbWXsUhvmXIw8h4mfZAi4VNgNJa2ap2myHX1ovVNj0sIYmozWW2z8YnOEtk5mVPHv_y740BIQ628KamCgMG-U5qaHfyJf0Q3TMPLhZDDh_3cAlKUDJ03fRgb5IahOkh2pGj_5g/s200/SubmitDigg.gif' width='16'/></a>

<a Title='Submit To Del.icio.us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt=' Del.icio.us ' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBOWpEOgTJHfmHyGWYQYNrc7hGmVC_MMhNYnNaSEbkUweLwjmgETjyFuRlf6i-RprL9wfi6KKI9ppB6eMEnShaQi_fHpcTZq9TqpjuCKWq-hXg4LC9q1679FNr3WXxOfv3xSOjw/s200/SubmitDelicious.gif' width='16'/></a>

<a Title='Submit To reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url' target='_blank'><img alt=' Reddit ' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE_ynzmI7OrH9qRfl1ATpiVBI5be2SBAoILg8QMQl2RenZlLkF2UTkotS0yUQjwzKnP_4EM8G6j5_biaLz1JrNO3m6EemvCivkLXk8L04zC2dke_Zj9cM4K4I3O8HAoa3D_4i3A/s200/SubmitReddit.gif' width='16'/></a>

<a Title='Submit to SlashDot' expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt=' SlashDot ' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgks9_-sMgYKkfOPJiVZCanuCCiWfQ4V43bsYF8wfJDnBx6iQBpqmfDxChGUNpivj4lDr2lVa_Cbi-YkvdM4qnlm8pAny8QDwmRIxkxai0O5RjqnBnrWNeEO3jLSk5G116bHQYlFQ/s200/SubmitSlashdot.gif' width='16'/></a>
</span>

How to add this to your template

Adding the buttons to your code is done by going into blogger, clicking on the template tag at the top, and selecting the option 'Edit HTML' from the choices beneath this. This should bring up the code for your blog in an XML format in the large window beneath, make sure you tick the option 'expand widget templates' above the text box and you're ready

Copy and paste the style code just before the line "</head>", this will place it in the page header. It's important it goes just here at at the end of the header, so that when the time comes any style you write for the image overwrites the existing img styles in the rest of the header (don't worry it will only overwrite for the submit buttons)

Next look for where to insert the button code - the template I use has a few points that look logical but I found that in some of them the buttons only appeared on individual blogs or only on my homepage, its worth experimenting. I found the best place (in my opinion) was right after the quickedit pencil code...

Lines from 'standard' blogger template
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

I started pasting the button code here
</span>
<span class='submitbuttons'>..............

The syntax
If you want to add buttons of your own my advice is to manually submit pages to sites like Digg and spot what the URLs are doing, or see if the site shows you how to construct the URL. For reference the URL to submit to Digg is '"http://digg.com/submit?phase=3&amp;url=" + data:post.url + "&amp;title=" + data:post.title'

NOTES

• The entire URL should be encapsulated in single quote marks (') and the hard coded text pieces should be encapsulated in speechmarks (")
• data:post.url - this is the permanent link to the post (NOT your homepage)
• data:post.title - this is the title of the post

Please feel free to use this in your own pages and link to it - I'd be really interested in anyone has any improvements ;0)