In May of this year I wrote about the problems of URLs for a given Twitter user’s profile, or for an individual post or “status” being different, depending the Twitter client in use. I suggested a new protocol for Twitter links. [You might want to read that, before the rest of this post]. I can’t believe I didn’t think of this simpler solution sooner!
The answer (in the short term) is to use a microformat (or a microformat-like “poshsformat”, if you prefer to call it that) for each case. Let’s say we use the classes twitter-user & twitter-status.
User-agents (that’s jargon for browsers) could then employ a script (such as those used by GreaseMonkey, or a Firefox extension) to ignore the encoded URL and substitute the equivalent for the user’s preferred Twitter client instead.
For links to user profiles:
<a
href="http://twitter.com/pigsonthewing">
Andy Mabbett
</a>
would become:
<a
class="twitter-user"
href= "http://twitter.com/pigsonthewing">
Andy Mabbett
</a>
and:
<a
href="http://accessibletwitter.com/app/user.php?uid=pigsonthewing">
Andy Mabbett</a>
would become:
<a
class="twitter-user"
href=" http://accessibletwitter.com/app/user.php?uid=pigsonthewing">
Andy Mabbett</a>
Likewise, for individual statuses:
<a
href="twitter.com/pigsonthewing/status/1828036334">
something witty</a>
would become:
<a
class="twitter-status"
href="twitter.com/pigsonthewing/status/1828036334">
something wittyg<a>
and:
<a
href="accessibletwitter.com/app/status.php?1828036334">
something witty<a>
would become:
<a
class="twitter-status"
href="accessibletwitter.com/app/status.php?1828036334">
something witty<a>
and:
<a
href="m.slandr.net/single.php?id=1828036334"
something witty</a>
would become:
<a
class="twitter-status"
href="m.slandr.net/single.php?id=1828036334">
something witty</a>
To simplify matters, the rules for extracting the user ID or the status update could be the same in both cases:
- Parse the value of the href attribute of the element to which the class applies.
- If there is a question mark, use everything after that.
- Otherwise, if there is an equals sign, use everything after that.
- Otherwise, use everything after the last slash.
That would deal with all the examples in my earlier post.
So, if you’re using a user-agent which is aware of this microformat, and find on a page:
<a
class="twitter-user"
href="http://twitter.com/pigsonthewing">
Andy Mabbett<a>
said
<a
class="twitter-status"
href="m.slandr.net/single.php?id=1828036334">
something witty<a>
but your preferred Twitter client is Dabr (one I recommend, BTW!) then your browser would treat (and possibly render) that as:
<a
href="dabr.co.uk/user/pigsonthewing">
Andy Mabbett<a>
said
<a
class="twitter-status"
href="dabr.co.uk/status/1828036334">
something witty<a>
Simples!
Pingback: Dennis Lembrée (dennisl) « Twitter: A microformat in lieu of a protocol « Mabblog « Chat Catcher
Hey Andy,
Great idea! I wrote a Jetpack to do what you have described: http://jetpackgallery.mozillalabs.com/jetpacks/169 it adds a menu item to Firefox’s ‘Tools’ menu where you can easily enable/disable it.
Enjoy, I know I will.
Erik
I just wrote a userscript to add these microformats to all twitter profile & status links for the twitter.com domain (not performed when you are at twitter.com) @ http://userscripts.org/scripts/show/62975
Those are fantastic contributions Eric, thank you.
Here are some test cases: http://pigsonthewing.org.uk/twitter-microformat
I tested the Jetpack out on those test cases thanks for making that.
I was also thinking about making a class for status updates because of a Jetpack I am going to make. I’m not sure if there are any other use cases though, I think that other twitter clients probably have a status update page too, so the links to say
twitter.com?status=Example%20Page%20http://tr.im/...can be changed to use another twitter client.How does twitter-update sound to you?
E
I like the idea in principle, but after reading
http://www.codinghorror.com/blog/archives/001314.html
I can’t help but think that using something other than a class attribute would be a better idea. It is plausible that someone would have a “twitter-status” class in their existing page, so giving special meaning to that class could break a lot of sites.
The “rel” or even “data-” attributes would seem to be better choices for this kind of markup. Otherwise, I like the proposal.
@haxney: The CodingHorror post has been widely discredited. Its criticisms of microformats are based on a number of false premises, not least a failure to understand the purpose of HTML classes (not, as it calls them, “CSS classes”).
Do you have any evidence that “a lot” of sites currently use class=“twitter-status” ?
There is no data- attribute in valid HTML 4.01 as currently used on many sites.
The rel atttribute describes the relatonship between documents. Can you explain how you think that would apply, in these cases?
I wasn’t aware that the CodingHorror post was considered harmful (discredited). It does seem to make sense, though, that using HTML classes could clash with CSS classes in the site’s styles.
I certainly don’t think that a lot of sites would use those classes, but there are probably some (I would imagine) that do. If the site is well-designed, then it shouldn’t be too hard to change the classes so they don’t clash. If it is reasonably possible to avoid having to do that, I think it would be preferrable to have these attributes in a separate namespace.
You’re absolutely right about “rel=”, it wouldn’t be a good match for what you’re going for. As for “data-“, it is a proposed set of attributes for HTML5, with the idea being that you could use a ‘data-twitter=”foo”‘ attribute in your markup and the browser would ignore it for anything presentational (but could use DOM methods to get its value). I don’t know what the current status is for data attributes, but I think that most browsers will behave as expected (ignore it for layout, but make the value avalilable through the DOM).
That said, I think the HTML class-based way of doing it is probably the best we can do now, even if it’s not the technical ideal.