adding a social bookmarking bar to typo

time to adapt my social bookmarking toolbar, as used on my work blog, for typo. i did actually find an existing blog article about making one of these as a custom view. but, buggered if i could get it to work; it either threw up a blank page or the dreaded 'server configuration error'.
anyway, my solution may not be as 'rails-groovy' as writing the social bookmarking toolbar as a custom view - i've just tweaked the code for my theme's views/articles/_article.html.erb file and added the necessary images into my theme's images folder - but, personally i prefer my approach; hacking the actual layout of an article inside the theme itself means this hack should be relatively future-proof, as it disnae require installing any files anywhere outside your own theme directory.
you can download the icon files and code snippet here.
[please note: this tweakage was done on my customised version of the 'scribbish' theme. if you're using a different theme then obviously your code layout and CSS filenames may vary and you'll have to use a bit of lateral thinking]
only four steps:
- place the 'linksiteicons' folder [and contents!] inside your theme's images folder
- paste the ruby code into your theme's views/articles/_article.html.erb file, after the <ul class="meta"> ... </ul> block [which adds the metatags at the end of each article]
- add the CSS code to your theme's stylesheets/content.css file.
- load and save content.css in the typo's admin theme editor and also 'empty fragment cache' and then reload your typo blog in your browser. you should now have a social bookmarks bar at the end of every post.
ruby code [goes into your theme's views/articles/_article.html.erb file]:
<a href="http://digg.com/submit?phase=2&url=<%= article.permalink_url %>&title=<%= article.title %>" rel="external"><img src="../../images/theme/linksiteicons/digg.png" width="16" height="16" alt="digg" /> digg this</a> || <a href="http://reddit.com/submit?url=<%= article.permalink_url %>&title=<%= article.title %>" rel="external"><img src="../../images/theme/linksiteicons/reddit.png" width="16" height="16" alt="reddit" /> add to reddit</a> || <a href="http://del.icio.us/post?url=<%= article.permalink_url %>&title=<%= article.title %>" rel="external"><img src="../../images/theme/linksiteicons/delicious.png" width="16" height="16" alt="delicious" /> add to del.icio.us</a> || <a href="http://technorati.com/faves?add=<%= article.permalink_url %>&title=<%= article.title %>" rel="external"><img src="../../images/theme/linksiteicons/technorati.png" width="16" height="16" alt="technorati" /> add to technorati</a> </div>
CSS code [goes into your theme's stylesheets/content.css file]:
{
padding-top:10px;
text-align:right;
font-size: 0.75em;
}
#linktoolbar img
{
margin-bottom: -4px;
}