Making Microformats More Visible - Announcing The XFN Highlighter Script
UPDATE: The script now uses regular expressions. This fixes the problem where it translated met to me.
You’ve heard BillG say that we need Microformats. Do you catch yourself asking But Why?
Good question. Right now the Microformats movement is dealing with a bit of a chicken-egg problem due to a lack of tool support. Without tools to make microformat creation simple for content publishers and to make microformats more usable and visible to content consumers, it is difficult to see the point of the effort. The effort / reward scale is currently tipped heavily towards the effort side.
That may soon change as Microformats start taking over the web. In preparation for an article I am writing on the topic, I have been doing some thinking and reading up on Microformats. I won’t spoil the article by discussing Microformats in much detail here, but instead will highlight one microformat and my effort to make it more visible.
Do not reinvent the wheel!
Remember, Microformats are not about trying to reinvent the wheel. In
fact, it is a key principle of the Microformat philosophy to build on
what already exists. For example, even before microformats there was an
initiative called XFN (or XHTML Friends Network). The idea is to add
semantic information to web links in the form of the
rel attribute to
This existing format has been adopted as a microformat. When linking to
a friend’s blog or website, for example, you might add the following
<a href="https://haacked.com/" rel="friend met">...
This incidentally creates a network that is indexed by XFN crawler. But how does the average visitor to your site even notice this? Unless they view source, they won’t. This sort of goes against the Microformat principle of focusing on humans first and machines second. Better tools are needed to highlight interesting microformats to end users.
So let’s expose our friends
Note that this script is a bit rough around the edges
(for example, I
need to replace . I slapped it
together quickly one evening and there are many improvements that could
be made. But the current version works well enough and I figure it is
time to share it so I can generate some feedback (hopefully!).
indexOf with regular expressions)
A few friends and acquaintances
How to Use
2. Include the XFNHighlighter CSS file (or cut and paste these styles into your own stylesheet).
<link rel="stylesheet" href="css/XFNHighlighter.css" type="text/css" media="screen" />
3. The CSS references an image friends.png in the images directory. Make sure that image exists or change the CSS to point to an appropriate image. This image is placed next to the link.
1. Add an appropriate
rel="value" when linking to a friend or
acquaintance. Check out the list of relationships from the XFN
Grab the files (neatly organized) from here.