WordPress

Doing this in WordPress is dead simple. Just open up wp-includes/bookmark-template.php and make the following changes. I prefer to download the files here and make edits with jEdit :)

// Line 6
'show_images' => 1, 'before' => '<li>',

// Change to
'show_images' => 1, 'before' => '<li class="vcard">',

// Line 48 or something similar ;)
$output .= '<a href="' . $the_link . '"' . $rel . $title . $target. '>';

// Change to
$output .= '<a class="fn url" href="' . $the_link . '"' . $rel . $title . $target. '>';

You could use the WP Microformatted Blogroll plugin for WordPress, but I like this much better because it looks like it can’t be used by a dynamic sidebar and maybe I just like to code ok?

Blogger

For Blogger you are going to need to edit your template HTML, and make sure you check the Expand Widget Templates checkbox. About 4/5ths of the way down you should see a code block like this:

<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
  <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <li><a expr:href='data:link.target'><data:link.name/></a></li>
        </b:loop>
      </ul>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

You just need to edit the list items in the loop to add <li class=’vcard’ and <a class=’fn url’ like so:

<ul>
  <b:loop values='data:links' var='link'>
    <li class='vcard'><a class='fn url' expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
</ul>

However, to add XFN as well you will have to remove the loop and create the <li> tags yourself. You can find out more about XFN here.

<ul>
  <li class="vcard">
    <a class="fn url" href="http://davidwalsh.name" rel="friend">David Walsh</a>
  </li>
  <li class="vcard">
    <a class="fn url" href="http://casedogdesigns.com" rel="friend colleague met">Casey Watson</a>
  </li>
</ul>

That’s all! Easy, right? What other ways have you incorporated microformats into your website or blog? Stay tuned for more simple ways you can jazz up your blog with microformats!

Related posts:

1. What are microformats and why do you care?
2. How to add JavaFX to SyntaxHighlighter
3. Javascript: Measure those “em”s for your layout

What are Microformats

According to microformats.org:

Microformats are small bits of HTML that represent things like people, events, tags etc. in web pages.

These small bits of Semantic HTML will allow website viewers to interact with websites in many more ways.
For example:

• The link to my name on the right is an hCard microformat that allows you to add me as a contact through many services (even as a vCard in Microsoft Outlook or Mozilla Thunderbird).
• Google Maps allows you to add businesses as contacts or bookmarks using hCard microformats and I suspect there will also be geocoding microformats used as well. Maybe they are even there now but I can’t detect them.
• Upcoming.org, recently changed to upcoming.yahoo.com, uses hCalendar microformats for its event system. You will be able to integrate this into your favorite calendar application (Sunbird, Google Calendar).
• See those labels at the bottom of this post? Microformats can make these slightly more useful by integrating with your favorite services that use tagging for organization. Perhaps Technorati could automatically tag this blog post with HTML and microformats so users can more easily find relevant content.
• The new WWW is the social WWW. A whole new layer to this exciting giant social network of a planet will could be added by the XFN (XHTML Friends Network) microformats. I imagine it is not too far off until something like LinkedIn creates human networks with these babies. The Blogroll on your right is a good example. You can also add these guys to contact management services.
• There are many more microformats in draft (hResume, hAtom, adr, and more as of this writing). Keep up to date by watching Microformats Wiki Main Page.

You might ask, Eric what can I do? Can I help? Fear not dear reader, there is plenty you can do right now to prepare for the future:

• If you use Firefox, get the Operator Add-on and convince yourself that these things are really, really cool.
• If you have a blog or website, start using some microformats. Steal some of my code and do it. Be a pioneer (First you need to make your website POSH.
• Spread the word. Blog about microformats or trackback to this one.
• If you are fluent in another language, help translate the microformats.org wiki pages. They need your help to get the message into other languages.

Why you should care

Notice at this point that I have not answered the “Why do you care” question. I think that Semantic HTML is going to play a major part in the future of web development. Semantic HTML encourages better design, scalability, and accessibility. On top of that, many open web services will be able to capitalize (maybe too much?) on the metadata we provide through microformats. As with many technologies, it will be ignored or explode, and right now I am guessing the latter. It is best to be informed so that you can capitalize if opportunity presents itself.

What do you think? Is this exciting to you? Let me hear it in the comments!

Related posts:

1. Microformats: Add hCard to your blogroll in 2 minutes flat
2. Introducing GroovyRTM: A Groovier way to Remember The Milk
3. How to highlight search results with JavaScript and CSS