Eric Wendelin's Blog

As a supporter of microformats, I want to provide you some amazingly easy ways to add them to your blog. To kick this off, I’m going to tell you how you can turn your WordPress or Blogger blogroll into a list of hCards in less than 2 minutes!

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 href="http://davidwalsh.name" class="fn url" rel="friend" onclick="javascript:pageTracker._trackPageview ('/outbound/davidwalsh.name');">David Walsh</a>
  </li>
  <li class="vcard">
    <a href="http://casedogdesigns.com" class="fn url" rel="friend colleague met" onclick="javascript:pageTracker._trackPageview ('/outbound/casedogdesigns.com');">Casey Watson</a>
  </li>
</ul>

That’s all! Easy, no? 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!

Popularity: 3% [?]