[uf-discuss] Twitter implementation issues

[Glenn Jones]

The guys at Twitter have done a great job of adding microformats to
their site. Like everyone else in the developer world I love building
twitter mash-ups, (the new hello world) but I like to use microformats
as my API. Unfortunately there are one or two small issue with the
Twitter implementation. So I have fired off a email to their support,
but have no heard back yet. I thought I may be able to reach them
through the list. May be you work for Twitter and known the right person
to forward this to.

Below I documented some problems and made some suggestions on how they
could be easily fixed. They are just suggestions.  

I already have a couple of Twitter integrations demo's for this year's
SXSWi Microformats panel, I would love to increase what I could show.

Thanks

Glenn Jones



Implementation issues:

On the status pages ie http://twitter.com/glennjones. There are a couple
of things that are stopping the status hEntry on twitter from parsing
correctly. Also there are a number issues with the hCard which
represents the user on the page.


A) 
The first is that the status text is wrapped in "entry-content" class,
but there is no "entry-title". Unfortunately the "entry-title" is
mandatory where "entry-content" is not. This is why the Firefox plug-in
Operator is saying that entries mark-up is invalid.

Incorrect: 
    <span class="entry-content">Weekend procrastination starts
here.</span>

So you could change the element holding the text to have a class of
    <span class="entry-title">Weekend procrastination starts
here.</span>

Or use both classes on the element
    <span class="entry-content entry-title ">Weekend procrastination
starts here.</span>




B)
Secondly the "updated" property is required where as "published" is not,
for completeness I would suggest using both. Most if not all
Microformats parsers will only take the ISO date information from a
title attribute of an abbr tag. So if you recode the element as follows
we should be able to parse the date correctly.

Incorrect: 
      <span class="published" title="2009-01-31T13:55:33+00:00">17
minutes ago</span>

to
      <abbr class="published updated"
title="2009-01-31T13:55:33+00:00">17 minutes ago</abbr>



C)
The first is that a number of html elements contain in the hCard use the
class "label" for styling which is used in the hCard schema so the
parsers pick up the wrong information. These class names should be
changed. 




D)
On the individuals status page i.e. http://twitter.com/glennjones

By adding the class "note" the bio will be added to the parsed
information.

Current: 
      <span class="bio">Web designer and developer</span>

to suggestion
      <span class="bio note">Web designer and developer</span>

There are a couple really useful bits of information that could be part
of the hCard which are on another part of the page ie photo and
username. Microformats provide a include pattern to deal with this
issue. It uses an object to point to a fragment of html on the page
which should be also included.

      <ul class="about vcard entry-author">
      <li><span class="label-style">Name</span> <span class="fn">Glenn
Jones</span></li>
      <li><span class="label-style ">Location</span> < span
class="label">Brighton</span></li>
      <li><span class="label-style ">Web</span> 
      <a href="http://www.glennjones.net/" class="url" rel="me
nofollow">http://www.glennj...</a></li>
      <li id="bio"><span class="label-style">Bio</span> <span class="bio
note">Web designer and developer</span></li>
          <object style="display:none" data="#thumb" class="include"
type="text/html" height="1" width="1"></object>
      </ul>

.... elsewhere on the page

      <h2 id="thumb" >
      <a href="/account/profile_image/glennjones">
      <img class="photo" alt="" border="0" height="73"
id="profile-image" src="Twitter-Images/square-160_bigger.jpg"
valign="middle" width="73" /></a>
      <span class="nickname">glennjones</span>
      </h2>

I added the "photo" class to the img of the user and put a new span
around the username and marked it up with the "nickname" class. The
object needs to styled with displa:none to deal with a Safari rendering
issue.

The "adr" is not working in the current mark-up. As the address details
are not structured I would suggest using the label class instead . The
"label" class is a formatted version of a postal address (a string with
embedded line breaks, punctuation, etc.). So combination like Brighton,
UK or Austin, TX can be placed in the label property.



E)
It may be worth considering adding hEntries to the statuses listed by
the search.
http://search.twitter.com/