Incorporating hAtom into Textpattern

microformats logo In an effort to 1) bring this site up to speed and 2) learn a new skill set which will be of significant value to clients, I’ve incorporated the hAtom microformat into openswitch. w00t!

hAtom is simply this: the site feed is contained within the actual posts themselves. This is opposed to a separate feed such as openswitch.org/rss. It’s pretty cool stuff.

Microformats is a quickly developing trend on the Net which everyone involved in web design should be watching closely. But, this is old news. Chances are you’ve already heard of Microformats, if not used it yourself, so I’m not going to go evangelical on you now. What I will do is show you how I marked up my Textpattern posts with hAtom so they’re machine readable.

Here’s what I did, the process is really simple. I went and edited the form which is used when the &#60;txp:article /&#62; tag is called in a given page. In my case it’s the default form that I edited.

As per the specifications in the book Microformats — which Chris Harrison graciously gave to me — I marked up my default form like this:

&#38;#60;div class=&#38;#34;hentry&#38;#34;&#38;#62;
&#38;#60;h3 class=&#38;#34;entry-title&#38;#34;&#38;#62;&#38;#60;a href=&#38;#34;&#38;#60;txp:permlink /&#38;#62;&#38;#34; rel=&#38;#34;bookmark&#38;#34;&#38;#62;&#38;#60;txp:title /&#38;#62;&#38;#60;/a&#38;#62;&#38;#60;/h3&#38;#62;
&#38;#60;div class=&#38;#34;entry-date&#38;#34;&#38;#62;&#38;#60;abbr class=&#38;#34;updated published&#38;#34; title=&#38;#34;&#38;#60;txp:posted format=&#38;#34;%Y%m%d&#38;#34; /&#38;#62;&#38;#34;&#38;#62;&#38;#60;txp:posted /&#38;#62;&#38;#60;/abbr&#38;#62;&#38;#60;/div&#38;#62;
&#38;#60;div class=&#38;#34;entry-content&#38;#34;&#38;#62;
&#38;#60;txp:body /&#38;#62;
&#38;#60;/div&#38;#62;
&#38;#60;div class=&#38;#34;comments-invite&#38;#34;&#38;#62;
&#38;#60;txp:comments_invite /&#38;#62;
&#38;#60;/div&#38;#62;
&#38;#60;div class=&#38;#34;cats&#38;#34;&#38;#62;
Filed under: &#38;#60;txp:category1 link=&#38;#34;1&#38;#34; section=&#38;#34;journal&#38;#34; /&#38;#62;
&#38;#60;/div&#38;#62;
&#38;#60;span class=&#38;#34;vcard author&#38;#34;&#38;#62;&#38;#60;a href=&#38;#34;http://openswitch.org&#38;#34; rel=&#38;#34;me&#38;#34; class=&#38;#34;fn url&#38;#34;&#38;#62;&#38;#60;txp:author /&#38;#62;&#38;#60;/a&#38;#62;&#38;#60;/span&#38;#62;
&#38;#60;/div&#38;#62;

I’ve added in some spacing so you can see the divisions within the markup.

In order to write hAtom into your markup correctly you need four elements: the Root Element, the Entry-Title, the Updated/Published, and the Author.

The root element is this:

&#38;#60;div class=&#38;#34;hfeed&#38;#34;&#38;#62;
&#38;#60;div class=&#38;#34;hentry&#38;#34;&#38;#62;

Note that the hfeed class only has to be present once per page. Then the hentry class has to be wrapped around each individual post.

The entry title is written as an h3 tag:

&#38;#60;h3 class=&#38;#34;entry-title&#38;#34;&#38;#62;&#38;#60;txp:title /&#38;#62;&#38;#60;/h3&#38;#62;

The updated/published element is a combination of two microformats: the published date and the last updated date. But since with a blog these dates are (usually) the same it’s OK to combine them:

&#38;#60;abbr class=&#38;#34;updated published&#38;#34; title=&#38;#34;&#38;#60;txp:posted format=&#38;#34;%Y%m%d&#38;#34; /&#38;#62;&#38;#34;&#38;#62;&#38;#60;txp:posted /&#38;#62;&#38;#60;/abbr&#38;#62;

The author element is included in all my posts but you’ll never see it unless you view the page source because it’s set to display:none; in the CSS:

&#38;#60;span class=&#38;#34;vcard author&#38;#34;&#38;#62;&#38;#60;a href=&#38;#34;http://openswitch.org&#38;#34; rel=&#38;#34;me&#38;#34; class=&#38;#34;fn url&#38;#34;&#38;#62;&#38;#60;txp:author /&#38;#62;&#38;#60;/a&#38;#62;&#38;#60;/span&#38;#62;

So that’s it. Now, if you’re running Textpattern you need to go implement hAtom into your blog.

openswitch

Incorporating hAtom Into Textpattern

Post a Comment

Archives

Search