Spinning off the user subscription feature from the inbox (and clarifying it to no end in the process) Del.icio.us have added a new feature called the "Network." This allows you to monitor all the bookmarks of users whom you are stalking...er, I mean, users who share your interests and whose bookmarking activities you'd like to follow.

So, to be clear about what's going on over there:

• The Inbox is where you read your tag subscriptions
• Your Network is where del.icio.us delivers your user subscriptions
• Links for You is where you pick up stuff tagged for:yourusername

You can also (feel the integration) add the link that you're bookmarking to the For page of a user who is in your network from the Del.icio.us add page., since Del.icio.us now helpfully lists all of your network subs at the bottom of the add page, viz:

The benefits of maintaining a network become clearer. In addition to all the new goodies, and ordered sharing of bookmarks, it occurs to me that this is another way for a reader to subscribe to a blog that is using del.icio.us for categories. We're bookmarking everything over there.... Just add the blog to your network to see the goodies!! If the source blog picks up Greg's great new bookmarking buttons, you'll even get some notes & a bit of a post preview into the bargain!

Filed in: tagging, delicious, blogtech, how-to

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

Great-looking implementation of Freshtags at Dumb Little Man. Choose your topic from the scrolling text box, and see the posts pop up in the column to the right. Freshtags in 2 columns. Cool! There's plenty of customisation going on out there. Let us know how you're making Freshtags work for you....

Filed in: freshtags blogtech webtech

As promised, a little more on Feedburner's Feedflare. Marshall Kirkpatrick points to a new Feedburner feature that will let you customise your post footer in your feed. Not only can you add pre-selected modules, but the service has been opened up so that you can write your own. Feedburner maintains a list of all the currently developed units in their Feedflare Catalog. They also make it ridiculously easy for you to implement a custom unit:

To use 3rd Party Flare, just copy the Flare's address (found in the “Use this link” entries below) and paste it into the Personal Flare field on the FeedFlare service setup form for your feed.

There are lots of "add to social bookmark" services, an alert that will find the word "monkey" in a post (& which is presumably customiseable to find a word of your choice?) and a v. interesting little add-on called Reference Tools that will link from your feed footer in a reader to the comments on your blogger blog, allowing a reader / subscriber to cut straight to the discussion and chime in with their ten cents, even though they read your post in a reader. This, I like!

Filed In: feeds feedburner blogtech webtech

In response to yesterday's exploration of microspheres within the blogosphere, Tor has leveraged the Del.icio.us category method to provide multiple topical feeds for those readers who are interested in part of his content, but perhaps not all of it. In the case of his multi-topic blog, we're talking Buddhism, Libertarianism, and the State of Maine. The feeds are run through Feedburner to provide maximum stats, feedback, and the Feedflare footer (of which more later...)

If you've implemented categories on your blog using Del.icio.us, you can do the same! Del.icio.us offers feeds for each of your tags, so using Feedburner is polish rather than necessity. If you're into this, you'd probably be most interested in the user/tag or user/tag+tag feeds as follows:

• User/Tag combo - del.icio.us/rss/julian/science
• User/Tag intersection - del.icio.us/rss/alan/music+dance

Build a feed for your Microspheres using Del.icio.us, and create a series of Micro-Feedo Spheres... or something!

Filed in: rss feeds blogtech del.icio.us

Responding to a survey that evaluates the behavior of folks who read different kinds of blogs, Steve Rubel points out that

the problem with surveys like this one is that the blogosphere has a lot of gray areas. There are some blogs that are about cats. There are others that are about world affairs. And there are even more that are about cats and world affairs on the same page. How do you classify which is which?

Regular readers can predict very easily how I responded to this, and are probably bored to tears with the whole thing, since there have been 6 posts since last October throwing around the concept of the Microsphere. Time, I think, to be a little more articulate and definitive on the subject.

Here's what I'm getting at...

The idea that there's a single blogosphere is unhelpful, problematic and clearly bogus. As the number of blogs increases, the number of markets / niches increases, and each niche is inhabited by a select band of bloggers, and addressed by many more. Readers, though, are even more significant than bloggers in this context.

The blogosphere is powerful (and RSS even more so) precisely because, as Steve points out, you can construct a personal information sphere that is as idiosyncratic as you are. Bunker-Buster Bombs and Bunnies? Sure! Geocaching and Google-Cacheing? Absolutely. More importantly, as your interests change, your subs can change too, and reflect the information that you're looking for.

I have a hard time seeing the relevance of the T'rati top 100. The blogs in it, of course, are individually authoritative and heavily trafficked, but is that enough to justify the existence of a list? It doesn't matter who the top 100 bloggers are, or what the top 100 most linked sites are, or even that they're all linking to each other. What matters is that you, as a reader, get a feedreader account and subscribe to the stuff that you like. It is infinitely more important
that you are able to select the 100 blogs that matter most to you than it is that 100 blogs happen to be the busiest.

We each form our own communities as we blog. This was especially clear to me as Freshblog took off & I watched the homeschoolers & bible bloggers diffuse the category hack amongst themselves. A community of blog hackers has formed around Freshblog, A Consuming Experience, Ecmanaut, Browservulsel, Singpolyma, and other blogs that post great stuff about stretching blogger. New blogs are moving into the territory all the time, including Aditya's The Last Word and Phydeaux3. This community is supplemented and supported by bloggers
who implement our hacks, link back to the sources, challenge us to clarify our thought and ask us for new hacks that meet their needs. Are any of us top 100? No... although the blogs linked above certainly deserve to be, but we are focal blogs in a microsphere of informal blogger hackery & support.

Here's the point... We are also incidental for most of our readers. They integrate a blogger hacks blog into their microsphere temporarily, while they figure out categories, or drop-down menus, or tagging, or whatever, and then they focus once again on their primary interest. Or they subscribe and wait patiently for one of us to post something that will grab them & get added to their site. The power of the microsphere... of the personal information world, is that you can monitor incidentals and take from them the parts that work for you. The gray areas of the blogosphere are the best parts!!

Filed in: technorati, microspheres, blogtech, webtech, reads, feeds

The other navigation drawback of Blogger (apart from the lack of categories) is the absence of next/prev post buttons. Freshblog has seen an ingenious earlier solution via ecmanaut, though it apparently requires daily archiving plus a complete re-publish each time. I've gone for the Pareto 80/20 rule: 80% as good, for 20% of the effort.

This hack requires the publisher to link to a small (3K) JavaScript file and put a whole lot of code into their template. If you've got a standard blog, it takes about 5 minutes. Once done, you get next/prev links (or buttons) next to each item (posts and comments) on your main, archive and post pages. This means readers can simply jump up and down the page from post to post, and between pages when they "fall off" the top or bottom of the page. For a demo, check out Vent or Speccy.

Prequisites: This blog hack makes certain assumptions about your blog. I think these will be met by the majority of blogs, but still, you should check. Firstly, it assumes that you have anchors defined for each post item (where the NAME is the <$BlogItemNumber$>). It also assumes that each comment has an anchor too (where the NAME is c<$BlogCommentNumber$> ie using a leading c). Further, it requires knowledge of your archive (set of URLs pointing to your archive pages). At the moment, it works with the FreshTags archive, drop-down menu archives and normal list archives. If your blog is like 99% of blogs and in reverse chronological order ("latest post first"), then your archive should be in chronological order ("earliest first"). This is usually the case, unless you've applied the reverse archive hack. (In which case, reverse it after this script has run.)

Implementation: Simply visit the setup page, enter your blog details and paste the code into the designated parts of your template. Once it's working, you can tidy it up and customise it to your blog. You can use the function provided - jumpNav(postID, direction) - to set buttons or links to jump anchors ('up', 'down'), within the page ('top', 'bottom') or between archives ('earlier', 'later'), for whatever makes sense for your blog.

Troubleshooting: If you're having problems, try using the "development" version of the script to aid with troubleshooting. (This is also the "human readable" code.) Find where the external script calls "/blog-nav/blog-nav.js" in the header and replace that part with this URL.

Advanced Usage: I've been playing around with some "fixed" buttons on my blog to let readers scroll up and down from any element. I'm not sure if I like it, but FWIW you can replicate it by putting this in your header:

<style>
div.fixed { position: fixed; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
html, body
{ height: 100%; overflow: auto; }
div.fixed { position: absolute; }
</style>

and this in your body section:

<div class="fixed" style="top: 50px; right: 20px;">
<input type="button" value="&and;" onClick="jumpNav(window.location.hash, 'up');"><br/><br/>
<input type="button" value="&or;" onClick="jumpNav(window.location.hash, 'down');"></div>

Thanks to Brett Merkey for the "faking position: fixed; in Internet Explorer" hack.

As usual, please direct your questions, suggestions and other feedback (including working code!) to the comments below. Also, if you've got it working and looking good, please post a pointer in the comments too!

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

Three new userscripts for blogger, courtesy of Kuribo. Now you can add emoticons to Blogger, add an append link for CoComment, and (this is the one that I'm really excited about) generate a sitemap for Blogger. These are hosted on Userscripts.org too, but there's something going on over there and I can't access those versions.

So. Sitemaps in review, since that's the one that's really got me interested. What do we know about sitemaps already? See my two previous posts, and the following:

1. They're a way to get your site crawled more speedily by Google
2. They're a way to access more comprehensive stats about your site (although Performancing Metrics may run this close at this point...)
3. For maximum statistics, the service requires that you upload a verification file.
4. Blogspot users are not able to access the server to upload the file.
   

So why the script? You can generate a sitemap without modification of blogger's settings. I don't think this cracks the verification issue, but a pretty cool sitemap can be had this way.
Here's the English Translation of Kuribo's original post.

Filed in: search blogs blogging blogtech google

Long Zheng reports that he's created a new Technorati tag generator for use with Blogger and other services. You can read about Tagalong on his blog, and of course you can take it for a road-test yourself. Pretty cool. This is a web-based application that you'd keep open in another window as you blogged. Not the most integrated solution, then, but a couple of neat features make up for that...

• Custom prefix
• Custom seperator
• The option to enable DIV tags and CSS, and
  
• Easy integration with your Technorati username, for "Technorati Personal" tags like these.

Great way to get this done. Other options (depending on your level of comfort and desire for integration) include Fritz's bookmarklet, Rhys's tag generator, and Improbulus's Greasemonkey Script for multiple word tags.

Filed in: technorati tags tagging folksonomy blogging blogger blogtech

Internet Explorer users are now no longer safe from the peril of FlickrFont, the distributed social font discussed on Freshblog. Thanks to the Flickr Developers' Yahoo! Group, the outstanding issue with how Flickr presents JSON feeds has been resolved.




Also, the size of the image letters is much smaller, meaning quicker downloads and less strain on Flickr's servers. The extra bandwidth also means that the TypeWritr just got more annoying, thanks to cheesy sound effects *shudder*

If anyone's using Konqueror or Safari, could you please let me know if you've escaped with your aesthetic sensibilities intact?

Filed in: blogtech, webtech, images, blogger-hacks, feeds, flickr, flickrfont, how-to

3 new Freshtags powered blogs over the weekend. Welcome to:

• The Noiz Begins
• Satisficed
• Tapping Into

Very cool!!

Filed in: freshtags, blogtech, webtech, categories, blogger-hacks, del.icio.us

Hack requests, like buses, seem to come along in groups... The difference is that I'm not out in the snow waiting for them (at least not most of the time...) So, 3 e-mails this weekend exploring the possibilities displaying recent posts in blogger. 2 requests to add posts to the menu / make it longer, and a request for sticky posts.

It seems that the menu itself is pretty hack-proof, and that the 10 titles that immediately precede the page that you're on is the best we can get. An alternative, for posts that are sort of sticky, in a "jam in the margin of your sidebar" sort of way, (mmmm, thumbprinty!) is the use of Freshtags for a categories menu that will pull relevant & clickable post titles into your sidebar when your readers select the topic that they're interested in. Make your blog truly dynamic, & "replace" the 10 recent posts menu, with Freshtags.

For sticky posts at the top of your main page: Improbulus has the scoop on changing the date & time of the post to some date in the future, so that it will remain on the top of your page. To access those options from Blogger's updated create post page, choose "post and comment options" in the lower left of the post create box, pick a date in the far future, and click publish. This is a "glass half full" application of blogger's lack of auto-posting. It won't sit on the post until the date that you chose, but the post will sit at the top of the pile 'til then.

Filed in: blogtech, webtech, blogger-hacks, blogger

A decidedly-mercurial thought occurred to me about the confluence of tags, blogs and advertising made possible by FreshAds ... the possibility of using different advertising account IDs based on tag. Ie you could use this system to display an Amazon or AdSense banner ad, but with different account IDs (and hence revenue destination) depending on the tag. How could this change blogging business models?

Most obviously, you could tag posts by user on multi-user blogs, so each blogger would get ad revenue in proportion to his or her post popularity. (Note to John: I'm not suggesting this for Freshblog!)

Another possibility would be for a blog publisher to "sell" a post (or at least, ad revenue arising from the post) by using FreshAds to insert the buyer's Amazon Associate (or AdSense) ID on the banner ads.

Why would a publisher do this? Well, according to economic theory, this transaction would only occur if the vendor (publisher) put a lower value on the future revenue than the buyer. Most likely, this would happen if the publisher was really strapped for cash and needed the money immediately (sort of like how authors get an advance from their publishers). The trade would also happen if the buyer believes the post will be more popular/profitable than the publisher does, which amounts to derivatives trading on blog posts.

This would also mean that publishers could "commission" posts from other authors and have a mechanism for the guest blogger to capture the revenue. In this way, publishers could put guest authors on a performance-based contract, rather than paying them upfront.

Another possibility would be for publishers to sell advertising rights to an entire tag. (Anyone wanna make an offer for "zingers" on my blog?) We've seen other models of tag sponsorship - but this one at least makes business sense!

Enterprising publishers could use FreshAds to set up a "bounty" system to promote their blogs. Since FreshTags will detect "hard-coded" tags in a URL, a publisher could agree to use the ad ID of registered partners on inbound links.

For example, suppose John engaged a bunch of independent contractors to spruik Freshblog around the internet. One of the contractors - "Joe" - would use the URL:

http://blogfresh.blogspot.com/?tags=ad:joe

Note that Joe hard-coded the tag "ad:joe" into the URL. When a reader clicks on this link, she will go to the Freshblog homepage and FreshAds would display a banner ad with Joe's account ID, rewarding him for his link-sprinkling efforts. (Her subsequent pageviews would naturally use John's ad ID.) This same setup could work for individual posts, rather than just the blog's front page.

It's not all greedy commerce though. This also makes possible philanthropic gestures in the form of tithing - call it "advertithing" (groan). You could, for example, associate the ad account ID of a favourite charity or cause with one of your tags so a percentage of your traffic (and ad revenue) goes to them.

Technically, you could just copy their ID from the group's own pages, but, legally, you might need their permission first. (I'm sure they wouldn't object!)

Some of these possibilities are already happening, but no doubt as pro blogging and social bookmarking continue to take off, we can expect more technology-enabled business models to emerge. Who knows what crazy schemes we'll see?

Filed in: freshtags, blogtech, advertising, blogger-hacks, amazon, adsense, del.icio.us

Over at The Last Word, Aditya has put Freshtags to work to set himself up with an automatically updating list of sticky posts. He's tagged all his sticky stuff "Highlights," and then set Freshtags to show those posts as the default. Very nice, and mighty dynamic in a Freshtags way, of course! No hard-code updates of any sidebar elements required when a new sticky post is produced. Ah, Freshtags... everyone should have one! So... what are you waiting for?

Filed in: freshtags, blogtech, webtech, categories, blogger-hacks, del.icio.us

Another new method for categories from Rangga. This one a manual method, but clean and easy nonetheless. If you post occasionally, and aren't too bothered about additional exposure from tags, this would work out great for you.

1. Have a regular blog full of uncategorised posts.
2. Set up a second blog to serve as your category manager.
3. On your second blog, have one post per category.
4. Edit each single-category post to include a link to the relevant posts on your main blog.
5. Add a link to each of these category posts to the sidebar on your main blog.

Pretty cool! A bit labor intensive if you're a ten-posts-a-day person, but good for the low-volume blogger. All done w/ HTML too, so no CSS or scripty knowledge required.

Any SEO penalty for linking so heavily to another site that also links back to you?

Filed in: blogger blogtech webtech categories blogger-hacks

Baher @ Technoogle points out that both Vista and IE7 are going to use a customiseable rss portal as their default start page, opening up the custom power of the portal to anyone with a PC, and perhaps giving feeds the push that will make them mainstream?

Filed in: webtech microsoft

There's an abundance of goodies out there for the blogger who wants to get a bit of show / hide action going on their blog. Expandable posts are useful if you write long posts and want to tease your readers with a little something but keeep your template looking stylish.

There are a number of strategies available to get this done.... by the end of this post I'll probably wish I was using one of them!

Blogger themselves offer a couple of different strategies for this. The expandable post summaries hack uses conditional tags, wraps the part of your post that you want to hide in a special span tag (which you can add to the post template so that it is always there waiting for you), and only shows it on the post page. The "read more" link is really a link to the post page. Quoting Blogger for the pros & cons:

• Advantages to this method: Customizable summaries, rather than titles only. Can be applied to some posts and not others (for instance, you might only want this for your longer posts).
• Disadvantages: Requires changes to the posts themselves, rather than to the template only. However, the "read more" link is in the template, so it will appear regardless of whether a post has been truncated or not. (Modifying this feature is left as an exercise for the reader.)

The alternative Blogger-endorsed method is the show/hide method, which hides the whole content of the post, and asks the reader to decide whether it is worth a look based solely on the title. As you know, it is tricky to write a post title that will suck in a reader, and so relying on the title alone to suck in your audience may not be the way to go...

Aditya at The Last Word offers an alternative method. It allows for a teaser-section of your post as a supplement to your title, & so stands a better chance of hooking your readers. It works inline too, popping open the post on your main page instead of sending your readers off to the post page. The main upgrade, though, is that the "expand this post" link won't appear on posts that are not abbreviated, and therefore do not require expansion. On the downside, once the post has been expanded, you're not currently able to collapse it again. Aditya offers a script for the head of your template, & asks you to wrap the part of your post that you're hiding in a tag that the script can see. This also requires a minor change to your body tag, & the wrapping of your blog post content in a div tag, so that the script knows where to make its magic happen.

Julie at No Fancy Name offers a hack that has a similar outcome, & being a wordsmith of the first order, lays out the goodies in a way that will make sense to you if you still think Java is an island in the ocean somewhere.... (I read that once....) What is nice (not to say suh-weet) about Julie's hack is that the "read more" button only appears on posts where there is more to read, and it is joined by a "back to the main page" button when it activates itself. This means that even if you're a main page all-post-reading browsing sort of a visitor, all is not lost when you find yourself on a post page. Cool.

So, my advice is to toss the default hacks, & decide whether you want "on-page pop-out" expansion, or "link to the post page & link back" buttons.

Let me know what works, & let me know if you're working this out a different way.

Update: Gaby from Blogger Categories has a cool how-to / demo combination post that lays out another way to do this. Where you see >> links in his post, you can pop out more content. You can also click again to collapse the post. There's a script & some CSS for your template head, and some "use it as often as you like" HTML that could go in Blogger's post template if you were so inclined. All good stuff. Thanks for sharing, Gaby!

Filed in: blogger blogtech webtech blogger-hacks

A reader mails to ask what I know about setting up a "print view" in blogger, so that posts can print without a sidebar or header (or blogger nav-bar?). The answer, of course, is notalot, but hey, let's flip some pancakes and see if any of them stick to the ceiling.

• CSS? Phillip at You've Been Haacked has a pretty cool "print" link on each post page of his blog that would seem to do the trick, by creating a new page & only pulling certain elements from the original. This works by opening a print dialog box, & having the box refer to a print preview page stylesheet. Would this work with blogger if the print-only stylesheet went in the template head?

• Javascript? Ben at Politics, Compassion and Justice is working on a .js version, in preliminary and backroom development, that looks a bit like this:

<a href="javascript:void(0);"
onClick="openindex()">Print</a><SCRIPT
LANGUAGE="JavaScript">

function openindex()
{ var blogbody = <$BlogItemBody$>;
OpenWindow=window.open("", "newwin", "height=800,
width=1000,toolbar=yes,scrollbars="+scroll+",menubar=yes");
OpenWindow.document.write("<TITLE>Print Me</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#333>")
OpenWindow.document.write(blogbody)
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")

OpenWindow.document.close()
self.name="main"
}
</SCRIPT>

All thoughts / ideas / plans / pre-formed notions for turning these into functioning blogger hacks are, as usual, most welcome.

Update: See Ben's CSS code to make this work. Great hack, Ben!

Update 4/12: Aditya offers another CSS method to make this work, using external stylesheets. If you've ever envied the Instapundit's stylesheet switcher (for various font sizes etc), Aditya points out that this hack could easily be extended to allow the application of multiple stylesheets to blogger content... So go ahead, give your Gran that 16 point font she's always wanted!

Filed in: blogger, blogtech, webtech, blogger-hacks,

Some buzz about the impossibility of reading Blogger's captcha images this week, esp. from Phydeaux3, who has taken out his captcha frustration on a spiffy new template. Zenyenta has the answer. Kitten Authentication. This is a 3 x 3 tiled image of various zoological organisms, only 3 of which are of the kitty variety. The system requires that you click all 3 kitties to verify that you are a human. No more warpy words, just cute and cuddly kitties. Sort of reminds me of the BlogExplosion "click on the right number" imagemap link, but with hairballs!

On a related issue (this is one of the tiles in the system, honest!)... If you were wrangling an owl, don'tcha think you'd want to wear, I don't know, a shirt?

Filed in: blogger blogtech spam

Taking up John's call for innovative new FreshTags applications, I present the FreshAds extension to the FreshTags blog navigation system.

The idea is straightforward: when your readers select a set of tags of interest, your advertising messages should be tailored to those tags. Everyone's happy: it boosts the chances that your readers see something of interest, that sponsors will get a click and you (the publisher) will get your few cents.

This article explains how FreshAds works, demos a working example and gives you step-by-step instructions on getting it set up on your own pages.

Under The Hood

FreshAds is a part of the FreshTags family of navigation tools. As such, it requires FreshTags 0.5 or above to be installed (but you are not required to have tagged all your posts). There is a separate FreshAds script file to include, plus some other logic to go into your template. Eventually, it will get merged into FreshTags proper.

At the moment, it only works with the Amazon Associates program, since that is the e-commerce shopping catalogue I use (and I guess is the most popular). FreshAds assumes you are a signed-up member of Amazon Associates and, of course, the social bookmarker delicious.

As per normal FreshTags operation, your readers can select from a pre-defined set of tags, which dictates which "related" posts are shown to them. In the absence of any reader selection, FreshTags has a guess at their interests based on their inbound search queries or tag selections on prior blogs.

FreshAds uses these current tags to choose a suitable Amazon Associates banner ad to display. You (the publisher) have to explicitly choose a set of banner ads of relevance to your blog, plus use YOUR tags to tag them. That way, when a reader picks some tags on your blog, FreshAds will fetch all your candidate banner ads and go through them to see which ads also have those tags. It will then pick an ad at random (from the set of matching ads) and display it on your blog. If there are no tags selected - or none that match - it just returns a random ad.

Speccy Example

This first started when I thought how to include some fake advertising on my scrutiny of footballers' off-field behaviour blog. (Like most places, Australia's professional footballers tend to get away with all sorts of bad behaviour.) So, I thought it'd would be funny/telling/sarcastic/subversive to sell "safety products". You know, drink spike detectors, pepper spray, DNA kits, that kind of thing. (Yeah, I know; not everyone's idea of a joke - or political activism.) But nevertheless, it turned out the easiest way to create these fake ads was to use Amazon.com to create real ones. Took about an hour. But that got me thinking ...

To include an ad on your page, Amazon.com gives you some HTML that consists of an iframe element with a src URL (which has the product, your account name and layout options embedded in it). Why not tag that URL in delicious, add your own descriptive tags and titles and let the FreshTags code do the heavy-lifting of matching reader interest to ads?

Probably the easiest way to explain what's going on at this point is to have a look at my Speccy Shop catalogue page and my delicous account. As you can see, I've tagged each of the dozen or so products on the catalogue in delicious. The delicious URL is as provided by Amazon.com, the title is provided by me, and the tags are drawn from my Speccy tags. You'll also notice there's an "anchor tag" called "footy_shop". (If you've used FreshTags' archive feature, you'll recognise this.)

If you visit the blog and select the tag "drugs", you'll get shown one of the following ads: Drink Spike Tester, Breathalyser or Drug Testing Kit. Similarly, if you select "bashing" or "rape" you'll be shown products that have been linked to those tags too. If you select another tag - or no tag - you could get any of the items at random.

[NB: I don't imagine I'll actually sell any of these products. It's just a proof of concept. But, if you have a commercial rather than social objective, then you might find this approach useful.]

Scenario Walk Through

A reader googles on "AFL players rape drugs". They click on The AFL Player Spectator. On loading, FreshTags automatically detects that they've used the keyword "drugs" and "rape" in the search query, and so sets these as the currently selected tag. The sidebar is filled with previous posts tagged with "drugs" and "rape".

Meanwhile, FreshAds fetches the set of Amazon ads I've previously tagged. It goes through them, determining which are of relevance. For each ad tag that matches, that ad gets added to the candidate set. If an ad features both tags (eg the Stun Gun), then it will get added twice. This makes it more likely to get picked than an ad that features just one (eg Drink Spike Detectors). Once FreshAds has made its selection, that ad gets dynamically included (AJAX-style) in the sidebar.

Step-By-Step Guide to Implementation

Sound like something that might be useful? OK, here's what you need to do:

1) Get an Amazon Associate account.

2) Get a delicious username. Think of a suitable "anchor tag" for your FreshAds, such as "myshop" or "amazon_products".

3) Get FreshTags installed in your blog, forum or other HTML pages.

4) Go to Amazon.com. Pick out products you think are relevant. Use their "Build Links" pages to generate "product links" HTML code. Ie code for ads of specific products, not recommendations or categories.

5) For each product of interest, create a new delicious entry. It's probably easiest to use their post page rather than bookmarks etc.

6) Cut'n'paste the URL in the iframe element:

src="http://rcm.amaz... "

Select everything between the quotes. Paste that URL into your delicious entry's URL field.

7) Cut'n'paste the style info in the iframe element:

style="width:120px;height:240px;"

Select everything between the quotes. Paste that info into your delicious entry's notes field.

8) Think up a name or title for this (not necessarily what Amazon calls it). Type that into your delicious entry's description field.

9) Think up a set of suitable tags drawn from YOUR set of tags on delicious for YOUR blog. Type those into your delicious entry's tags field (space separated) PLUS your "ad tag" eg "myshop".

10) Hit Save. Go back to Step 5 and repeat until you've built your catalogue.

11) Now comes the template hacking. First of all, find your FreshTags initialisation in your header. After the anchor=... line, put:

ads="myshop";

(except use your ad tag name instead of myshop)

12) Put this div element where you want the ad to appear. This example also includes some cheesy animations to show while the ads load; feel free to make something nicer, perhaps with style="", but don't change the id value!

<div id="FreshAds"><br/><br/><br/><br/><center><img src="http://ghill.customer.netspace.net.au/snake_transparent.gif" /><br><h3>Loading</h3> <h3><a href="http://ghill.customer.netspace.net.au/freshtags/">
FreshAds</a></h3></center></div>

13) Next we need some code in the head to wait until the page has finished loading, then kick-off FreshAds and write the HTML into the above div. Put this after your FreshTags initialisation code, but before your </head>:

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

<script type="text/javascript">
// event handler codage via ecmanaut

var then = window.onload || function(){};
window.onload = function(){ loadFreshAds(); then(); };

function doFreshAds(adsObj)
{
// callback for dealing with FreshAds

var outputHTML=listAds(adsObj);

document.getElementById('FreshAds').innerHTML = outputHTML; // stuff outputHTML into div
return;
}
</script>

14) Again, you can modify this code to put extra formating around the ad to make it nice. To help with this, FreshAds returns an object with some values in it that you can use with JavaScript:

FreshAds.url is the (Amazon) URL of the current ad
FreshAds.descr is the title that you selected
FreshAds.notes is the notes (style information from Amazon)
FreshAds.tags is the set of tags (as an array) that you associated with this product

That's it! Phew.

Concluding Remarks

I'm not sure how well this will go down with the folks at Amazon. It should result in higher clickthroughs for them through better targetting of ads. But, maybe they regard this is as too much hacking with their precious code. In any case, the same basic approach should work for their "recommendation" and "category" ads too. Similarly, with some tweaking, this code could be extended to work with Google's AdSense (although, why would you bother? It's usually pretty good at matching ads with content) and whatever Yahoo or the others do.

If you're keen to try it out, feel free to clone my URLs on delicious. Which reminds me, the paranoid out there might be wondering if I've slipped some code in to ensure that my amazon associate ID gets used ... here's the source code and here's the human readable version :-)

As always, comments, suggestions, experiences (and working code!) are welcome.



Filed in: freshtags, blogtech, advertising, categories, blogger-hacks, amazon, del.icio.us

Phil at Hysterical and Useless belies his own blog's name with a very innovative and interesting application for Freshtags. He's set up his tag cloud on a stand-alone page, is showing a huge number of tags, and is putting Freshtags to work to call post titles in at the end of the page. Very cool. Are you doing something cool with Freshtags? Let us know.

Filed in: freshtags, blogtech, webtech, categories, blogger-hacks, del.icio.us

There's a backlash against the social bookmarking one-click icon in your post-footer. Michael at Binary Bonsai calls it Digg-whoring. He cites WG, who note the overall ugliness of the buttons, and their similarity to the "add to your reader" buttons that can get messy (and were recently retired from Freshblog.) I would add that I used to have search links for individual post inbounds too, but they went the way of all things a while back, in the interests of streamlining the template.

I guess they're right. Del.icio.us users are going to bookmark your stuff if they like it, whether or not you have an icon... and I'm no more likely to get slashdotted with the icon than I was without it.... don't make me beg.... er... Let's just say that I got into this last June as an extension of the del.icio.us categories method, because I can't use bookmarklets, & so for that specific purpose the del.icio.us icon will probably stick around long after I've retired the newcomers.....

Filed in: delicious tags tagging blogtech

Lioness points out that the Del.icio.us extension for Firefox makes it much easier to tag old posts.... Simply right-click a link to the post that you want to bookmark (from your archive page, for example). You'll have to re-enter post titles, but it cuts out the step of reloading all your post pages.

Filed In: delicious, folksonomy, blogtech, tags, categories, blogger, how-to

Question. Is there a smart way to run multiple scripts on the page, to decrease load time & make everything smooth? This template is much faster than my last one because I have (temporarily?) dropped Labelr, and because it uses off the peg backlinks rather than the custom ones. Quoting NukeMods, a reader asks if there's a way to smarten up a template with multiple scripts....

Update: Link revised, so now it actually works!

Koranteng, in an exploration of folksonomy that is also a work of comic genius (in which he confesses to an "affair" with a fellow user of del.icio.us, whose tags enable him to better comprehend his own stuff) puts Freshblog squarely in the "glue layer."

New to me but applicable, I guess, since we're making the code "sticky" so that it can be used more widely?