Microformats have been a big hype among designers some months ago. It became a little quiet about Microformats lately, but they will be integrated in Firefox 3.0.
What are Microformats?
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
I bet so far, you still have no clue what Microformats are. That is exactly how I felt first time I read about Microformats and visited the Microformats page.
Built for humans. Huh?
Lets try to explain Microformats more humanly understandable [sic], or just blunter.
Microformats are a new data implementation for web sites. They allow you to integrate your vCard, or even your feed content immediately into your website. And many more.
For geeks the explanation is “adding semantics to markup to take it from machine readable to be machine understandable”.
So with microformats we tell machines and software what content we actually deliver in that specific part. Microformats could become a standard for templates and the semantic web. No discussion anymore about what class to use for an entry, its title and the entry meta. We just use the needed Microformats classes.
I can already see that this post is becoming like the Microformats documentation, documented in Kyle Neath’s entry at Warpspire, so lets just get on with the implementation. Discover how to implement Microformats in your design after the jump.
Implementing Microformats
Implementing Microformats in Wordpress theme’s is easy. k2 and The Sandbox Theme already come with Microformats. There are also several plugins already, but I will ignore them for this entry1.
So lets show how to implement Microformats in Chris Pearson’s Cutline, the theme my design is based on.
You only need to change some lines to implement Microformats, so even the coding newbie can easily do this.
Microformats in your entries and on your main page
For the entries we only need to add some classes to the theme files.
- hfeed
- hentry
- entry-title2
- author (together with vcard and fn)
- entry-content
Open both index.php and single.php in your favorite editor such as Notepad++.
Now you only have to add the new Microformats classes to the code of the Cutline design anymore. In the following screenshot (click the thumbnail for the full-size view) you can see the changed lines with Microformats underlined. The screenshot is from the single.php file. Apply the same changes (obviously the line numbers will change) to the index.php file.
If you want to know how Microformats on your blog are read by machines install the Tails Export, Firefox add-on or views the screenshots of all microformat objects on the mainpage, all blog entries found on the mainpage, a single entry exported in/read out by Tails for Firefox and all the commenters for that particular entry.
As you can see Microformats, more specific hAtom specifications can serve as feed. And exactly this is what we just build in, a new feed export (and some geeky uber-semantic code) for our blog.
Microformats will influence your Google ranking
Let me finish this entry with a stand : In a near future, Microformats will influence your Google ranking.
Today everyone should know that a valid design is preferred by Google. Microformats make the code and structure of a page readable to machine, also for the Googlebot. Expect an improved ranking for the early adopter.
Visit the Microformats page for more info on Microformats.
1 I prefer to implement the classes immediately in the theme because there is no need to create supplementary sql queries for some classes. Immediate implementation in the theme also prevents problems with Wordpress upgrades.
2 Entry Title is not compulsary.
21 have made me smarter ↓
1 kitsimons // Jan 25, 2007 at 2:19 pm// View all comments by kitsimons//
+0
I remember thinking the same thing when I read the Microformats about page all those months ago;
“Yeah. So wtf are they?”
2 Franky // Jan 25, 2007 at 4:22 pm// View all comments by Franky//
+0
Semantics for machines that is what they are. :D
And I firmly believe Google will pick up on Microformats. Because that is exactly what they were meant to do or didn’t I understand anything about Microformats? *scratches head*
3 Joefish // Jan 26, 2007 at 7:14 pm// View all comments by Joefish//
+0
4 Joefish // Jan 26, 2007 at 7:15 pm// View all comments by Joefish//
+0
Hey, I left a huge comment that’s not appearing. Check your spambox please?
5 Franky // Jan 26, 2007 at 8:45 pm// View all comments by Franky//
+0
6 Franky // Jan 26, 2007 at 9:04 pm// View all comments by Franky//
+0
Oh fu(k. Get post_time obviously doesn’t work because of the T specification.
This is another debate I am having with myself. Microformats cool, but do we really need another feed standard? Can’t we just use pubdate just to pick A standard?
7 Joefish // Jan 26, 2007 at 9:10 pm// View all comments by Joefish//
+0
Hmm. XFN. That’s an interesting idea. It probably wouldn’t be too difficult to implement that. If a commenter is your friend or colleague, and they’re leaving a URL, then you probably already have them blogrolled. It should be easy enough to retrieve that XFN info from the db and attach it to the comment.
I’ve been seriously looking at OpenID lately. I might implement that sometime in the near future.
8 Franky // Jan 26, 2007 at 9:25 pm// View all comments by Franky//
+0
I think right at the moment openID is closest to SSO. Or totally not, but at least to such a thing as single identity for multiple-blog authors.
I have been considering openID as well, but since there already is a spoof I let the idea go again. At least for the time being until I will create the page where I aggregate everything I write on different (non profesional) websites.
Exactly that was the idea I had for the XFN implementation. And actually together with Microformats (read : when one has to fiddle with the code anyway) would be a perfect occasion to implement it. I actually can’t see any other use anyway. Dammit, one more FF extension?
9 Joefish // Jan 26, 2007 at 9:42 pm// View all comments by Joefish//
+0
Ah, drat. I didn’t know there was already a spoof for OpenID. Never mind then, I guess.
At this point, the only practical use I can see for XFN is CSS presentation. Maybe something like a little icon for coworkers or family or what not. I suppose it’s also feasible to create an FF extension or user script to present a list of XFN tags on a page, but I don’t see that as a big deal.
10 Franky // Jan 26, 2007 at 9:46 pm// View all comments by Franky//
+0
Isn’t there already such a thing as happy pals for XFN?
11 Joefish // Jan 26, 2007 at 9:57 pm// View all comments by Joefish//
+0
Yes, there certainly is. But straight out of the box Happy Pals only filters “the_content”
I’m sure it could be tweaked to filter any number of things, but as long as you’re recoding comment author links anyway…
12 Franky // Jan 26, 2007 at 10:44 pm// View all comments by Franky//
+0
Ugh, Yeah! As if this blog needs one more visual eye sore!?!?
13 Franky // Jan 26, 2007 at 10:53 pm// View all comments by Franky//
+0
And actually,this entry was already drafted since I switched to this this design. And wanted to clean up my drafts some days ago. :P
14 Joefish // Jan 26, 2007 at 10:59 pm// View all comments by Joefish//
+0
Tasteful, Franky, tasteful. I said “CSS presentation.” I didn’t say you should make it neon orange with blinkies.
15 Franky // Jan 26, 2007 at 11:07 pm// View all comments by Franky//
+0
Six weeks did it take. Six weeks did my new screen stay clean.
Thanks for the RedBull Vodka spillage… on the screen!
16 Joefish // Jan 26, 2007 at 11:10 pm// View all comments by Joefish//
+0
;-)
17 Franky // Jan 26, 2007 at 11:13 pm// View all comments by Franky//
+0
Funniest is your third comment here at AIFN was on happy pals. :)
18 Joefish // Jan 26, 2007 at 11:18 pm// View all comments by Joefish//
+0
I remember that. I thought “didn’t we talk about this here?” heh.
19 Franky // Jan 26, 2007 at 11:34 pm// View all comments by Franky//
+0
You mean something like this?
.happy_pals {
font-size: 2.0em;
text-decoration: blink;
padding: 2px 5px;
color: #719F00;
border: dashed 1 px #FFFF00;
background: #FF9900;
}
.happy_pals :after {
content: url('images/crush-smiley-heartbeat.gif');
}
At least keep the code clean. :D
20 Joefish // Jan 26, 2007 at 11:43 pm// View all comments by Joefish//
+0
Wow, that is all kinds of ugly.
Yeah, that should match your theme nicely. ;)
21 iMissed The Hype, Vent Once More // Apr 17, 2007 at 7:33 pm// View all comments by iMissed The Hype, Vent Once More//
+0
[…] you to do, and you’ll be rewarded appropriately.Sometimes you might have to ditch in some more energy […]