I read the other day how Yahoo was going to start supporting semantic web standards.
The semantic web is something that is often associated with Web 3.0 (if that’s what you want to call it!), and will allow greater data exchange, better and more targeted search, and generally open things up for a super mash-up. Take a look at Wikipedia’s definition of Web 3.0 for more info.
One of the formats that Yahoo will initially support is hAtom, which is a microformat especially for blog entries.
So, I thought I’d take a look at it and try and implement it in the BeardyGeek blog.
First Steps
To add an hAtom feed to your blog, all you need to do is add some class names to what are probably existing divs or spans in your blog template.
For example, if you have a div around your entire content that looks like this:
<div class=”content”>
you just need to add an extra class tag called hfeed:
<div class=”content hfeed”>
To have more than one class, just separate them with a space.
There are 3 more main tags that you need.
- hentry - the outer tag for each blog post
- entry-title - the tag for the post title
- entry-content - the tag for your post content
And that’s it. Easy as pie!
How I changed my Wordpress Theme
Ok, here’s what I changed in my theme.
Header page - At or near the bottom is a div tag - <div class=”content”> - I changed that to <div class=”content hfeed”>.
Single Post - I added the hentry tag to <div class=”post”> so it now read <div class=”post hentry”>. I then added entry-title to the <h2 class=”post-title”> so it read <h2 class=”post-title entry-title”>. And I also add entry-content to <div class=”postentry”> so it read <div class=”postentry entry-content”>.
Main index template - pretty much the same as the single post page, as the tags are all the same.
Testing
To test the feed, I downloaded Greasemonkey plugin for Firefox. I then downloaded the RSS Panel X script for Greasemonkey, which allows you to view a page’s feeds in a small JavaScript window. This is ideal for testing in this case as it supports hAtom.
Once you have these installed and running (tip: install the plugin first, then the script installs automatically), just load up your blog page. If all went according to plan, you should see your hAtom feed along with your RSS feed.
In fact, you can test it out here, as I have my hAtom feed up and running!
Good luck, let me know how you get on.
Related Posts
andymurd said
am March 19 2008 @ 5:43 pm
Great post - at last a practical recipe for the semantic web.
I’ll be updating my templates to reflect these changes soon AND hunting down any other microformats that might fit. You’ve inspired me.
Scott Brinker said
am March 20 2008 @ 4:06 pm
Great practical example for getting started with the semantic web. Thanks for posting — will keep an eye out for more!
Jonathan Briggs said
am March 22 2008 @ 9:42 am
Is this really “semantic” enough? I suppose that separating blog titles from blog posts might provide some insight into the meaning of a page but surely this is already achieved (by Google) by looking at titles and headlines compared with the rest of the text on a page?
Or am I missing something?
BeardyGeek said
am March 22 2008 @ 1:01 pm
@Jonathan:
While I was working out the hAtom tags I thought something similar. Ordinary RSS and atom feeds provide a similar level of seperation.
But when you think of hAtom as a small part of the microformat whole, it may lead better data search and retrieval.
To be honest, I tried it because Yahoo announced their support for it, and I like to tinker with new stuff!
Cheers
Stuart (BeardyGeek)
Christopher Flores said
am March 23 2008 @ 1:30 am
Wow … this is interesting. I told you you always put some weird interesting stuff that I don’t understand but really wanna get into.
I’m gonna be reading more on this
web semantica o 3.0, explicacion y herramientas | El caparazón said
am March 23 2008 @ 1:32 pm
[…] Para Wordpress: Cómo convertir tags a semánticos en tu blog […]
CircleReader said
am March 24 2008 @ 10:09 pm
Hi, GB!
I think more of this will be included in the workings of WordPress, so we non-techies-in-deep-technical-waters don’t have to think about it as much.
For example, XFN microformat is already part of WordPress; the WP themes from Plaintxt.org all use the hAtom microformats and more; and the highly skinable Sandbox theme is slated to be included in the WP Core as of version 2.6.
In addition there, there are a bunch of plugins that attempt to make using microformats easy for WP bloggers.
Planeta Web Semántica » Blog Archive » Entender la web semántica a través de las nuevas herramientas said
am May 11 2008 @ 12:52 pm
[…] Para Wordpress: Cómo convertir tags a semánticos en tu blog […]
links for 2008-06-03 « Nelson Piedra said
am June 3 2008 @ 2:36 pm
[…] Web 3.0 - How to Put Semantic Tags in your Blog | BeardyGeek.com To add an hAtom feed to your blog, all you need to do is add some class names to what are probably existing divs or spans in your blog template. (tags: blog blogging microformats semanticweb howto tag microformatos microformat websemantica semantic semantica) […]
links for 2008-06-03 « Eurlatam’s Weblog said
am June 3 2008 @ 3:06 pm
[…] Web 3.0 - How to Put Semantic Tags in your Blog | BeardyGeek.com To add an hAtom feed to your blog, all you need to do is add some class names to what are probably existing divs or spans in your blog template. (tags: blog blogging microformats semanticweb howto tag microformatos microformat websemantica semantic semantica) […]