Twitter bookmarklet tip: associate a name with a web page

Twitter’s Share Bookmarklet tweets the URL of the current page. This post explains how to automatically add a Twitter name to the default tweet text.

The result

If you add one HTML tag to your web page, the initial text presented by the bookmarklet will look as follows:

title-of-page url-of-page via @my-twitter-name

Everything after and including “via” is because of the HTML tag. You can try it out by using the bookmarklet on 2ality pages. Example result:

Eight words not to use in your Twitter bio http://www.2ality.com/2011/08/twitter-bio-words.html via @2ality

The HTML to add: rel=me

The rel=me attribute allows one to mark several pages as being about the same entity. For example, I could put the following tag into the head of 2ality pages to say that the pages and @2ality on Twitter are about the same thing.

    <link href='http://twitter.com/2ality' rel='me'>

It usually makes sense to link in the opposite direction, too – from a Twitter profile page to a website. The Microformats Wiki has more information on rel=me.

Variations:

• Looser association of the Twitter account: If you don’t see a website as being the equivalent of your Twitter account, but still would like to tell the bookmarklet about it, you can use the weaker “twitter me” instead of “me”. “Weaker” means that many tools will ignore the reference (if the are unaware of the convention) or treat it as secondary (if the are aware of it). For the bookmarklet, the important thing is that the attribute value ends with “me”.

      <link href='http://twitter.com/2ality' rel='twitter me'>
  

• Associate via a link in the body. You can also add the rel attribute to an a tag in the body (instead of a link tag in the head).

      <a href='http://twitter.com/2ality' rel='twitter me'>@2ality</a>