Wednesday, March 07, 2007

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='http://bp3.blogger.com/_RCkH9i_f19M/Re7356Zg8WI/AAAAAAAAABw/7ENZKGpXejs/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='http://bp2.blogger.com/_RCkH9i_f19M/Re735qZg8VI/AAAAAAAAABo/yb41kpmpY0I/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='http://bp0.blogger.com/_RCkH9i_f19M/Re736KZg8YI/AAAAAAAAACA/XSvTolVvhC4/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='http://bp0.blogger.com/_RCkH9i_f19M/Re736KZg8ZI/AAAAAAAAACI/eRKs1Xu3sEo/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)

19 comments:

Enrico Suarvé said...

UPDATE:
I swapped templates the other week and discovered the buttons started spacing themselves strangely again

Some of the templates use padding for images so add the following line to the above style to avoid this - or obviously alter the values and properties till they display as you want them too

 ;padding: 0px;

Any queries or problems and I'll be happy to help

Keith Lowell Jensen said...

Hey thanks. This works great. I followed your instruction best I could and I'm so far thrilled with the results. Thanks a bunch.

Carl said...

Hey thanks for this. Great job!

Falafelkid said...

Hey. Thanks for the post, but I have a question, albeit one from a hopeless amateur... Does the button code go into every individual post with me having to add all the links manually... or does it also fit into the template and the links are added automatically? Thanks in advance for your help!

Enrico Suarvé said...

Hi Falafelkid

If you follow the instructions fully it should just go once into the template and generate all the links and bits for you from the post titles you enter anyway

In short - do it once and never again (it should also work retroactively but i'm not 100% on that one - i'd be interested to know though)

I'm a hopeless blogger (as you may be able to tell from the fact I haven't entered a thing in months) I need all the help I can get to make posting them easier ;0)

Falafelkid said...

Hey Enrico Suarvé.

Thanks for the help. I will try and get this thing up and running the way you described. I will let you know how I got on. Thanks again.

Eric Riback said...

I can't well-enough express how grateful I am for this code. I've spent a lot of time trying to get this and am surprised at how difficult it is. Thought that each of the social bookmark sites would provide good code and instructions, but not so. Thank you!!

Anonymous V said...

thanks :) you made my life a little bit easier

steego said...

great stuff! i'll be using this for sure. thanks!

CrySis said...

Hi Enrico, can you help me? I need code for technorati, Furl, Blinklist and newsvine. You can help me for this update?
Thanks for your help.

Elcantar said...

Thank you very much ! this post was very usefull to me.

Elcantar

Ottawa Golf Blog said...

Thanks great piece of code.

Marcodious said...

This is excellent help, thanks.

Demoneyze said...

Thanks - this was just what I was after. Saved a lot of head scratching!!

Florian Janner said...

Great, thanks a lot!

Vibhu said...

Just added the syntax and works well. Check it out at http://dealbeans.blogspot.com/. Now need to figure out how to post to twitter and facebook :). Any suggestions?

SEO Company said...

Here is a useful link for adding all the other social bookmarking/ networking sites to your blogger blog

Website SEO Company said...

Great post, will save and share.

Web Design said...

Great useful post. And here is some useful code to add to it:

Add to Facebook:
href="http://facebook.com/share.php?u=http://yourwebsite.com&t=The+title+with+plus+signs+for+spaces"

Add to Twitter:
href="http://twitter.com/home?status=Currently+reading+http://yourwebsite.com"

This code would go inside an html a tag. For more useful information, you can check out this Web Design Blog

Also, don't forget to share this author's post. It's very helpful.