I may be six months late with this hack, since icon buttons at the bottom of your posts are officially no longer cool. But in case they see a revival, you can be ready with the Markit buttons. These work like the traditional buttons, except they help your readers populate the "notes" or extended free-text fields of their bookmarks. By default, the button will dump the first 255 characters (truncated to the last whole word) into the notes field. Unless they've selected some text on your page, in which case that text will be used as the notes. The idea is that most of the time, the best summary or notes will be in the first paragraph. But, sometimes, it'll be another snippet elsewhere. Most bookmarklets support this capture, so the footer icon's should too.

Check out the examples on my blogs (Vent and Speccy). To install it, add this to your header:

<script type="text/javascript">
// Markit Blog Bookmarker
// http://www.greg-hill.id.au
// See http://blogfresh.blogspot.com

PostItemDiv="post-body";
MarkUrl="http://del.icio.us/thetan?";
tempURL="";
</script>

<script type="text/javascript" src="http://ghill.customer.netspace.net.au/markit/markit.js">


and then put this in your template (at the post footer):

<script type="text/javascript">
var u=makeMark("<$BlogItemPermalinkURL$>", "<$BlogItemTitle$>",
"<BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>", '');

document.write('<a href="'+u+'" target="_blank" onMouseOver="doMark(this);"
onMouseOut="this.href=tempURL;"><img
src="http://del.icio.us/static/img/delicious.small.gif"/></a>');
</script>


Here's the human readable code.

Please note the following:

• Change the PostItemDiv to be whatever class name your template uses to indicate a div. It might be "ItemPostBody" or something like that.


• Change the MarkURL to be the target URL of your bookmarking service. Notice that I've used my username (thetan); this is so that the tags will be preserved. If you just use "http://del.icio.us/post?" then delicious will strip the tags, forcing readers to use their own. Hey - take it up with Joshua!


• Make sure the two single quotes are included at the end of the function call to makeMark(). This field is used if you wish to pass in a string with some tags in it, such as the <$BlogItemUrl$>. If it's empty, it will just use the ones it finds using the rel="tag" links.

At first, it seemed a pretty straightforward idea. But I was hampered by the fact that clicking on the actual button seemed to destroy the earlier text selection. Very frustrating! The solution was to capture the selected text during the onMouseOver event, while the OnMouseOut event (ie cursor leaves the button) restores the original text (from the first paragraph). Before you can click the button, you have to mouseover it, by which time the notes part of the URL has been swapped. If you change your mind and keep on moving the cursor, the old text is swapped back. Neat!

Those of you eagerly awaiting the exciting new FreshTags release (shoutout to Adi!) will realise that when readers dynamically update their tags (causing a wonderful cascade of asynchronous events), I need some way of re-writing the outbound links to reflect the new tags. Otherwise, tag-passing will be broken. The hour I spent geeking on this has helped me learn about scripting with events to process hrefs ... very useful!

Filed in: tagging, delicious, freshtags, blogtech, blogger-hacks, how-to