Google Friend Connect and Firefox

-- You'll find the english version of this article here --

Un problème fréquent avec le widget « Google Friend Connect » et son homologue le gadget Followers est qu'ils ne s'afficheront souvent pas correctement avec Firefox; cela tout dépendant de la complexité du modèle ("template") HTML utilisé et de la présence ou non de Prototype.js.  Un correctif pour ceux ayant le problème d'incompatibilité avec Prototype.js a été publié par Google mais celui-ci reste inapplicable pour ceux n'utilisant pas ce script; indiquant par le fait même qu'il y a une deuxième source de problème potentiel entre Google Friend Connect et Firefox.

Ce site sert de démonstration aux articles « Solution au problème d'affichage de Google Friend Connect avec Firefox » et « Solution au problème d'affichage du gadget Followers avec Firefox » et qui sont ou seront bientôt publiés (autour du 20 décembre 2009) sur le blogue Le Paparazzi~Codeur et décrivant dans le détail une solution potentielle à ce deuxième problème.  La suite de cet article-ci ne fait que donner un résumé de chacun de ces tests illustrés à droite; veuillez vous référer à ces deux articles déjà mentionnés pour en avoir une description complète.  Le code décrit dans ces articles peut paraître compliqué mais la solution finale reste relativement simple et peut être installée en quelques minutes.  Un test est également fourni qui vous permettra de voir si cette solution pourra fonctionner avec votre site; cela sans même avoir à le modifier en quoi que ce soit.

Tous les tests dans la colonne de droite devraient s'afficher correctement avec Internet Explorer mais plusieurs ne s'afficheront pas avec Firefox 3.5 ou avec la dernière version Beta 5 de Firefox 3.6.  Le test #3 avec la clause "defer" devrait s'afficher correctement avec Firefox 3.5 mais pas avec Firefox 3.6 beta 5.  Certains de ces tests sont divisées en deux parties.  Il est normal que les parties B n'affichent rien du tout - à l'exception du titre - car ils ne contiennent que du code javascript.  Les titres sont affichés ici afin de mieux voir les différentes sections mais évidemment, sur un site réel, ceux-ci seraient omis.

A- « Google Friend Connect »

    - La version originale.

B- « GFC 1 - Comment only »

    - Seulement un commentaire, destiné à identifier le code HTML du modèle ("template") entourant le widget ou le gadet.

C- « GFC 2 - Prototype.js »

    - Test que j'ai fait avec prototype.js et destiné à vérifier que la solution habituellement fournie par Google au sujet de JSON ne fonctionne pas dans ce cas.  Désactivé ici afin de ne pas influencer les tests qui suivent.

D- « GFC 3 - Defer »

    - Test utilisant l'attribut "defer" pour le code javascript.  Fonctionne avec Firefox 3.5 mais pas avec Firefox 3.6 beta 5.

E- « GFC 4a et 4b - Split Code, version 1 »

    - Premier test visant à séparer le <div> du gadget/widget du code javascript en les mettant dans deux sections différentes mais proche l'un de l'autre.  (Il est normal que la partie B n'affiche rient du tout car elle ne contient que du code javascript.)

F- « GFC5a et 5b - Split Code, version 2 »

     - Second test visant à séparer le <div> du code javascript mais cette fois, la section contenant le code javascript a été porté à la toute fin de la page.  Fonctionne cette fois avec Firefox 3.5 et 3.6 beta 5.

G- « GFC 6a et 6b - Button »

    - Le code javascript a été mis dans un bouton et vous pouvez l'exécuter en cliquant sur ce dernier.

    -- Important -- Au lieu de cliquer sur le bouton, vous pouvez choisir de faire un Copie&Coller du code directement dans la barre d'adresse; ce qui vous permet de tester rapidement si cette méthode va fonctionner pour votre site.   Dans le cas d'IE, vous devez prendre soin de mettre tout le code sur une seule ligne mais cette réduction sera faite automatiquement par Firefox.  Notez l'ajout du protocol « javascript: » au tout début et qui est obligatoire.

    Pour tester votre propre site, vous devez évidemment changer les valeurs de "id" et de "site" pour celles de votre site:

javascript:google.friendconnect.container['renderMembersGadget']({id:'div-6508336042659712443',site:'10657890614271830163'},skin);

    Si vous êtes dans la situation où que vous devez corriger pour l'incompatibilité avec Prototype.js et que vous désirez tester quand même, vous devez simplement ajouter le correctif pour JSON au tout début:

javascript:window.JSON={parse: function (st) {return st.evalJSON();}, stringify: function(obj) {return Object.toJSON(obj);}}; google.friendconnect.container['renderMembersGadget']({id:'div-6508336042659712443',site:'10657890614271830163'},skin);

Si vous voyez le contenu de votre page disparaître au lieu de voir le widget Google Friend Connect s'afficher, c'est que vous avez fait une erreur en recopiant le code ci-dessus et encore une fois, n'oubliez pas que vous devez modifier les valeurs pour "id" et "site" en fonction de celles se trouvant sur votre site.

G- « GFC 7 - OnLoad »

    - Test utilisant l'événement window.onload pour exécuter le code javascript.

H- « GFC 8 - artLoadEvent »

    - Test utilisant la fonction artLoadEvent d'Artisteer pour exécuter le code javascript.

I- « GFC 9 - artLoadEvent + setTimeout »

    - Test utilisant l'événement fonction artLoadEvent d'Artisteer pour exécuter le code javascript mais ajoutant en plus la vérification que le code javascript fourni pas Google Friend Connect a eu le temps de se charger.

    Même si vous n'utiliser pas Artisteer, vous pouvez quand même utiliser le même code de vérification en association avec l'événement window.onload.