Blogger Hacks, Categories, Tips & Tricks

Tuesday, January 17, 2006
FreshTags v. 0.5
Freshblog is pleased once again to serve as host and moderator for the development of a system authored by Greg Hill that uses the Del.icio.us API to build interactive and context sensitive tag / category menus for the sidebar of your blog. We are pleased to announce v0.5 of the system, now called FreshTags.

There are several changes and new features with this version. The most significant is an expansion of the services that Freshtags can interface with, and the introduction of "listening" and "fixed tags" modes, making it possible for you to implement Freshtags even if you don't have a del.icio.us account of your own. New to tagging? Want to call some tagged content into your sidebar to see what's hot on del.icio.us & what all the fuss is about? Listen in to the tag-o-sphere with Freshtags.

If you're familiar with the service or are already running the script, feel free to scroll down to "what's new" below. If FreshTags is new to you, here's a brief explanation and a set of prerequisites. Please give serious thought to helping us test and publicize FreshTags. This section tells you how, & explains the features and benefits of the system.

1. History & Context:

Much of the material published here in 2005 has focussed on user-contributed add-ons for Blogger, and especially those that enable bloggers to organise their material into categories. The Del.icio.us category system explored here substitutes for categories in blogger by using Del.icio.us as a bookmark manager. An author tags their post, bookmarks that post to their account on Del.icio.us with the same tags, and, over time, creates a list of posts in the same category.

One limitation of the Del.icio.us category system has been the difficulty of displaying a list of your tags / categories in the sidebar of your blog. As the method caught on, and more bloggers became comfortable with the process, some users looked for ways to export a tag list from Del.icio.us. A number of tools were developed to make this possible. Del.icio.us recently added a tagroll feature. Pappmaskin and Marc Morales independently developed scripts to create tag lists in special posts on their blogs. Greg pushed the envelope to develop FreshTags, a tool that is context sensitive and interactive.

For a detailed account of the history of Freshtags, see Johan's post at Ecmanaut describing the evolution of the service.

2. What's so special about FreshTags?

The Freshtags system features an expandable category menu that reacts to other sites running the script, as well as to search engines, and will expand a menu of posts in your sidebar to match a search term or previously viewed tag. Your site can become interactive, and responsive to reader interests, automatically. There are two main modes of operation for this feature.

The first is tag-grabbing. FreshTags can "grab" tags from search queries, and some other sites with taggable content, and reflect those "previously viewed" tags on the currently displayed page of your site. This is best explained by example. If you do a Google Search for "Freshblog", then visit this site from Google, you’ll notice my sidebar Freshtags menu expanded and “Freshblog” is pre-selected, with a list of all the posts in that category open for your browsing pleasure.

The second mode is tag-passing. FreshTags can "pass" tags between sites that are running the service. As an example, If you expand the “Culture” category on Freshblog, then visit Greg’s Vent blog, you’ll find the “Culture” category there pre-expanded.

The goal of both of these modes of operation is to enable context-sensitive surfing between blogs, and to customize the presentation of your content for the reader.

One additional Freshtags tool allows you to include a post-count in your archive menu, as you see in the sidebar at Freshblog. This gives readers a sense of the frequency & regularity of your blogging.

3: How does it work?

Freshtags relies on three chunks of Javascript code. The first goes in your template head, and links your site to the service. The second generates a list of the tags that your readers are able to choose, and the third creates the list of individual post titles that is relevant to the selected tag. (An optional fourth chunk generates your archive list.) To enable FreshTags, simply edit your blogger template to add the pieces of code generated on the build page, & your interactive menu will be operational.

4. Prerequisites:

Freshtags is a companion tool to the del.icio.us category method. To see maximum benefit from FreshTags, you need to have an account of tagged content for the Freshtags menu to pull from. For an intro to the category process, see my introductory post on the Bookmarklets Method, and the linked posts.
If you don't have an account of tagged content, and want to use Freshtags anyway, you can use it in Listening or Fixed Tags modes (see below).

You should also be comfortable making simple template edits. You’ll need to add three short sections of code to your template, save, & republish your whole blog to enable the features of FreshTags.

5. New Features in v0.5:

  • FreshTags now has a website complete with instructions, links and screencaps for new users.
  • FreshTags has a reciprocal blogroll. When you notify us that you're using FreshTags, we'll add you to the blogroll, and send you the code to include the blogroll in your sidebar.
  • Listening Mode: If you don't have a del.icio.us account, but want to run the service anyway to see what all the fuss is about, the FreshTags Menu will "listen" to the search queries of your visitors, and display content from the Del.icio.us front-page that has been tagged with the same terms.
  • Fixed Tags Mode: Add specific del.icio.us tags to your sidebar to prompt your readers. FreshTags will notice when a visitor comes in with one of those tags as a search term, and will display content from Del.icio.us that matches those tags.
  • Customisation: This new version includes more display options for the menus, to better match your blog. The display options for your tags are visible from the build page, and include a flat display on a single line, a flat list without hyperlinks, an unordered list, and a drop-down list.
  • Licensing: Distribution of the service and associated scripts are now governed by a Creative Commons Attribution-ShareAlike 2.1 Australia License.
  • Preview and testing tools: You can see the available menu options on the FreshTags Layout Test Page, and personalise a FreshTags layout for your del.icio.us tags on the FreshTags Build Page. The Build page will generate custom code for the layout options that you select, and tell you exactly where to paste the code blocks in your template.
  • Multiple Tags: Now your readers can refine their interests by selecting (and de-selecting!) a number of tags at the same time. This means they can drill down on more specific topics by combining tags.
  • Integration: FreshTags can now grab tags out of a wider range of web applications, including
    aolsearch, technorati (tags and searches), wikis (eg wikipedia) and some blogging platforms (eg ".../category/politics"). Put Freshtags to work for you even if you don’t categorise with del.icio.us. Want to watch a set of tags on Del.icio.us & pull a FreshTags list of recent content to your sidebar? You can.
  • Archives: Tag your archive pages with a post-count using the bookmarklet provided, and FreshTags will give you a sidebar menu of post titles for that month. You can also use the same zippy layouts to format your archives – drop downs, scroll boxes, lists etc.
  • FreshTags is styleable. If you want even more control over how the elements display on your blog, you can use from an external file or embedded between style tags to control the display elements. Size, colour, borders etc can all be controlled by using the class="showtags" for tag display elements, and class="showtitles" for title display elements.
  • Search Interface. Freshtags will load your currently selected tag into the "search this blog" box on the blogger nav-bar, allowing you to search for Freshtags content with Google Blog Search.
6. Sounds good!! Where do I sign up?

For this context-sensitive browsing to be effective, a number of us need to add the FreshTags service, and make use of it by visiting one another's blogs. To get started, visit the FreshTags site and explore.

On the main page you can read more about the service.

A support page defines the terms used on the site and explains advanced features in more detail.

The build page allows you to select the options that will best suit your blog, and generate the code for your template.

To discuss FreshTags, report bugs, clear up your questions and suggest improvements, leave a comment or trackback on this post, & we'll respond.

When you've added FreshTags to your blog, leave a comment or trackback to let us know that you've adopted the service. We'll add you to the blogroll of users, and send you the code to insert the blogroll in your sidebar.

Have fun adding context to your blogsurfing, with FreshTags!!

Update: For discussion re: programming and operation, & updates of an alternative version, see Singpolyma

See Freshtags on Digg

Update 7/24/06: If you want to highlight your use of Freshtags for all the world to see, you can now add the Freshtags chicklet to your template, courtesy of Annie Bluesky from Blog U. Rockin' the Freshblog favicon too. Now that's branding! Thanks, Annie!

FreshTags

To add the chicklet, insert the following code:

<a href="http://ghill.customer.netspace.net.au/freshtags/" title="Categories by FreshTags"><img src=" http://ghill.customer.netspace.net.au/freshtags/freshtags-btn.png" alt="FreshTags"/></a>

Filed in: , , , , ,
Posted at 8:39 AM by John.
96 Comments:
<    >
Blogger Singpolyma said...
Awesome! I'll have to look at the new code and work some of this into my version :)

<    >
Blogger Singpolyma said...
Uhhh... speaking of looking at the code... any chance there's a version around with line-breaks? This all-on-one-line is... well... unreadable :P

<    >
Blogger Greg said...
Sure ... the link is hidden down in the development section of the docs.

http://ghill.customer.netspace.net.au/freshtags/freshtags-v05-dev.js

<    >
Blogger Aditya said...
isn't there a way to grab tags off technorati? i have a bunch of tagged content at technorati, and it would be much cooler, since performancing integrates with it really well ... for del.icio.us i have to seperately click on a link to add it to my list of bookmarks! :(

<    >
Blogger Greg said...
As I understand it - and I could well be wrong - technorati doesn't publish your tags as a JSON feed the way delicious does.

So while you readers coming to your blog via technorati will have the tags they look at picked up, we can't use technorati as the repository of your tags/categories/topics until they make it available as a feed. Hell, even an RSS feed would be a starting point.

But I am looking into adding "downstream" integration with technorati. This means that your readers who have selected, say, "blogtech" can visit your technorati page to see those tags.

Hmm, perhaps I should sign up to their developer program?

In the mean time, can I ask if you're using Johan's Greasemonkey script for tagging in blogger? Perhaps it might afford the convenience you're seeking.

<    >
Blogger Singpolyma said...
Replying to Greg's comment on my blog, since it makes more sense here:

Asynchronous loading of JSON objects is good -- but I based on my attempts with it, it still must be done before the list_side_tags et al, which makes perfect sense, and those cannot be run after page load (at least not as they are now). Loading data during those functions, however, seems to do the trick, and since on most blogs the posts will have loaded before the sidebar it doesn't really get in the users' way. Any plans on how you would go about it? Repeated polling to check if the data has come in yet is certainly not a pretty code to hack.

No page refresh to load tags/posts is pretty straightforward once you get the asynchronous loading down. If it works nice it may even obviate the need for my script, since the primary different between mine and the original FreshTags is the post-page hack.

One question regarding the archive page tagging -- what's the point exactly? It seems like a lot of work to go through for having post counts in the drop-down... And I haven't quite figured out from the docs how exactly it works either... Do you tag each archive page with a specific anchor and then put the post count in extended or what?

<    >
Blogger Greg said...
Hi Singpolyma,

Thanks for replying in a sensible spot :-)

Re: asynchronous loading. I don't think we can rely on the sidebar's order in the document. For example, my Vent blog has the sidebar before the main body, whereas Speccy has its after. (These are both OTC blog templates and so indicative of what's out there.)

My present experiments in this direction don't require anything by way of the load order and seem promising. Although, I need to avail myself of the window.onload event handler (apparently - still reading up on this stuff).

Once that's in place then, yes, no page reload would be required to re-fetch tags/posts etc. This is A Good Thing, but I note one downside: you won't be able to tell what tags your readers are selecting by inspecting your web logs anymore :-( Or re-fresh better targetted ads (if that's important on your site). Or just get the extra page view to feel better about spending so much time on your website.

Re: archives. You surmise correctly. The bookmarklet is used to tag each and every archive page with a tag (eg "blog_archive"). Extra information goes in the notes (extended) field. At the moment, this is limited to post count, but I would like to see more go in: word counts, titles, tags/tag counts, um ... comment counts, blog-specific info ... anything that could conceivably help readers choose which archive is interesting.

(This is part of a broader push to re-use FreshTags' fetch&format for supporting common blog features - next up is blogrolls!)

So, yes, it is a bit of a bother setting it up and, once a month, I have to remember to click a button - which I assure you I'm not too impressed about.

But I'm working on a "tag spider" using wget/grep and the delicious api to spider one's blog and populate one's delicious account with the bloggy goodness. I finally bothered reading up on the for/inbox mechanism and figure I could run the "tag spider" service on behalf of other people - sort of like FreshTags' first incarnation as a screen-scraper (pre-JSON)!

<    >
Blogger Singpolyma said...
RE: asynchronous - Well, obviously relying on sidebar order is not a good solution, although I believe it makes most sense to put your sidebar last anyway (so viewers see 'real' content faster), we can't assume that. onload is definately the way to go in the long run. Your present experiments do indeed look promising, and in fact look similar to what I was considering doing for the asynchronous load on my version. The reason I did not go that route is that it would require people to change their blog templates to upgrade to the new script, and I like the idea of 'self upgrading' software.

RE: sans-refresh - After thinking about it, I think tag-load-sans-refresh really would be a nice thing and very much more user-friend than even my post-page hack. While those of you who have logs and counters might feel down about it, ultimately sites are about users ;) Besides, you could build it in to load a little blank script from your site to get the extra hit if you want ;) Another thing I thought of though -- doesn't this break the tag-passing, since the referrer URL no longer has the selected tag unless they click a post link?

RE: archives - well it sounds kinda interesting, but I'll definately hold off until there's more use to it before I start using it ;)

RE: blogrolls - what exactly are you planning on doing? something similar to what I've done with mine, or totally different?

Another thought I have had -- what about other blogging services that have built-in category methods? The way you have built FreshTags now, it basically is del.icio.us only, which makes sense. But eventually, there is more here than just a categories-for-blogger method. I'll likely eventually switch to WordPress, and when I do I won't want to lose this functionality, but I won't want to keep tagging posts on del either. I may start hacking at a FreshTags-for-WP solution...

<    >
Blogger Greg said...
Re: asynch. Yes, the current tags will no longer be in the URL, which is a poser and will have to be dealt with. Perhaps JavaScript has a technique for "trapping" all clicks, allowing the tag=... to be updated before being followed? Like a page-wide onClick() thing?

Re: archives. Certainly the value of post counts goes up as a function of the length (and volume of posts) of your archive. Clicking on the archive link of Freshblog tells me a lot about Freshblog. I've been playing around with JavaScript graphing libraries so there me may be more scope for hackery there too.

Re: BlogRolls. I've noticed that blogrolls can get kind of large and unwieldy. One thought is to have tag-driven blogrolling: show different blogs depending on the current tag. (As well as permanently listed ones.) NB: I'm thinking that the publisher should tag other blogs with his/her tags, not rely on the target blog to provide tags about itself.

Even with asynch, it would be unwise to have a fetch per blog; users would need to express interest in a blog before fetching posts from it. In that sense, blogrolls might look more like tag selection than post selection.

Other thoughts: discovery of "pivot tags" - points of overlap in two or more blogs' tagspaces that could be used to pivot from one into the other. (May require inspiration from Euclid.)

Re: WordPress. Not sure how they handle categories and displaying them, but the tag-grabbing (from web apps) and tag-passing (blogs) should translate okay. On the minus side, if bloggers don't use social bookmarking it will be harder to get the benefits of integrated blogrolling. Perhaps FreshTags-on-WP should quietly and with no fuss stuff the content into delicious as well, even if it doesn't rely on it to display categories/posts?

<    >
Blogger Singpolyma said...
RE asynch : you could have the JavaScript rewrite the HREF on every link on the page to append either '?tag=TAGS' or '&tag=TAGS', depending on the link's original contents. Maybe there's a better way, but that would work.

RE blogrolls : An interesting idea for too-long rolls. I agree that it makes more sense to tag them yourself than to trust them to tag themselves. The not loading headlines for everyone on a blogroll makes sense in this too-long context... maybe have a '+' (like I already do) that not only shows the headlines but actually starts the fetch of them?

Re wordpress : That's a thought, since it's rediculous to expect other blogs to check if you're a del.icio.us, WP, (or maybe other) user in order to show your headlines in the sidebar...

<    >
Blogger Greg said...
Re: Asynch. I think it would have to re-write the hrefs immediately as they click on the links, not just at page load. Also, I'd be worried about applying the &tags=... willy-nilly since it might stuff up a (very small) proportion of links. Interestingly, there's some timely slashdot discussion about notifying link click events.

Re: blogrolls. Yep - I reckon one (asynch) load to fetch your blogroll, displaying all the titles and possibly group by tags too. You could even include notes/extended in the tool tips ("this guy is good for a laugh", "not recommended for work" etc). A second click will fetch that blog's headlines (if present) and expand that. A third click takes you to the blog. How does that sound?

<    >
Blogger Greg said...
Just a small service update: if you're using FreshTags in a "generic mode" - not supplying a particular delicious username but rather grabbing posts from the entire community - you will notice a change in delicious' behaviour.

Whereas last week FreshTags could use the keyword "tag" to make such a request, they appear to have turned this off for JSON feeds ...

Compare these two requests for everyone's posts tagged "freshtags":

http://del.icio.us/tag/freshtags

http://del.icio.us/feeds/json/tag/freshtags

Last week, both would return a set of posts. This week, only the former (HTML) request will, while the JSON feed is left languishing :-(

This could have something to do with their recent upgrade ... will follow through and keep you all in the loop.

In the mean time, I suggest you do not run FreshTags in the generic mode (ie you should supply your delicious username).

-Greg.

<    >
Blogger Greg said...
The latest word from Joshua at delicious is that delicious never supported generic JSON feeds ie:

http://del.icio.us/feeds/json/tag/lightning

should return a list of everyone's posts tagged with "lightning".

I guess I was hallucinating this past two weeks! It still works for the RSS feed:

http://del.icio.us/rss/tag/lightning

But, given the fragile state of rss2json services and my reluctance to host a server or generate new code for rss, it's unlikely we'll see the return of generic mode.

This is a bit disappointing. :-(

<    >
Blogger honel said...
I've just implemented FreshTags and calendar navigation on my first blog :o)
Being fairly new to the whole process and not particularly technical in the HTML/XML/tagging department, your guidance has been invaluable.

Here's a link to my post on "Getting the blogging tools right"

http://honel.blogspot.com/2006/01/getting-blogging-tools-right.html#links

Thanks
Honel

<    >
Blogger Robin said...
Hi there. I just set up FreshTags today (and had to join delicious and tag all my posts to do it!) and I'm really happy with how it's worked out.

I'm sure I'll tweak it more later, but my next mission is to set it up on my wife's blog too.

Thanks again
Robin
(Internet Institute for the Easily Amused - http://easilyamusedinstitute.blogspot.com)

<    >
Blogger Ulises said...
I was trying to summarize FreshTags in one blurb in order to explain it to folks, and came up with the following: FreshTags: 'real-time' interest-sensitive navigation for the readers of your blog

<    >
Blogger Greg said...
Hi Pat, welcome aboard!

We've got the brains trust working on your problem right now. Ideally, you'd want to avoid using multiple delicious accounts since delicious is a lot easier to use when you're always logged in via cookie.

I hope to get back to you in the next day or so with a working solution.

<    >
Blogger Greg said...
Hey, Pat, if you're reading this, could you please email John or me? We think we've got a solution for your particular needs that we'd like to run past you.

-Greg.

<    >
Blogger Tor said...
Hello everyone,

I'm glad there are folks like you to help my readers find things they'll want to read in the archives of my blog.

I put up the basic FreshTags on Tor's Rants last night, and have had real fun playing with it. I've learned a lot about CSS and html from using Freshblog hacks.

One thing I noticed, and that Greg alludes to above, is that it helps Google AdSense better target ads to my readers. Since my postings are so eclectic, it's really helpful. That's a big selling point for widespread adoption of FreshTags. It would probably encourage a lot more people to slog through the CSS, or pay someone to do it for them, to include the FreshTags.

I'll be moving the FreshTags up to a more prominent spot on my blog very soon, after I tame some of the other sidebar elements. I'm intrigued by the prospect of tag-driven blogrolls. In the meantime (by this weekend, hopefully), I'm going to be collapsing my blogroll into categories, to help people find the blogs they'll want to visit.

I'll be happy to include "FreshTags Users" as one of the collapsing categories, so send out that code when you get a chance!

Peace,

Tor

<    >
Blogger Mary Whisner said...
I successfully set up my del.icio.us account and tagged a few posts.

I went to the Build page and selected some options. Then I cut and pasted the code into my template in three places -- and republished my blog -- but the lists of categories (drop-down), etc. didn't show up. I suspect I pasted them in the wrong spot.

<    >
Blogger ChiefOptimizer said...
I am having the exact same problem that was previously noted by By Mary Whisner, at 2/24/2006 05:15:46 PM on my blog.

"I successfully set up my del.icio.us account and tagged a few posts.

I went to the Build page and selected some options. Then I cut and pasted the code into my template in three places -- and republished my blog -- but the lists of categories (drop-down), etc. didn't show up."

Can someone help me out with this? Thanks in advance.

<    >
Blogger Greg said...
Hello Mary and JB,

Sorry for the delay in getting back to you both.

First, JB, I checked your page and my browser (FireFox) is throwing some errors: "getLevelVal is not defined" and "page is not defined" - these variables relate to some other code on your blog. Your FreshTags implementation looks okay, so try getting rid of these other bugs.

If you're still having problems, can you please revisit the Build Page, fill in the form, click update and post the URL that you get back here?

Next, Mary, you've got the categories etc in the right place, but you've got the FreshTags initialisation code inside the style declaration ie you've cut'n'paste it into the wrong bit of the header. Just cut the whole block with "//FreshTags v0.5 ..." in it (including <script> and </script>) and paste it just after the </style> line, but before your cookie script. That should fix it.

Also, Mary, you've got the default tag set to "published". This means when your readers don't select any tag, it will show all posts tagged with "published" by default. You don't have ths tag, so why not pick one of your own tags like "news" or "law" instead? Eg defs="news"; If you don't want any posts listed by default, change it to defs="";

Please let me know if this helps.

-Greg.

<    >
Blogger ChiefOptimizer said...
Thanks Greg, I got it working. The only issue that I am having now is the fact that when I use a drop down list, it keeps getting forced to the bottom of the page. I do not have a problem if I use a list and the length of my tags should not be forcing this to happen. Can you take a look and let me know what your think?

Thanks JBS

<    >
Blogger Greg said...
Hi JB,

Great!

On my browser (FireFox) your sidebar is getting displayed "below" (but to the right) of your main content; this is often caused by a stray </div> somewhere. I suggest you have a look at your divs and check that they're balanced.

FWIW, FreshTags doesn't write out any div elements, so it's probably been introduced as a result of hacking your template.

Also, please see my comments to Mary above about the defs="published"; line - you may want to change that too.

Lastly, please email John (see gmail address top left) to get added to the FreshTags blogroll!

Cheers,

-Greg.

<    >
Blogger honel said...
Hi Greg

How do you order the tags so they can be displayed

- alphabetically; or
- by volume of posts

Thanks
Mark

<    >
Blogger Greg said...
Hi Nick,

Glad to hear you're enjoying FreshTags.

The next release (0.8) will allow people to write their own display functions. At present, the "custom" feature only allows HTML, which is fine for spitting out lists, drop-downs and the like. But for what you're talking about (TagClouds) you need to be able to write JavaScript.

Hopefully the next release will be ready in the next few weeks. It also opens up a range of possible user-interfaces - and allows people other than me to write them. I'd like to see FreshTags users (and well-wishers) contributing ideas and implementations of them too. It'd be nice to have a gallery of styles and presentations available to new users.

So, if you've got ideas for crazy navigation with fly-out menus, complicated mouse-controlled events and bizarre image maps - send them in!

On the flip side, if you've got wicked coding skills in CSS, dynamic HTML and JavaScript and looking for a challenge, let me know.

In short: tag clouds are coming soon. Other ideas are welcome. Please email me or post here. They may get implemented by me or others, depending on ease, merit, breadth of appeal - and good ol' geeky fun.

Donations to the cause could help proposals that score low on the other criteria :-)

-Greg.

<    >
Blogger Greg said...
Hi Honel,

FreshTags orders the tags in the same way as delicious serves them back. By default, FreshTags asks for them back sorted by frequency. In your FreshTags code you pasted into your blog, there's a bit that calls delicious. Here's Freshblog's:

http://del.icio.us/feeds/json/tags/jrfj44/blogtech?sort=freq&count=100

Note the "?sort=freq" - change that to "?sort=alpha" and it should do an alpha sort.

http://del.icio.us/feeds/json/tags/jrfj44/blogtech?sort=alpha&count=100

Just make that change in your header script and you should be right.

Please reply back here either way so we all know :-)

Cheers,

-Greg.

<    >
Blogger ChiefOptimizer said...
I just implemented the Anchor feature of the script. I might suggest that you clarify in the support pages that an Anchor translates into an Bundle in del.icio.us.

JBS

<    >
Blogger honel said...
Hi Greg

Re: displaying the FreshTags in alpha order, I followed your tip and changed the parameter from ?sort=freq" to "?sort=alpha"

I'm glad to report that it works great. Thanks for the support.

Honel

<    >
Blogger Triet said...
Hey guys, I just joined the club. So far I've tagged one post with ecmanaut's greasemonkey tagging method and just downloaded the freshtag script. Looks great!

Here's my blog: thebleedingear.blogspot.com

Questions:
1. I know I read somewhere about an easier way to go back to old posts and tag them without having to repost them all. Can anyone point me in the right direction?
2. Many of my readers come from Vietnam. Some ISPs there block blogger/blogspot, so they must use IP maskers. That blocks cookies, which disables freshtags (and my recent comment hack) b/c del.icio.us uses cookies. Is there ANY way to set it up without relying on cookies so that my blocked readers could benefit from freshtags?

Thanks

<    >
Blogger Greg said...
He Triet!

1) I'm not aware of any automated method to do this. I wrote a brief overview for tackling this problem that might be helpful. If you come across any other approaches - or just want to explain your own tactics - please add a comment.

2) I hadn't thought about the cookie angle. FreshTags doesn't use any cookies whatsoever. To my knowledge, delicious only uses them to "keep you logged in". But, when requesting the JSON object, FreshTags passes your username. So there is no reason why cookies are needed to get the JSON feed either.

I just did a little experiment by turning cookies off and requesting:

a) My delicious homepage
b) My delicious JSON feed
c) My FreshTags-enabled blog

All seemed to work OK.

Could there be some other way that the ISPs are blocking FreshTags? Could you ask people in that predicament if they can repeat the above experiment?

Cheers,

-Greg.

<    >
Blogger Rumors said...
Good stuff. It'll be even better when it can create a tag cloud :)

My blog ("Hysterical and Useless") is now using FreshTags to power my tags index page, and I'm looking for a nice way to style a list of tags into my sidebar, too.

Thanks!

<    >
Blogger Greg said...
G'day Phil,

Always pleased to see a fellow Radiohead fan join up. Checked out the tag wall and it's an interesting take - a sort of stand alone tag app rather than integrated into the sidebar.

For another take on tagclouds, check out phydeaux3's work. And if you want to go down the "tag-driven search engine" path, have a look at Singpolyma's version of FreshTags.

One last thought - have you thought about using FreshTags' "multi-list" mode? That way users could select "piracy+games" etc.

Cheers,

-Greg.

<    >
Blogger Jen said...
Hi...
I'm not sure if I'm using them correctly, but I've set up Freshtags on my blog.

Thanks

<    >
Blogger cellardoor said...
I'm now running freshtag on one of my blogs,
http://www.satisficed.com/pf/blog.html

I should be adding my other blog,
http://www.prosperlicious.com/blogger.html
once I finish tagging.

<    >
Anonymous Anonymous said...
Is there any way to get the FreshTags in the drop-down into alphabetical order?

<    >
Blogger SJW said...
I just got my fresh tags up and working. and I love them. That's a good question regarding alphabetical order, I will look into it and if I figure it out, I will be back to let you know.


www.dumblittleman.com

<    >
Blogger Greg said...
Welcome!

Alphabetical sorting just a few comments above.

<    >
Anonymous Anonymous said...
Brilliant - the alpha sort worked. FreshTags is a superb tool - thanks for inventing it!
Niki

<    >
Blogger ycc2106 said...
Hi!
Yes it's superb tool!
But I need help, I have one post page set because I have some heavy pages.
So when I ckick on my freshtag with several posts, it only shows one post... is that what I have to change to get it working?
I mean how can I get all the posts showing?
(I didn't read all your posts but read the complete support, it does not mention anything about this)

<    >
Blogger Greg said...
Hello, and welcome too!

I'm not sure I understand your question: are you saying that you only want to limit it to one post per tag?

In any case, your template isn't writing out the post titles. Ie when you select a tag, there's no code to generate the list of post titles. You'll need to paste in the "listTitles()" code from the FreshTags build page.

Hope this helps.

<    >
Blogger ycc2106 said...
Thanks for the reply.
No no! the opposite it actualy only shows one post but I would want all of them to show.
Note that I use the 'next links' so my settings have to be set to a post par page

If you check by blog and click on a FreshTag I think you'll understand, you can't get to more than one post.
Have I done something wrong?

<    >
Blogger SJW said...
When viewing a post that's accessed by clicking on a freshtag/freshtag title dispay, I am noticing that my adsense doesn't apprear. It shows up on the general blogger itempages, just not when you arrive via freshtags.

Has anyone else had this problem or have I just been sitting at this pc too long?

<    >
Anonymous Anonymous said...
A rather general question on blog systems & categories:

I'm new to blogging. I didn't know that categories were such a huge problem and require hacks. I always thought that categories in blog systems were a matter of course.
My question is: am I right to assume that no public "dynamic" blog systems exist yet, that can automatically rebuild the blog page according which categor a visitor clicked?

Let's say a visitor clicked category "A" on the category list (or category pull-down-menu). The whole page would then rebuild itself, only showing blog entries relevant to category "A".

I hope my question was clear. =o

<    >
Blogger John said...
Anon,

You're right in thinking that there is no official way to include tags or categories in blogger at this point, & lots of people would like to be able to organise their posts this way. There are a number of alternatives. Wordpress.com will let you do this, & they now have a hosted blog service, so that's one option. As for your "in-blog" display of relevant posts. Marc Morales' method, Pappmaskin's method, and Amit Upadahay's Labelr all do this v. well. Freshtags (as you see here) produces a list of post titles in your sidebar rather than in the body of your page, which I prefer. So. Wordpress will do this if you're just strating out & you want your categories to be integrated. If you're already established on blogger, though, and you want to add some features to your blog, check out the hacks recommended above, & let me know how it works out....

<    >
Blogger John said...
Phydeaux3's newly-updated D2B method will work for you too....

<    >
Anonymous Anonymous said...
Hey John,
thanks for your detailed and insightful reply! =)
I think you just summed up the current status of category blogging.

--optional reading--
The reason I'm looking for a category system that displays not the links to the entries, but the full entries themselves in the main blog body, is because the blog that I want to start will be an image/photographs blog, which will feature short entries with 1-2 pictures at most.
Basically: lots of short entries with 1-2 pictures at most, and only little text. Displaying links to the entries (whether in the main body or somewhere else) would only lead to more clicking, so I figured that displaying the actual entries in the main body would be more visitor-friendly for an image/photo blog.

Long story short: thanks!
I'll give labelr or wordpress a try, since they seem to support the display of full entries in the main body after clicking a category.

phew

<    >
Blogger James said...
I just implemented Freshtags, and was having trouble with the scrolling option. I wanted to limit the rows to 10 and have the user scroll through the rest so it does not clog up too much of the screen when results are retrieved, but the scrollbar did not seem to be activated, and the number of posts just ended up being truncated.

I gave up and am now displaying it in "List" Mode, and asking readers to scroll down.

Still nice, but was hoping to implement the first solution.

---
Friedbeef.com

<    >
Blogger Greg said...
Hi James,

I understand you - you want to have arbitrarily many posts listed in a scroll box, but the size of the scroll box to be limited to ten rows?

Like this?

In which case, you'll need to add some CSS to your stylesheet (or before your </head>):

<style>select.showtitle { width: 10em; height: 10em;} </style>

The width and height parameters control the scroll box. If I've got it wrong, and you were actually talking about the tags, then you need to change "showtitle" above to "showtag" and it should work.

Please let us know if this is what you're after.

-Greg.

<    >
Blogger John said...
Ron,

Welcome to Freshtags. You're on the blogroll! Re: the subscribe field for your visitors (you mean e-mail subscription to your feed, right?) see Bloggeratto's recent review of the available services. I use R-Mail for Freshblog. Let me know which one you go for!

<    >
Blogger John said...
Ron,

Let's tackle the navigation hacks first. For a home link. you simply need to hand-code a link back to your blog's main URL, & paste it after the comment code in your template but before the closing itempage tag that displays your comments on post-pages only. Blogger's default link looks like this:

<a href="<$BlogURL$>"><< Home</a>

You can use the Blogger "recent posts" menu to navigate between archived posts. The menu will always show the 10 posts that preceded the post you're viewing. If you want it to look spiffier than that, you'll need a hack. Greg's Blog Navigator is the one that's in use on Freshblog, & that's what gets you the previous & next post links in the post header, amongst other nav-hacks.

I'll get to the Freshtags archive menu in a sec....

<    >
Blogger John said...
A sec, a day,...

Here's the breakdown on the Freshtags archive.

This is a bookmarklet and menu combo that allows you to bookmark your archive pages on del.icio.us with a special tag, and a post count. That way you can pull these pages out of del.icio.us and into a sidebar menu that includes a post count & gives your readers a sense of how much stuff you're writing & what's happening on your blog.

To get it working, you need to add the code for the archive menu into your sidebar, at whatever point you'd like the menu to appear. You can keep the blogger menu going too, if you like, as I do here for some unknown reason!

After installing the menu, drag the archiving bookmarklet from the bottom of the Freshtags Build Page onto the links bar of your browser. Edit the bookmarklet (by right-clicking & selecting properties)

1. Change the title if you'd like
2. Replace both instances of the word "Vent" in the location field with the name of your blog, so that the bookmarklet reads

...'&description=blogname: '+tidy(document.title)+'&tags=blogname_archive&extended...

Now you're all set for a mammoth session of archive bookmarking.

Visit each archive page in turn. Count your posts, and select the bookmarklet to bookmark them to del.icio.us & add a post count. You'll be prompted to log in to del.icio.us if you haven't already, & asked to enter the post count for the month on a pop-up form.

As an additional incentive, this archive hack plays very nicely with the Blog Navigator, as long as you bookmark your archive page to del.icio.us at the beginning of the new month with a bogus post count, and then go back & correct the count at the end of the month.

Hope this helps (& I hope I explained it properly, Greg?). E-mail again if not...

<    >
Blogger Emily said...
I've been trying to install Freshtags, and am very excited about it. I have a small problem, The "Post" line is very long. Is there anyway to make it smaller, even if it does cut off long post titles?

I am not terrible savvy with this type of stuff but can follow directions.

This is amazing, I have been wanting to do this for ages, and I am so glad to finally have the opportunity to use it!

If you can be of any assistance, here is my blog:

Launch Exhaust

<    >
Blogger John said...
Emily,

Had the same problem myself a while back. Greg & Stephen both developed CSS for the stylesheet in your template head that will rein in the dropdowns and select boxes. Add

select { width: 10em; }

to your stylesheet, & change the number to suit your template.

For more, see Greg & Stephen's comments on another Freshblog post.

<    >
Blogger Emily said...
Thanks very much! It is working beautifully.

<    >
Blogger John said...
Ron,

You mean this one?

<    >
Blogger alto artist said...
Hi,

I've just set up FreshTags on my blog, as well, and I love it! Thank you for this great bit of code.
--aa.
http://onchanting.blogspot.com

<    >
Blogger alto artist said...
Hi again,

And thank you for the comment on my blog responding to the issue of FreshTags only appearing on the main page! In answer to your question, I don't see < MainPage > ... < /MainPage > tags in my template...what else could I be doing wrong?

I also just tried to set up an archive dropdown, and had problems with that as well...after I tagged all the archive pages, kept getting an error message in Blogger that said "No archive."

--aa.

<    >
Blogger Greg said...
Hello alto.artist,

That's a bit of a puzzler. Your post pages and your main/archives are different in that your post pages don't have FreshTags or archives associated with them. Usually that's achieved with the MainOrArchive tags - perhaps you could send me a copy of your template and I can have a look at it? Just copy'n'paste it from your Blogger edit template page into a text file and send it as a .txt attachment.

As for the archive thing, from what I can see you have correctly tagged the archives in delicious. I guess you saw John's post on FreshTags archiving! In your header, where you set FreshTags' parameters, try setting the archive variable to your archive's name:

archive = 'onchanting_archive';

That should do it.

OK, please send the template and let us know how the archives are going.

<    >
Blogger alto artist said...
Greg,
Thank you! The template file is on its way to you. And I will do what you suggest and, a little later, try to get that archive dropdown working. (I did see John's very helpful post!)

I really appreciate your help--
--aa.

<    >
Blogger alto artist said...
Hi again,

Alas, I still can't get the archive dropdpown to work. I added the variable in the header, hid the existing archive info as per the instructions in John's post, and added the new code in its place. I no longer get the "no archive" error message, but now nothing shows up at all. What could I be doing wrong?

--aa.

<    >
Blogger Hans said...
hi greg,

i use freshtags for a little while now and i am really pleased by it. thanks you guys.

now i would like to create a dropdown menu with categories for my links.

my plan was to use another anchor ('links' for example) and tag all my delicious links that i want to show up in my sidebar with 'links'.

how can i make two different freshtag dropdown menus, one with 'vtl' (for my postcategories) and the second with 'links' as anchor?

thx anyway

<    >
Blogger Hans said...
here's the blogurl:
http://www.verbodentelezen.be

<    >
Blogger Charmain said...
Hi there,

I'm going to have to ask a very silly question, so please don't shout at me...

Is it possible to customise the arrow button and scroll bar for the dropdown menu?

I've managed to change the colour of the text/background etc using CSS, but the usual codes to change the scrollbar don't seem to work. I've read somewhere that this isn't possible, and that the only way to go round it is to use Flash or Javascript, but I'm sort of a noob at this sort of thing and thought it best to ask the gurus.

Thanks! :-)

<    >
Blogger Greg said...
Hello,

Sorry for the delay in getting back to you all, but the FreshTags doctor[*] is now in and seeing patients.

@alto.artist. I'm sorry your FreshTags archives aren't working. I can't see the code for that anywhere on your blog. Certainly the archive variable in the header looks properly set. But the actual code snippet that goes in seems to be missing.

I'm still not seeing the FreshTags code appear in your sidebar for post pages either. I wonder if the same problem that eats your FreshTags code on post pages is responsible for eating the archives code on all pages? As I mentioned in my last email, could you please re-send your template as the last one was erroneously encoded? We'll get to the bottom of it yet!

@Hans. Yes, multiple tag listings is something I'm working on for the next release. In the mean time, you might be able to fudge it by getting FreshTags to reload with new parameters. So, leave things exactly as they are but add something like this to header of your template:

<script type="text/javascript>
// event handler codage via http://ecmanaut.blogspot.com
var then = window.onload || function(){};
window.onload = function(){ then(); reLoadFreshTags() };

function reLoadFreshTags()
{
del_user='my-username';
anchor='my-other-anchor';

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://del.icio.us/feeds/json/"+del_user+"/"+anchor+"?count=100&sort=freq&callback=doFreshTags";
document.getElementsByTagName("head")[0].appendChild(script);

return;
}

function doFreshTags()
{
var tagHTML = listTags("drop", 50, "Pick a Topic:", "");

var tagDiv=document.getElementById('link-tags');
if (tagHTML)
tagDiv.innerHTML = tagHTML;
else
tagDiv.innerHTML = '<b>No tags found</b>';

return;
}
</script>

Now, this code sets a function to run once the page has finished loading (ie normal FreshTags has finished). This function runs off to delicious to grab the new tags (with my-username and my-other-anchor). When it returns, it looks up a div with id="link-tags" and writes the appropriate HTML into it. So, you need to put this wherever you want the second tags (ie sidebar):

<div id="link-tags"></div>

These tags should look and behave as you expect, and you can set the parameters and styles as per usual. I haven't tested the above code, so I would expect there to be a bug or two. Please let me know how you get on!

@Charme. Well, I'm certainly not going to shout at you ... I may have the same first name and initial as TV's House, but that's where the similarity ends!

To do "normal" things to the scrollbar - size, colours, position - use CSS. FreshTags' elements have the class "showtags" and "showtitle" etc. So, you can use CSS commands (either inline or in your header):

<style>select.showtitle { width: 10em; height: 10em;} </style>

But it seems you're asking to style the way the browser draws its select menu widgets. This is, as my Scottish housemate says, beyond my ken. Each browser does its own thing.

If you don't like the drop down menu thingy in IE or FireFox, then you might be better off coding something up or 'finding' something on the web that inspires you enough to adapt it. I'm thinking that DHTML, DOM, CSS, JavaScript are good keywords to start with. If you do come up with a jaw-droppingly awesome liquid effect, fly-out, animated, multi-level, colour-coded, 3D hover-tree with alpha blending and voice-commands - then please let us know!

Well, I hope that clears the backlog.

Cheers,

-Greg.

[*] NB: I'm not a doctor. Although, I probably would have submitted my thesis by now if I weren't stuffing around with things like this :-)

<    >
Blogger Hans said...
hi, i just found a solution that pleases me, by putting some things together. (show/hide and delicious linkrolls). as you can see here. It's in dutch, so if you're interested what i am like, dont bother.

When i have some more time, i'll certainly try this script (my first steps in javascript, copypaste copypaste copypaste :) )

oh, and sorry to the people whose scripts i used in my site, if they would have put their names in the script, i would have given them credit.

<    >
Anonymous Anonymous said...
hi greg,

Thanks so much for coding up FreshTags! Just put them on my blog last night. Right now I have a tiny problem - my "Categories" title seems to be a URL link and I can't seem to find it the HTML source.

Might put up tags (as you commented) but right now it's too much info being repeated - link in del.icio.us and then same links in the blogger link fields. Will check out other hacks on your site to see if there are easier solutions.

<    >
Anonymous Anonymous said...
hi again,

does not seem to be working ??

I clicked on a category (say design) on this blog. I thought this will do the filtering and only shows posts (i.e. only 3 in this case) tagged with design. However, all the latests post are shown.

Am I missing something here??

<    >
Blogger Greg said...
Hi Kwoozy,

I think I see the problem - when you click on a category, it should list out underneath in the sidebar all the posts that match that category. (It will leave the rest of the page intact ie not change the main posts listed.)

But you need to use the code from the buildpage for that. Something like:

<script type="text/javascript">
titleHTML = listTitles("list", 20, "Please Select ...", "posts", "");
if (titleHTML)
document.write('<h2 class="sidebar-title">Posts</h2>' + titleHTML);
</script>

Hope this helps.

-Greg.

<    >
Anonymous Anonymous said...
Hi Greg,

Ah.. I see. I misunderstood what it was suppose to do. Thanks for that!
Will go fix it up now.

<    >
Blogger alto artist said...
Greg,

My apologies--I didn't get your email about the fact that you couldn't read my code! I will re-send right now.

--aa.

<    >
I finally decided to read more about FreshTags and decided to add them to my site.

I saw on the Fresh Tags site that you are considering the tag cloud. I'm all for that! Count me in.

Send me a link for the blogroll!

peace...
annie

<    >
Blogger John said...
Annie,

Welcome aboard. The blogroll code is in your inbox! Glad you're enjoying Freshtags.

<    >
Anonymous Anonymous said...
Hello! Just started using FreshTags. It's awesome! Keep up the good work guys!

<    >
Blogger Unknown said...
I've just implemented Freshtags at Adventures in Geocaching

<    >
Blogger Unknown said...
I've changed templates a million times, and I still go back and install this. It's that great!

I'm using it at http://thepersonaltaorist.blogspot.com

<    >
Blogger tamdoll said...
I am trying to get this to work & can't see my tags listed in my sidebar. Could someone help me?
Thanks alot.
Tamdoll@comcast.net
http://www.tamdoll.blogspot.com

<    >
Blogger B said...
Hi,

Thought I'd drop you a line to say how impressed I am with Freshtags. I have added it to my blog and it works very well indeed.

I particularly like the custom code feature.

Maybe one day blogger will actually perform tagging for us, but until then...

Keep up the good work on Freshblog too.

Bryan

<    >
Blogger John said...
Bryan,

Have added you to the blogroll... Great implementation w/ the 2 drop-down menus too.... Very cool.

<    >
Blogger Unknown said...
hi guys...

is there a way to customize the STYLE of these boxes/list, since the freshtags.js file cannot be modified. For example I just want the box to have black background and white text input.

<    >
Blogger Greg said...
Hi Jubinell,

You can use CSS to style FreshTags elements, since they all have a class associated with them automatically.

For example, the select box that lists out your tags is of class "showtag". You just need to add a rule to your stylesheet that applies to elements of that class.

-Greg.

<    >
Blogger Laurie said...
This is amazing. Thank you. One question... is there a way to make my "list" alphabetical, instead of an unordered list?

<    >
Blogger Greg said...
Sure, Laurie.

See this comment on alpha sorting.

-Greg.

<    >
Blogger Laurie said...
Thanks, Greg. I should have been able to figure that out, but I was excited about this new tool. The other very cool thing is, this fixed the problem that I was having where technorati was not picking up my updates no matter how much I pinged. So I'm a happy camper now.

<    >
Blogger Angel said...
I have tried freshtags...its not working and I cannot find any Support email, like with del.isio.us???
So I am leaving a comment#93, which unlikely will be read and will be buried in praise. Help! I am getting the 405 error: Method not allowed.

WHO DO I CONTACT FOR TECH SUPPORT?
Thanks

<    >
Blogger Angel said...
please help how to get around error 405, I cant get this to work...

<    >
Blogger Singpolyma said...
Just leaving a note for people on the New Blogger (ie, was Blogger BETA). This version of FreshTags does not like you there. I have an alternate version that does function on the New Blogger.

Sort of a plug, but just in case people are freaking out about it not working :)

<    >
Blogger Johan Sundström said...
I think Yahoo! Pipes might plug in nicely as the missing link to get FreshTags generic mode back in working condition again. Beep me if anyone would want to play with that; I'm working on a hack for browsing multiple del.icio.us users' bookmarks at the same time which would also benefit from getting that working. Probably isn't too much work either, I hope, going from either the HTML or RSS generic feed.

<    >
Blogger Greg said...
I haven't been checking this too often ...

Angel - I hope you found my response to your other comment okay. Basically, it repeats Singpolyma's plug above. Which I heartily endorse.

Johan - sounds very interesting. I've been using a string-and-tape generic mode on my homepage, converting the delicious RSS feed via Singpolyma's XOXOtools Ning app. For the past eight months or so you could only pass in one tag at a time. However, I notice now
you can do multiple tags.

Pipes thing sounds like a good way to go - are you planning on supporting tag/user intersections, unions or both?

<    >
Blogger Amit said...
Hi there,

I'd love to use FreshTags to create a drop-down list on my blog, but I don't have a delicious account.

I went to your freshtags website and when I fed in the information for Build, the code that I posted after the "head" tag in the new Blogger template gave me an XML parse error message.

Under "General", I left all fields blank since I don't have a delicious account, and under "default", I typed in "movie review" (w/o the quotes). When I added the code that was generated in the template, I got the error message.

Would you know if there is some incompatibility with the new blogger? Or am I doing something wrong?

Will appreciate some help, or if you can point me in the right direction.

Thanks a lot!!

-Amit

<    >
Blogger John said...
Amit,

Check out Singpolyma's Freshtags for New Blogger & see what you make of that...

<    >
I have had FreshTags on the back burner for too long. I am attempting to, once again, add it to blogger beta. Is it possible now?

When I try to put the first chunk of code in the <head> tag I get a message that reads:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "count" must end with the ';' delimiter.

So, I tried adding the semicolon in several locations after 'count' with no luck.

That is as far as I can get. I do miss my FreshTags.

<    >
Blogger Greg said...
Hi Annie,

Yes, the ol' FreshTags platform "retired" with the unreleased v0.6 targeted at Blogger Classic templates from about 12 months ago.

It features asynchronous fetching of tags and posts (no more reloads), peek-a-boo mode, tag clouds and (clumsy) integration with the New Blogger Platform.

(You can see it in action on The Speccy. Select tags, watch the posts reload and when you're done, hit the "View Posts" button to see all the posts with those tags.)

I'm afraid I've not looked into the way that Blogger does things with its new platform; development on that front is in the capable hands of Singpolyma.

-Greg.

<    >
Hi Greg! I will have another look at singpolyma's site. I tried it the other day, but couldn't get it to work. Maybe I'll try again!

<    >
Blogger Ngawang Tenphel said...
hi, I am trying to set up the freshtags on my blog www.montanhadourada.org but could not save the codes on to my blogger account template.

In the build page of freshtags it is said that the first html code should be put in "head" location of the template. But we have in the template differents "heads" at the template with different signs before and at the end of them.
Anyway I tried in both even been not sure wich one should be. In both it did not work. A message saying "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "count" must end with the ';' delimiter." appeared.
But looking at the code it seems that it is there the delimiter ";! after the reference "count" line. Strange. So what should be wrong? As this problem happens right at the beggining I could not even pass the first step html code.

My other question is about the other html codes. Do they need to be placed at the template html edit or they can be putted through the "add elements" page in the option of javascript element?

Thanks for any help
If would be better for you you, you can email me the help to montanha.dourada@gmail.com
Thanks!
Gabriel

<    >
Blogger Greg said...
Hi Gabriel,

If you want to integrate it into the "new" (getting old now) Blogger, I'd suggest checking out Singpolyma's implementation. It's designed to work with Blogger's XML-based code system.


eXTReMe Tracker