Anne van Kesteren

Putting rel="bookmark" to work

It should be clear that this function only adds extra support to browser which have a correct interpretation of the DOM and fully support the possibilities of the link element. Enjoy!

As Tantek has recommended the world of webloggers is now using rel="bookmark" to specify a permalink. It could look like this: 

<a href="http://site.ext/archives/post_title/" rel="bookmark">Permalink!</a>

I think it's great, it adds semantic to you permalinks, but I wanted to use this in my advance and making it useful to users instead of just adding some semantics. To say it in more detail: I wanted a list of all the items available selectable from a list. Since Mozilla supports the link element completely (including the link-type bookmark, actually it supports every link-type you can come up with :)) it was obvious to use this. I first thought of generating it with PHP, but then I hadn't any other reason to add rel="bookmark" to the a element then for semantics (and I didn't wanted to dive into the core code of Nucleus).

So I started to think about other web technologies. I ended up with JavaScript and the DOM. And when I knew exactly what I wanted I started scripting and after a minute of twenty it was finished. This little piece of JavaScript should be placed external and then you are done (yes it that easy). The solution: 

function bookmarkLinks(){
 var a = document.getElementById("content").getElementsByTagName("a");
  for(i=0; i<a.length; i++){
   if(a[i].getAttribute("rel") == "bookmark"){
    var linkelement = createElement("link");
    linkelement.setAttribute("rel","bookmark");
    linkelement.setAttribute("href",a[i].getAttribute("href"));
    linkelement.setAttribute("title",a[i].getAttribute("title"));
    document.getElementsByTagName("head")[0].appendChild(linkelement);
   }
  } 
}

First it selects all a element within the content section of my site. I did this, 'cause my calendar also uses rel="bookmark" and I didn't want these to show up. After that we check all these a elements one by one and check if they've got a rel attribute with the (link-type) value of bookmark. If the element has this value a link element is created with the createElement function (it is also in my source code if the link doesn't work anymore).

After that the attributes are set and the new created link element is added to the head element. This is function should be called when the document loads. I hope it can be of use to you, it certainly is for me :).

Comments

  1. verdomme anne, here's me thinking that I'd finished my site. Now I've got to add the link tags as wel. Forgot that it even existed for other things other than style sheets.

    Never mind, a site is never finished anyway. BTW. Which other browser, besides Mozilla (gecko), uses the link tag?

    Posted by Egor Kloos aka Dutchcelt at

  2. I know for a fact that Opera 7+ partly supports some predefined link tags and will show you an alternative navigation bar if one or more of these are present. Mozilla (and I presume Firebird as well) will do the same, but aren't as picky as Opera. Any relation that they don't recognise will be placed in "More > [SomeName]". But they know more predefined tags in the first place and therefore it is ideal to test your relational links.

    Oh, and no swearing! ;)

    Posted by Bas Hamar de la Brethonière at