adding a social bookmarking bar to typo

posted by madra Sat, 05 Apr 2008 19:42:00 GMT

bookmarks

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:

  1. place the 'linksiteicons' folder [and contents!] inside your theme's images folder
  2. 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]
  3. add the CSS code to your theme's stylesheets/content.css file.
  4. 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]:

<div id="linktoolbar">
<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]:

#linktoolbar
{
padding-top:10px;
text-align:right;
font-size: 0.75em;
}


#linktoolbar img
{
margin-bottom: -4px;
}

 

******
comments

leave a response

comments


except where i nicked it off the internet, all content © madra.net. 1998 - 2008