Comme pour les autres microformats, xfn tente d’établir des relations en étendant xhtml grâce à l’utilisation d’attributs dont les valeurs sont définies pour chacun des microformats.

L’attribut rel de l’élément a

Je prendrais pour l’exemple le blog de Jean Cormon : En ligne... incidences sur le réseau.

Voici un lien classique pointant vers son blog :

<a href="http://www.cormon.net/">Jean Cormon : En ligne... incidences sur le réseau.</a>

xfn propose de rajouter l’attribut rel à votre élément a. Cet attribut accepte plusieurs valeurs que xfn recommande pour pouvoir l’utiliser. Ces attributs vont permettre de d’indiquer les relations que vous entretenez avec la cible du lien, elles s’appliquent à sites de personnes. En voici les plus courantes :

Quelques valeurs de l’attribut rel dans xfn

xfn	Traduction
acquaintance	connaissance
co-resident	collocataire
co-worker	camarade de travail
colleague	collègue
contact	contact
friend	ami
met	rencontré dans la vie

Le lien précédent auquel on applique les relations entretenues, à savoir que Jean est un ami (friend) et que je l’ai déjà rencontré (met) :

<a href="http://www.cormon.net/" rel="friend met">Jean Cormon : En ligne... incidences sur le réseau.</a>

Traduire par une icône le type de relation

Quelques icones sont disponibles sur Microformats icons. Avec une règle CSS on peut afficher par exemple l’icône symbolisant nos relations :

Avec lien vers le blog Jean Cormon : En ligne... incidences sur le réseau..

La règle css permettant l’ajout de cette icône utilise un sélecteur d’attribut et un pseudo-element et génère du contenu (une image) qui n’est donc pas dans le code html de votre page, c’est juste visuel et ne fonctionne pas sur Internet Explorer, mais sur la plupart des navigateurs un peu éclairés. Quelques exemples :

a[rel="friend"]:after {content:url(pictos/xfn-friend.png);} a[rel="friend met"]:after, a[rel="friend met neighbor"]:after {content:url(pictos/xfn-friend-met.png);}

A vous d’établir les règles css suivant toutes les relations possibles qui existent ;-)

Quelques exemples sur la page annuaire de ce site.

Intégration à SPIP de xfn dans une liste de lien

Au préalable vous devez créer un groupe de mots clés avec les différentes valeurs de l’attribut rel que vous souhaitez. Nommez le par exemple xfn et notez le numéro du groupe. Dans ce site c’est le groupe 9.

Il s’agit d’une boucle MOTS dans une boucle SITES qui va permettre d’extraire les mots clés du groupe xfn pour le site en question. Soit la boucle suivante :

<B_annuaire> <ul> <BOUCLE_annuaire(SITES){id_rubrique}{par nom_site}> <li><a href="#URL_SITE" <B_xfn>rel="<BOUCLE_xfn(MOTS){id_syndic}{id_groupe=9}{" "}{par titre}>#TITRE</BOUCLE_xfn>"</B_xfn>>#NOM_SITE</a> </li> </BOUCLE_annuaire> </ul> </B_annuaire>

La boucle _xfn récupère les mots clés du site référencé du groupe de mots clé numéro 9. On ajoute une espace entre la liste des mots qui seront générés dans l’attribut rel. On tri par titre les mots, çà facilite les choses pour rédiger les règles css.

Ne reste plus qu’à rajouter les styles correspondants dans votre feuille de style :-)

En conclusion

Il existe quelques extensions qui permettent d’extraire des relations de type xfn. Pour les utilisateurs de Firefox vous pouvez essayer un script Greasemonkay ou l’extension Tails. Je crois qu’il existe également de tels mécanismes pour Safari, mais je n’est jamais tester.

A consulter également les outils sur le site xfn.