I wrote previously about incorporating an hAtom microformat feed into Textpattern. I’m now going to expound on this topic by showing you how Textpattern is perfectly set up to utilize the hReview microformat. For a visual reference to what I’m going to show you how to do please see this review I wrote: The Weakerthans – Reconstruction Site.
An overview of hReview
The purpose of hReview, as per the book Microformats, is to
. . . provide a standardized format for publishing reviews and . . . “enable and encourage the sharing, distribution, syndication, and aggregation, of reviews.”
There is currently a wide array of review sites on the Internet already. Amazon, Insider Pages, Epinions, Zagat, Yahoo Local and IMDb to name a few. None of these sites markup their reviews the same way. hReview seeks to standardize the reviewing process.
I maintain that reviews on personal blogs represents one of the least-utilized sources for product opinion on the Net. As the old mantra goes, if you can’t think of anything to blog about, write a good review of something. We need more reviews. Thus, we need a way to markup our reviews so they’re easily found.
How microformats work (dummy edition)
Microformats are not complicated or only for the elite. Microformats, in a nutshell, are just specific classes applied to any HTML tag in your code.
Every microformat needs what is called a “Root Element.” A Root Element is an HTML tag, with a certain class being applied to it, that contains the rest of the microformatting.
So, microformats are basically just classes applied to HTML tags. That’s it. Easy.
How to incorporate hReview
hReview requires two things: the Root Element and the Item. There are other optional parts to hReview but let’s just cover the required parts for now.
Root Element
The Root Element is a class of “hreview”. It’s wise to put this root element into a <div> tag like this:
<div class="hreview">
. . . hReview data goes here . . .
</div>
We write the Root Element as a <div> tag because <div> is a block-level element. As opposed to something like <span> which is an inline element. To put it simply, we do this because while you can put an inline element within an block-level element, you CANNOT put a block-level element within an inline element. While we very well could write <span class="hreview"></span> we would then be limiting ourselves to using only inline elements within the <span>. Got that? Good.
Now, everything else, every other class that’s applied to our hReview, is going to be put inside this Root Element. That’s important to remember. All parts of our hReview must go within our hReview Root Element.
Item
Ok, so now we’ve got the Root Element. Let’s add in the Item. This is the only required part of our hReview. The Item should be unique identifying information about whatever is being reviewed. Ideally the Item should include a name and an URL for the item you’re reviewing.
For the Item we need to include a class of item and a class of fn url inside it somewhere. The way I coded my site it looks something like this:
<span class="item">
<a href="http://websiteaddress.com" class="fn url">Name of the item being reviewed</a>
</span>
Easy, right? Good.
Optional parts of hReview
There are only two required parts of hReview: the Root Element and the Item. But there are several other parts we can include to make our hReview more detailed. Here are the fields I use on openswitch.
Version
This field specifies the version of hReview that is used to markup the text. At the time of this writing the most current version is 0.3. The markup can look something like this:
<div class="hreview">hReview version: <span class="version">0.3</span></div>
Summary
This field does what it says. It’s a concise summary of the review. The markup can look something like this:
<div class="hreview"><h2 class="summary">Summary text goes here</h2></div>
Now, the summary class can be applied to ANY HTML element, it doesn’t have to be an h2 tag. It can be a <span>, a <div>, a <p> and so on.
Type
This field is used to define the type of item being reviewed. There is a limited number of options for Type:
- product
- business
- event
- person
- place
- website
- url
Most of my reviews are of the product type. So my markup can look something like this:
<div class="hreview">Review type: <span class="type">product</span></div>
Rating
I use this field in my hReview markup. It does what it says. The markup can look something like this:
<div class="hreview">Rating: <span class="rating">4</span>/5</div>
dtreviewed
The date on which something is reviewed. This is usually the same as the post entry date. The markup can look something like this:
<div class="hreview">Date reviewed: <abbr title="10061118" class="dtreviewed">November 18, 2006</abbr></div>
Other optional fields
Other optional fields that I have opted to not include in my site can be found here. They include Reviewer, Description, Tags, and License. I may be missing some, but that’s what I could find.
How to accomplish this in Textpattern
As I said earlier, Textpattern is perfectly, if not unintentionally, set up to make implementing hReview a breeze.
Step 1: Create a new category
First, we need to create a category called, “review”. This will be used to call the hReview custom fields only when a post is actually a review.
Step 2: Create some custom fields
Second, we need to create some custom fields in Admin>Preferences>Advanced:
- review-item
- review-item-url
- review-rating
- review-summary
Step 3: Edit your default form
Now we only want the hReview information to show up when the article is actually a review, right? So we’re going to edit our default form and add in a conditional tag. Here’s a simplified version of my default form. Pay attention to the if_article_category tags.
<div class="hentry <txp:if_article_category name="review">hreview</txp:if_article_category>"> <!-- here's my Root Element -->
<h3 class="entry-title"><a href="<txp:permlink />" rel="bookmark"><txp:title /></a></h3>
<div class="entry-date"><abbr class="updated published" title="<txp:posted format="%Y%m%d" />"><txp:posted /></abbr></div>
<div class="entry-content">
<!-- Begin hReview data -->
<txp:if_article_category name="review">
<span class="item">Item: <a class="fn url" href="<txp:custom_field name="review-item-url" />"><txp:custom_field name="review-item"/></a></span>
<br />
Rating: <abbr title="<txp:custom_field name="review-rating" />" class="rating"><txp:custom_field name="review-rating" /></abbr>/5
<br />
Summary: <span class="summary"><txp:custom_field name="review-summary" /></span>
<span class="type">product</span>
<span><abbr title="<txp:posted format="%Y%m%d" />" class="dtreviewed"><txp:posted /></abbr></span>
<br />
hReview version: <span class="versions">0.3</span>
</txp:if_article_category>
<!-- End hReview data -->
<txp:body />
</div>
</div>
Do you see what I did there? Now, this is somewhat unorthodox to implement hReview in this way. I gather from the microformats site that the spirit of hReview is to add in the markup as part of the content. Instead, what I’ve done for simplicity’s sake is separated the hReview data out of the regular content. As far as I can tell this method does not nullify the effectiveness of the hReview but it does, at worst, go against the spirit of microformats.
Step 4: Write reviews
So now the process of adding hReview to your reviews is fairly automated. When you write a review on your Textpattern blog just be sure to do two things:
- put the article into the “review” category
- fill in the custom fields you just created
If you have any questions or need further explanation please don’t hesitate to ask. I may not spoon-feed you, but I will do my best to point you in the right direction.