Bouton "J'aime" de Facebook - HTML / CSS  

Forum > HTML / CSS > Bouton "J'aime" de Facebook

Bouton "J'aime" de Facebook

ok Le problème posé sur ce sujet a été résolu.
avatar de Chopin
Membre
# Le 22/10/2012 à 18h01
Salut !

Ben voila, comme dit dans le titre, il met impossible d'afficher le bouton "J'aime" de Facebook sur mon site dans un conteneur div en display:none que je passe ensuite en display:block via un simple document.getElementById en JS.

Le problème étant que ça fonctionne sur Chrome mais pas sur IE ou FF sauf dans le cas ou je lance la fonctionne JS (qui passe le div en block) très rapidement au chargement de la page. Je ne sais pas trop si vous me suivez :D


Une idée ? Merci par avance !
avatar de Tony_
Administrateur
# Le 22/10/2012 à 20h19
Bonjour.
Avant toute chose, est-ce que les consignes d'insertion du code ont été respectée à la lettre, sans changer le code javascript ? Il suffit d'une petite modification pour que le code soit capricieux (un retour à la ligne au mauvais endroit, la modif de la balise <script> ...). Je sais de quoi je parle. :)
Juste pour savoir. Si le <div> est en display block au début, puis qu'un timer en JS le met en display:none au bout de 3s (par exemple), puis le remet en display:block, est-ce que ça fonctionne ?
J'ai une piste à explorer. Dans Firefox regarde si le fichier d'appel à Facebook est bien appelé lorsque c'est en display:block. Peut-être que ce navigateur considère qu'un élément en display:block n'a pas besoin d'être téléchargé.
C'est une piste à développer à mon avis.

Bon courage.
N'hésitez pas à consulter le dossier référencement. smiley
Sinon hors internet je suis développeur web PHP.
avatar de Chopin
Membre
# Le 23/10/2012 à 19h14
Effectivement, j'ai légèrement modifié le code JS mais ce n'est pas ça le problème car même avec le code initial c'est toujours pareil. Ta solution JS marcherais surement mais ça me parait un peu lourd pour ci peu et de plus pendant 3 seconde mes visiteur verrons quand même l'élément caché donc pas cool surtout que le bouton Facebook met parfois plus de 3 secondes à s'afficher.

En réalité, la vrai solution que j'ai trouvé et super simple, à tel point que j'ai honte de la donner lol. J'ai simplement préféré un visibility:hidden au lieu d'un display:block et comme mon div et en position:absolute je n'ai aucun bug d'affichage lié au visibility:hidden.

Effet secondaire toute fois : Le bouton +1 de Google s'affiche toujours sur la position de l'élément même lorsque celui ci et en visibility:hidden. Solution : un getElementById sur un nouveau conteneur div qui ne contient que ce bouton et je le passe en display:block au même moment ou je passe ma box de réseaux sociaux en visibility:hidden ou inversement. Pas très propre, mais pas trop lourd et pour l'instant je n'ai trouvé que ça qui fonctionne.


Autre gros soucis maintenant et je n'ai pas trouvé de solution légère, propre et tournant sur tout navigateur. Il s'agit, de la validation XHTML strict de mes boutons like. Oui, je sais. On est a l'air du HTML5 mais voila, j'ai commencé ce projet en XHTML alors je reste dessus. Plus tard peu être...
avatar de Tony_
Administrateur
# Le 23/10/2012 à 19h49
Cool que cette solution fonctionne.
A noter que ma technique consistant à attendre 3 secondes, c'était plus une petite astuce pour débuguer et comprendre d'où viens le problème.

Pour la validation XHTML, ça peut être compliqué. Déjà, je sais que la validation HTML5 lorsqu'il y a des og:meta ne sont pas possible car il demande d'insérer un attribut assez spécifique dans la balise <html>.

En cherchant sur Google, j'ai tout de même trouvé une méthode. Il faut ajouter les attributs non-invalides grâce à javascript (en utilisant un getElementById). La source : "Comment rendre son bouton FaceBook, Twitter, Buzz valide W3C".
N'hésitez pas à consulter le dossier référencement. smiley
Sinon hors internet je suis développeur web PHP.
avatar de Chopin
Membre
# Le 23/10/2012 à 20h22
J'avais pensé à faire l'inclusion des paramètres via un getElementById mais je ne trouve pas ça tip top. Donc me voila le couteau sous la gorge lol, j'ai commençais a passer mon site en HTML5. Pour les og:meta j'en utilise pas donc ce n'est pas grave.
avatar de Tony_
Administrateur
# Le 23/10/2012 à 20h43
Tant mieux de passer le site en HTML5. C'est plus simple et plus propre pour l'avenir.
N'hésitez pas à consulter le dossier référencement. smiley
Sinon hors internet je suis développeur web PHP.