Trucs à savoir sur les iframes dans Facebook

C'est annoncé, et il me semble que c'est pour demain, le FBML va disparaître aussi bien pour les applications Facebook que pour les onglets de fan pages.
C'est une bonne chose parce que ce langage était un peu lourd et pas hyper optimisé. Les iframes apportent énormément de libertés tout en étant beaucoup plus simples d'accès pour le commun des gens qui veulent mettre en place un onglet sans rentrer dans la technique : un chouilla de HTML et hop !

Bon, ça c'est la théorie, en pratique il y a quand même quelques trucs et astuces à savoir, à tester et à découvrir pour que l'expérience utilisateur soit optimale. en voilà une première liste dans un désordre complet d'après mes premières expériences :

Évitez les formulaires en Flash !

Je travaille fréquemment en Flash, et j'aime ça. On ne pourra donc pas me taxer d'anti-Flash.
Toutefois un gros bug, traîné depuis des années, empêche les SWF inclus en wmode transparent ou opaque dans des iframes de récupérer la touche "Alt Gr" - à droite de la barre d'espace - sur FireFox. Eh oui, ça veut dire qu'il n'est pas possible de taper un simple '@' ce qui est ballot pour récupérer l'email d'un utilisateur, non ?

Et n'allez pas croire que l'excellent FirefoxWmodeFix vous aidera, non car l'évènement clavier n'est même pas envoyé, c'est un autre bug que ça en fait.

Je vous vois là, vous marrer parce qu'il suffirait de passer le wmode en window, mais non, que nenni : les popin de facebook - pour l'autorisation, le partage, les invitations amis - doivent s'afficher par dessus le Flash, or dans ce mode ce n'est pas le cas : c'est le flash qui est tout le temps devant. C'est un truc bien connu de tous ceux qui mélangent fréquemment Flash et HTML. Et l'ouverture de ces fenêtres en popup est très aléatoire avec les popup-blockers capricieux - genre celui de ce fucking Safari que tous mes clients sur Mac utilisent.

Conclusion ? Utiliser Flash - en attendant que HTML 5 devienne utilisable pour le grand public - pour les parties jeu/vidéo/animations et du HTML pour les formulaire.

Attention aux sessions !

Non, je ne vais pas vous empêcher d'utiliser les sessions, quoi que, mais voilà pour résumer votre site est affiché dans une iframe - ça vous l'aviez compris - il est donc hébergé sur votre serveur, avec votre nom de domaine et affiché sur le site Facebook.
Or beaucoup de navigateurs sont configurés par défaut pour refuser les cookies venant de sites tiers à celui visité.

Le système de sessions de PHP est intelligent : il permet de modifier à la volée, dans le HTML, les liens et les attributs action de la balise <form> pour intégrer la variable PHPSESSID et ainsi garder les données de session d'une page à l'autre. Toutefois si vous utilisez de l'Ajax ou bien du Flash pour vos données, il faudra absolument passer cette variable manuellement à chaque requête serveur qui le nécessitera !

Sinon vous pouvez prévenir vos visiteurs pour leur demander de changer leur configuration... c'est moins efficace à mon avis.

Comment j'affiche une page spécifique aux non-fans parce que je ne les aime pas ?

Et je vous comprends. C'est aussi valable pour savoir si votre page HTML est bien appelée depuis votre fan page et non par un squatteur d'application sans vergogne (je n'ai jamais vu ce cas encore mais je ne doute pas de la folie des hommes). Pour cela on va utiliser PHP parce que !

Il faut récupérer les informations de base de votre application : l'app ID et l'app Secret. En fait seule cette dernière va vous être utile. L'autre élément utile est envoyé automatiquement par Facebook lors de l'appel à la page et se trouve dans le collecteur $_REQUEST (ne me demandez pas si c'est dans $_GET ou dans $_POST, j'ai arrêté de les utiliser depuis des années) et s'appelle signed_request.

Une fonction PHP - en fait 2 mais on s'en fout -  hyper utile a été postée sur les forums développeurs de Facebook :

function parse_signed_request($signed_request, $secret) {
  list($encoded_sig, $payload) = explode('.', $signed_request, 2);
  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);
  if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
    error_log('Unknown algorithm. Expected HMAC-SHA256');
    return null;
  }
  // check sig
  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }
  return $data;
}
function base64_url_decode($input) {
  return base64_decode(strtr($input, '-_', '+/'));
}

En utilisant cette fonction avec notre signed_request et notre App Secret, nous allons récupérer un tableau d'informations (ex. $mesInfos), incluant un autre tableau dans l'index 'page'. Et c'est dans $mesInfos['page'] donc que nous allons trouver :

	["page"]=> array(3) {
		["id"]=> string(15) "l'id de la page qui appelle"
		["liked"]=> bool(false)
		["admin"]=> bool(true)
	}

Et voilà, vous pouvez maintenant vérifier si la personne vient bien de votre fan page, si elle l'aime d'un amour véritable, et même si elle est admin de la page (pour les tests, ça peut être très utile).

Éviter ces bordel de merde d'ascenseurs... de merde

Vous allez le repérer vite lorsque vous allez vouloir mettre en place votre contenu, et surtout s'il est trop long, des ascenseurs disgracieux vont apparaître comme les comédons sur un visage adolescent.

Bon, de mon coté j'ai choisi de sortir les grands moyens pour y remédier. Il est possible que seuls quelques une de ces solutions soient nécessaires mais en mettant tout en place, ce n'est pas hyper compliqué, vous serez sur d'y parvenir.

1/ Limiter la largeur : 520 de large qu'ils disent ? Je serais vous je compterais plus sur du 518, voir 515px pour être sur.

2/ spécifier la largeur dans les CSS. Pour cela il faut appliquer quelques valeurs sur les conteneurs principaux : html et body.

html,body{
	width:518px;
	margin:0; padding:0; border:0;
	overflow-x: hidden;
}

Voilà, comme ça on s'assure de la largeur, on enlève les marges et tout ce qui pourrait manger le contenu, et enfin on désactive l'ascenseur horizontal.

C'est déjà ça de pris. Mais reste l'ascenseur vertical. Selon les navigateur il doit prendre à vue de nez près de 15px sur votre contenu et c'est relou.

3/ On va demander à Facebook d'adapter son Canvas à notre contenu. et pour cela ils ont pensé à une fonction, il faudra donc intégrer le Javascript SDK de Facebook. Normalement il ne faudrait ne l’appeler qu'une fois. Comme j'ai eu des soucis avec une page qui changeait de taille sur certaines actions, j'ai choisi de l’appeler régulièrement. Ça doit pourvoir facilement s'optimiser, je suis preneur de conseils à ce sujet.

Voici un exemple avec jQuery et un conteneur principal dans lequel je place tout ce que j'ai (mes bas de laine, tout ce qui traine, ce que j'ai sué de mon front... bref toussa quoi)

<div id="mainContainer">
<p>kikoo, lol, izi, tavu</p>
</div>
<script src="http://connect.facebook.net/fr_FR/all.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		setInterval ( function(){
			FB.Canvas.setSize({ width: 520, height: $("#mainContainer").outerHeight() + 50 });
		}, 200 );
	})
</script>

À noter :

• Il faut mettre le div#fb-root avant d'inclure le Facebook JS SDK, sinon ça plante, par contre le jQuery peut être dans le <head> si vous le souhaitez.
• Il est possible de ralentir le temps d'appel du setInterval si 200 c'est trop.

Voilà, ça fait déjà une bonne première fournée, et je pense qu'il y en aura d'autres. Ce que je peux en conclure c'est qu'ils commencent à s'approcher un système vraiment efficace, en espérant que ça continue... et qu'ils fassent une vraie doc, enfin. Mais je ne rêve pas. ;)