Des tags XFBML qui passent la validation W3C

articles & tutoriels

Des tags XFBML qui passent la validation W3C

Vous venez d'intégrer un widget Facebook® à votre site, mais c'est le drame : vos pages ne sont plus valides W3C. Ce tutoriel vous explique comment donner l'illusion au validateur que votre page respecte les standards.

L'astuce est de charger les balises XFBML après le chargement de la page. Comment ? En utilisant Javascript et plus particulièrement la librairie jQuery. En effet, seuls les navigateurs peuvent exécuter Javascript. Les parseurs W3C ou les robots des moteurs de recherche n'en sont pas encore capables. Le code source renvoyé par le serveur (sans XFBML, donc valide XHTML) sera parsé par le script du W3C, tandis que le code généré (avec XFBML, non valide) sera exécuté par le navigateur client.

jQuery l'API de connexion Facebook®

Récupérer la dernière version de la librairie jQuery ainsi que l'API de connexion Facebook® et les inclure dans votre balise <head>.

<head>
	<script type="text/javascript" src="scripts/carousel/jquery-1.4.4.js"></script>
	<script type="text/javascript" src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script>
</head>

La fonction magique

Contenu du fichier fakeXFBML.js, à inclure de la même façon que les fichiers précédents dans la balise <head>, entre jQuery et l'API Facebook® :

(function($){
	$.fn.fakeXFBML = function( fb_tag , params ){
		var container = $(this);
		params = params || {};
		fb_tag = $("<fb:" + fb_tag + "></fb:" + fb_tag + ">");
		$.each(params, function( key , value ) {
			fb_tag.attr( key , value );
		});
		fb_tag.appendTo(container);
	};
})(jQuery);

Préparation de la page

Ajouter xmlns:fb="http://www.facebook.com/2008/fbml" à la balise <html>, de cette façon :

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Ajouter un <div> à la page, pour contenir votre objet XFBML.

<div id="fb_like"></div>

Appel de la fonction

Après ce <div>, appeler la fonction jQuery :

<script type="text/javascript">$("#fb_like").fakeXFBML("like", {"layout":"box_count"});</script>

Ce code appelle une Like Box identique à celle visible en haut à droite de cette page. Le type de widget est défini par le premier paramètre de la fonction (ici like), pouvant être modifié par ses attributs (ici layout) et leurs valeurs (ici box_count). Voici un autre exemple d'appel avec plusieurs attributs, séparés par une virgule.

<script type="text/javascript">$("#fb_like").fakeXFBML("like", {"layout":"box_count", "href":"http://www.vincentrobic.com"});</script>

Pour chaque objet XFBML, on doit avoir un nouveau conteneur et une ligne d'appel du script jQuery.

Voici la ligne d'appel générique de la fonction, ainsi que la liste des paramètres disponibles et leurs valeurs possibles. Consulter la documentation officielle Facebook® pour plus d'informations.

$("#your_div").fakeXFBML( widget:string, attributs:object );

Tableau des paramètres

Widget : string	Attributs : object
like	href, layout:standard\|button_count\|box_count, show_faces, width, action, font, colorscheme, ref:fb_ref\|fb_source
like-box	href, width, height, colorscheme, stream, header
activity	site, width, height, header, colorscheme, font, border_color, recommendations, filter, ref
login-button	show-faces, width, max-rows, perms
recommendations	site, width, height, header, colorscheme, font, border_color, filter, ref
live-stream	event_app_id, width, height, xid, via_url, always_post_to_friends
facepile	href, app_id, max_rows, width
comments	numposts, width, publish_feed

Tiré d'un article de Zsolt Takács, 30/01/2011.

vincentrobic.com
webmaster

articles & tutoriels