Archive for September, 2006

WidgetData is the new settings system that makes FreshTags-Singpolyma2 tick. It is a standard way of storing data for JavaScript widgets, so that they can share data and be less likely to have namespace conflicts with each other. It is by no means set in stone, however this post will be a brief description of the system, and how it is used in FreshTags.

The basic WidgetData system is a JSON object stored in var WidgetData in the global JavaScript scope of a page with the following basic structure:

{
‘Widget-System’:{
‘XHTML-block-ID’:{
//widget data
}
}
}

Where Widget-System is the name of the system that should render this widget (ie, ‘freshtags’) and XHTML-block-ID is the DOM ID of an XHTML block the widget will be rendered into (ie, ‘freshtags_tags’).

As Used in FreshTags
In the FreshTags WidgetData setup, there are certain standard fields on each block (all the fields here discussed are assumed to be on the JSON object at WidgetData[‘freshtags’][‘XHTML-block-id’]).

type – Tells FreshTags what kind of widget this is. Currently three types are supported: tags (a tag list), posts (a list of posts, either associated with a particular tag list or not), and external (a reserved type that simply tells FreshTags not to render this widget automatically).

tag_list – posts/external widgets only, tells FreshTags that this widget is linked to the tags widget whose id is tag_list.

source – Tells FreshTags what service to pull the data from. On tags widgets the only currently legal value (and the default value) is ‘del.icio.us’. On posts (and external which are to act like posts) widgets this may be ‘del.icio.us’ (default), ‘wordpress’ (pull data from a FreshTags for WordPress enabled blog), or ‘feed’. Posts/external widgets which are linked to a tags widget will default to the same source as the tags widget.

username – the username to give the service when extracting data (currently only valid on del.icio.us source). Posts/external widgets which are linked to a tags widget will default to the same username as the tags widget.

anchor – The anchor tag to use when drawing in posts.

format – The format to render widget in (such as ‘drop’ or ‘drop-add’, may also be an @-separated cust_html string, an array of the type produced by the FreshTags switch, or a function that takes the widget ID and renders it to a string which it returns).

rows – Maximum number of posts/tags to display.

feedurl – The URL to the feed for post data (to use if there is no other post data, or if source==feed)

url – posts/external widgets with source==wordpress only. The URL to the WordPress blog’s main page.

FreshTags is a context-based navigation system based on tags. The most current ‘official’ version is v0.5 as seen on FreshBlog. I have also run my own version as a contribution to the effort. With the advent of Blogger BETA, the original purpose of adding categories to Blogger is gone and now the emphasis is on the tag passing, etc. Complaints have been abundant that neither version of FreshTags would work properly on the BETA. This milestone upgrade in my version aims to both fix that problem, as well as give FreshTags the boost it needs for future growth.

The script is hosted in the same entry on JScripts, and is 100% backwards-compatible with my previous version. To use it forwards-compatably, however, requires a considerably different setup, therefore I am re-authoring the basic instructions post here, and the old one shall be ‘deprecated’ (with a link here). There are many customisation options and different ways things can be done for FreshTags, especially with the new system. In this post I will cover some basics. Later posts will cover more functionality, and links to those posts will be added here.

Basic Installation for ‘Classic’ FreshTags Functionality
To install this version of FreshTags so that it works about the same as the original FreshTags (as it runs on FreshBlog), you will need this code:

Advanced users will note that this JavaScript does not have the needed commented CDATA section for XML well-formedness. This is because of an issue with Blogger BETA. If you are on a classic blog, feel free to add it in (as I have), but since no special characters are likely to be used in this particular piece of JavaScript code, it doesn’t matter much.

Replace Delicious Username with your del.icio.us username and Anchor Tag (optional) with your del.icio.us anchor tag (or blank for none). The ‘format’:’drop’ may be set to list, flat, drop, drop-add, drop-add-async, or any other legal format string from my previous version.

To install this on a Blogger Classic blog, add the entire code into your blog template at the place where you want the tag list and post list to appear.

To install this on a Blogger BETA blog, create a new HTML/JavaScript widget, set the title to whatever you want, and place the entire code in the body, then save.

‘Fake Post’ functionality
To install this version so that it uses a ‘fake post’ to display tags, as my original did, add this line to the end of the ‘//tag widget’ section:

My original version also used the drop-add format, so if you want to mimic that behaviour exactly you must change the format line as well.
(Note: for this to work you will have to have a post entitled Tags, dated January 1, 2000 with the code <div id=”freshtags_postpage”></div>)

Labels page (BETA only)
To install this version so that it uses the Blogger BETA labels page for display, add this code to the end of the ‘//tag widget’ section:

It is important to note that, except for the sidebar, the display on this page is generated by Blogger and not by FreshTags. This breaks tag-passing a little bit. In the next minor revision I will add code to append the ?tags=TAGS to the link URL on any links that have rel=”bookmark” on them (the microformats standard for permalinks).

To turn off autocapture of tags from rel=tag data on any of these, add this code to the end of the ‘//tag widget’ section:

One thing you’re probably wondering is if this will work with the BETA labels with no del.icio.us account. No. That may be coming, but I can’t promise anything yet. Does the peek-a-boo sidebar, etc still exist? Yes, but this post is long enough, so I will write another article explaining all that soon.

If you go to a wrink page (for example, the Blogger Hacks Wrink), you will note a third code option. FreshRolls are currently only available in JavaScript (no PHP yet). You can select what blog to exclude (or none), just as on the normal roll output, and whether this code is to be used in conjuction with ring code or not (more on that in a bit). The code is then a simple JavaScript include, as with standard rolls, that you place where you want the FreshRoll to appear.

FreshRolls attempt to detect tags and ‘passed tags’, just like FreshTags. If it finds some, it will display only those blogs which match the tag(s) found, otherwise it will normally display the entire roll. If, however, you told it you would be using it with a ring, it will not display a roll title and if no tags are detected will output none of the roll.

What is this ‘combo-mode’ useful for? Well, if you paste standard ring code followed directly by FreshRoll code set to ‘combo-mode’, if tags are detected the matching blogs will be displayed following the ring, otherwise you just see the ring. I have set it up this way in my sidebar. You can test it by appending ?tags=blogger to this page’s URL and reloading.

Blogger BETA compatible : Just create a new HTML/JavaScript widget on your BETA blog and cut-n-paste in the code(s) from Wrinks.

This is the first Blogger BETA custom template based on my Singpolyma Templates. This will not be a final version because it still has some slight bugs, but I would like feedback from users before I make any changes. You can preview the new template at my BETA blog. The spirit and look of the original basic template has been ported to the new widget system, and all fonts and colours can also be edited from the new panel for that purpose. Minor known issues are:

Not even close to XHTML compliant. This is not my fault. There are significant JavaScript sections on Blogger BETA that are malformed XML and thus break any sort of compliance. I’ve written support, but I doubt that will do any good. We need to find a way to put serious pressure on them to correct this. The new template system is in XML, make XML-well-formed output (and perhaps even XHTML-compliant output) has never been easier, and yet so far away. The changes they would have to make are minor (like, adding commented CDATA sections around the JavaScript). I don’t see a thing about it on Known Issues.

Ditto to peek-a-boo comments. This is a limitation in the BETA as far as I can see… I really hope they can be persuaded to fix this.

The pre-included blogroll is XOXO compliant, but has fewer features as the manually-created ones did (ie, no option for feed data).

No link to main comments feed (it doesn’t seem to be generating, I believe this is a known BETA issue…)

The profile section supports both single and group blogs, unlike the original which assumed a single-authorship blog. I could also add previous/next links on item pages and a labels sidebar widget if people want it. Versions with my other hacks (as before) will be forthcoming.

To install this template on your blog, cut-n-paste the template from here into the ‘Edit HTML’ view on your BETA blog, click ‘Save’, and if you are asked to confirm the deletion of existing widgets click the affirmative option. Then you can add/edit widgets or change the colours!

Since I did all the research on this yesterday to get it working, I figured I’d share it with the world in case someone else is having problems with it too! These instructions assume Ubuntu, but should work on pretty much any Linux system with minor modifications.

1) You must have a GStreamer player installed. Totem (the defaul GNOME movie player/media player) is what I used because it was already installed.
2) Install gstreamer0.10-plugins-bad with Synaptic
3) Go to MPlayer and download the binary codecs for Linux. Unpack the file into either the /usr/lib/win32/ directory or the /usr/lib/codecs directory (depending on your system, I put it in both to be safe).
5) Install gstreamer0.10-pitfdll with Synaptic (if available) or get it from a mirror.
4) Install gstreamer0.10-plugins-ugly with Synaptic

That should be it! You should now be able to listen to Internet radio stations in the Windows Media format.