{"id":149,"date":"2011-03-09T23:59:05","date_gmt":"2011-03-09T21:59:05","guid":{"rendered":"http:\/\/www.davel.fr\/techblog\/?p=149"},"modified":"2011-03-10T00:12:31","modified_gmt":"2011-03-09T22:12:31","slug":"trucs-a-savoir-sur-les-iframes-dans-facebook","status":"publish","type":"post","link":"https:\/\/www.davel.fr\/techblog\/2011\/03\/trucs-a-savoir-sur-les-iframes-dans-facebook\/","title":{"rendered":"Trucs \u00e0 savoir sur les iframes dans Facebook"},"content":{"rendered":"

C'est annonc\u00e9, et il me semble que c'est pour demain, le FBML va dispara\u00eetre aussi bien pour les applications Facebook que pour les onglets de fan pages.
\nC'est une bonne chose parce que ce langage \u00e9tait un peu lourd et pas hyper optimis\u00e9. Les iframes apportent \u00e9norm\u00e9ment de libert\u00e9s tout en \u00e9tant beaucoup plus simples d'acc\u00e8s pour le commun des gens qui veulent mettre en place un onglet sans rentrer dans la technique : un chouilla de HTML et hop !<\/p>\n

Bon, \u00e7a c'est la th\u00e9orie, en pratique il y a quand m\u00eame quelques trucs et astuces \u00e0 savoir, \u00e0 tester et \u00e0 d\u00e9couvrir pour que l'exp\u00e9rience utilisateur soit optimale. en voil\u00e0 une premi\u00e8re liste dans un d\u00e9sordre complet d'apr\u00e8s mes premi\u00e8res exp\u00e9riences :<\/p>\n

<\/p>\n

\u00c9vitez les formulaires en Flash !<\/h3>\n

Je travaille fr\u00e9quemment en Flash, et j'aime \u00e7a. On ne pourra donc pas me taxer d'anti-Flash.
\nToutefois un gros bug, tra\u00een\u00e9 depuis des ann\u00e9es, emp\u00eache les SWF inclus en wmode<\/strong> transparent<\/em> ou opaque<\/em> dans des iframes de r\u00e9cup\u00e9rer la touche \"Alt Gr\" - \u00e0 droite de la barre d'espace - sur FireFox. Eh oui, \u00e7a veut dire qu'il n'est pas possible de taper un simple '@' ce qui est ballot pour r\u00e9cup\u00e9rer l'email d'un utilisateur, non ?<\/p>\n

Et n'allez pas croire que l'excellent\u00a0FirefoxWmodeFix<\/a> vous aidera, non car l'\u00e9v\u00e8nement clavier n'est m\u00eame pas envoy\u00e9, c'est un autre bug que \u00e7a en fait.<\/p>\n

Je vous vois l\u00e0, vous marrer parce qu'il suffirait de passer le wmode<\/strong> en window<\/em>, 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\u00e9langent fr\u00e9quemment Flash et HTML. Et l'ouverture de ces fen\u00eatres en popup est tr\u00e8s al\u00e9atoire avec les popup-blockers capricieux - genre celui de ce fucking Safari que tous mes clients sur Mac utilisent.<\/p>\n

Conclusion ? Utiliser Flash - en attendant que HTML 5 devienne utilisable pour le grand public - pour les parties jeu\/vid\u00e9o\/animations et du HTML pour les formulaire.<\/p>\n

Attention aux sessions !<\/h3>\n

Non, je ne vais pas vous emp\u00eacher d'utiliser les sessions, quoi que, mais voil\u00e0 pour r\u00e9sumer votre site est affich\u00e9 dans une iframe - \u00e7a vous l'aviez compris - il est donc h\u00e9berg\u00e9 sur votre serveur, avec votre nom de domaine et affich\u00e9 sur le site Facebook.
\nOr beaucoup de navigateurs sont configur\u00e9s par d\u00e9faut pour refuser les cookies venant de sites tiers \u00e0 celui visit\u00e9.<\/p>\n

Le\u00a0syst\u00e8me\u00a0de sessions de PHP est intelligent : il permet de modifier \u00e0 la vol\u00e9e, dans le HTML, les liens et les attributs action<\/em> de la balise <form><\/strong> pour int\u00e9grer la variable\u00a0PHPSESSID<\/em> et ainsi garder les donn\u00e9es de session d'une page \u00e0 l'autre. Toutefois si vous utilisez de l'Ajax ou bien du Flash pour vos donn\u00e9es, il faudra absolument passer cette variable manuellement \u00e0 chaque\u00a0requ\u00eate\u00a0serveur qui le n\u00e9cessitera !<\/p>\n

Sinon vous pouvez pr\u00e9venir vos visiteurs pour leur demander de changer leur configuration... c'est moins efficace \u00e0 mon avis.<\/p>\n

Comment j'affiche une page sp\u00e9cifique aux non-fans parce que je ne les aime pas ?<\/h3>\n

Et je vous comprends. C'est aussi valable pour savoir si votre page HTML est bien\u00a0appel\u00e9e\u00a0depuis 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 !<\/p>\n

Il faut r\u00e9cup\u00e9rer les informations de base de votre application : l'app ID et l'app Secret. En fait seule cette derni\u00e8re va vous \u00eatre utile. L'autre \u00e9l\u00e9ment utile est envoy\u00e9 automatiquement par Facebook lors de l'appel \u00e0 la page et se trouve dans le collecteur $_REQUEST (ne me demandez pas si c'est dans $_GET ou dans $_POST, j'ai arr\u00eat\u00e9 de les utiliser depuis des ann\u00e9es) et s'appelle signed_request<\/em>.<\/p>\n

Une fonction\u00a0PHP\u00a0- en fait 2 mais on s'en fout - \u00a0hyper utile a \u00e9t\u00e9 post\u00e9e sur les forums d\u00e9veloppeurs de Facebook<\/a> :<\/p>\n

function parse_signed_request($signed_request, $secret) {\r\n  list($encoded_sig, $payload) = explode('.', $signed_request, 2);\r\n  \/\/ decode the data\r\n  $sig = base64_url_decode($encoded_sig);\r\n  $data = json_decode(base64_url_decode($payload), true);\r\n  if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {\r\n    error_log('Unknown algorithm. Expected HMAC-SHA256');\r\n    return null;\r\n  }\r\n  \/\/ check sig\r\n  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);\r\n  if ($sig !== $expected_sig) {\r\n    error_log('Bad Signed JSON signature!');\r\n    return null;\r\n  }\r\n  return $data;\r\n}\r\nfunction base64_url_decode($input) {\r\n  return base64_decode(strtr($input, '-_', '+\/'));\r\n}<\/pre>\n
En utilisant cette fonction avec notre signed_request et notre App Secret, nous allons r\u00e9cup\u00e9rer un tableau d'informations (ex. $mesInfos), incluant un autre tableau dans l'index 'page<\/em>'. Et c'est dans $mesInfos['page'] donc que nous allons trouver :<\/p>\n
\t[\"page\"]=> array(3) {\r\n\t\t[\"id\"]=> string(15) \"l'id de la page qui appelle\"\r\n\t\t[\"liked\"]=> bool(false)\r\n\t\t[\"admin\"]=> bool(true)\r\n\t}<\/pre>\n
Et voil\u00e0, vous pouvez maintenant v\u00e9rifier si la personne vient bien de votre fan page, si elle l'aime d'un amour v\u00e9ritable, et m\u00eame si elle est admin de la page (pour les tests, \u00e7a peut \u00eatre tr\u00e8s utile).<\/p>\n
\u00c9viter ces bordel de merde d'ascenseurs... de merde<\/h3>\n
Vous allez le rep\u00e9rer vite lorsque vous allez vouloir mettre en place votre contenu, et surtout s'il est trop long, des ascenseurs disgracieux vont appara\u00eetre comme les com\u00e9dons sur un visage adolescent.<\/p>\n
Bon, de mon cot\u00e9 j'ai choisi de sortir les grands moyens pour y rem\u00e9dier. Il est possible que seuls quelques une de ces solutions soient n\u00e9cessaires mais en mettant tout en place, ce n'est pas hyper compliqu\u00e9, vous serez sur d'y parvenir.<\/p>\n
1\/ Limiter la largeur : 520 de large qu'ils disent ? Je serais vous je compterais plus sur du 518, voir 515px pour \u00eatre sur.<\/p>\n
2\/ sp\u00e9cifier la largeur dans les CSS. Pour cela il faut appliquer quelques valeurs sur les conteneurs principaux : html et body.<\/p>\n
html,body{\r\n\twidth:518px;\r\n\tmargin:0; padding:0; border:0;\r\n\toverflow-x: hidden;\r\n}<\/pre>\n
Voil\u00e0, comme \u00e7a on s'assure de la largeur, on enl\u00e8ve les marges et tout ce qui pourrait manger le contenu, et enfin on d\u00e9sactive l'ascenseur horizontal.<\/p>\n
C'est d\u00e9j\u00e0 \u00e7a de pris. Mais reste l'ascenseur vertical. Selon les navigateur il doit prendre \u00e0 vue de nez pr\u00e8s de 15px sur votre contenu et c'est relou.<\/p>\n
3\/ On va demander \u00e0 Facebook d'adapter son Canvas \u00e0 notre contenu. et pour cela ils ont pens\u00e9 \u00e0 une fonction, il faudra donc int\u00e9grer le Javascript SDK de Facebook. Normalement il ne faudrait ne\u00a0l\u2019appeler\u00a0qu'une fois. Comme j'ai eu des soucis avec une page qui changeait de taille sur certaines actions, j'ai choisi de\u00a0l\u2019appeler\u00a0r\u00e9guli\u00e8rement. \u00c7a doit pourvoir facilement s'optimiser, je suis preneur de conseils \u00e0 ce sujet.<\/p>\n
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\u00e9 de mon front... bref toussa quoi)<\/p>\n
\r\n
\r\n
kikoo, lol, izi, tavu<\/p>\r\n<\/div>\r\n