11548 sujets

JavaScript, DOM et API Web HTML5

Boutton LIKE facebook. CHROME SAFARI

Bonjour, j'ai utilisé le plugin like button de facebook pour un site web.
Il apparait sur firefox et internet explorer mais pas sur chrome et safari. je n'arrive pas a trouver pourquoi cela ne fonctionne pas.

Qqun aurait une idee svp ??

Merci.

Voici le code utilisé:
placé sous la balise body
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



code du bouton:
<div class="fb-like" data-href="LIEN DE MA PAGE FACEBOOK" data-send="true" data-layout="button_count" data-width="410" data-show-faces="true"></div>
Utilises la colorisation syntaxique ( 
 // Ton code
) pour ton code c'est un peu plus lisible Smiley ohwell
Modifié par Seyu (13 Jan 2012 - 15:29)
<div id="fb-root"></div>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>




<div class="fb-like" data-href="LIEN DE MA PAGE FACEBOOK" data-send="true" data-layout="button_count" data-width="410" data-show-faces="true"></div>
En fait, ce n'est pas le code que Facebook te donne... Ceci est le bon code:


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=TON_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Et remarque qu'il n'y a pas de http: au début du lien vers le script (ceci est un protocole relatif et il prendre http ou https selon le besoin)

Ceci est une première étape, mais d'autres raisons pourraient empêcher l'utilisation du like sur ta page. Reviens si ça ne fonctionne pas en donnant l'URL de ta page, parce que le problème peut être que cette page ne peut pas être "liker" pour quelques autres problèmes techniques.

Aussi, vérifie avec Firebug (ou équivalent) qu'une balise script pointant vers le SDK Javascript de FB a bien été ajouté au head (un bug JS survenant avant l'exécution de celui-ci pourrait tout bloquer).
Modifié par Vaxilart (14 Jan 2012 - 20:21)
merci,

cela pourrait tout bloquer seulement sur chrome et safari ??
pcq ca fonctionne très bien sur firefox et explorer...
donc s'il y avait un bug au niveau du js ca ne fonctionnerai pas du tout non ? mm sur firexfox et explorer...

j'ai essayé ta solution mais cela ne fonctionne tjs pas sur chrome et safari.
et il y a bien une balise dans head qui pointe vers le js
mmm.. bizarre moi j'utilise ça pour les like et ça fonctionne partout

<div id="fb-root"></div><script src="http://connect.facebook.net/fr_FR/all.js#appId=XXXXXXXXXXXXXXX&amp;xfbml=1"></script><fb:like href="http://www.monsite.com<?=$_SERVER["REQUEST_URI"]?>" send="false" layout="button_count" width="200" show_faces="false" font="arial"></fb:like>


Bon ok c'est le like d'une page en particulier..
@pchlj -> Tu utilise l'ancienne version du bouton like utilisant le xfbml. Aujourd'hui, une version HTML 5 standard existe (celle que Besss essaie d'utiliser)

@Besss -> As-tu un exemple en ligne ?

Javascript, tout comme HTML et CSS, n'est pas uniforme sur tous les navigateurs et le niveau de support varie selon les versions. Donc, il est tout à fait possible que des petits détails (surtout des détails étant géré par un SDK duquel on a pas créé le code; et dont les programmeurs peuvent difficilement prévoir tous les cas de figure quant à l'endroit où il sera intégré) puisse créer un bug sur un navigateur.

En gros, comme tu semble avoir mis le bon code, il faudrait vraiment un exemple en ligne pour pouvoir mieux cerner le problème.

Aussi, Facebook pousse souvent des mises à jour à moitié testées qui amènent des bugs par la suite, je te conseille de toujours vérifier le status et les "trending bugs" quand quelque chose te semble illogique: http://developers.facebook.com/live_status/
Modifié par Vaxilart (14 Jan 2012 - 23:51)
ok,

je ne peux malheureusement pas poster de lien car ce n'est pas pour un site perso mais pour le boulot.

je voudrais préciser que j'utilise oxatis (solution ecommerce) pour créer le site. je sais pas si ca peut jouer dans le fait que le bouton ne fonctionne pas sur chrome et explorer ?

est-ce que je pourrais utiliser l'ancienne version du bouton like fb dont parle pchlj ? ou elle est déconseillée ??

merci pour votre aide Smiley cligne
@Vaxilart

penses tu qu'il soit raisonnable aujourd'hui d'utiliser une version html5, pour des sites cencés fonctionner sur tout les browser du marché ??? même ceux qui ne devraient plus exister ?
@Besss -> Tu peux essayer la version xfbml voir si elle marche ( http://developers.facebook.com/docs/reference/plugins/like/ tu n'as qu'à cliquer sur l'onglet xfbml lorsque le pop-up "get code" apparait )

La seule vraie différence est que ton code ne sera plus valide w3c.

Cela dit, je n'ai jamais eu de problème avec l'intégration du bouton html 5 et je m'en sers fréquemment étant intégrateur dans une agence spécialisé en média social (pour ainsi dire, je fais presque exclusivement des applications FB)

Au niveau de la compatibilité de la version html 5, il n'y a pas à s'en faire. La différence est seulement que le code invalide est remplacé par une <div> doté d'attributs html 5 data-.

Les navigateurs ont toujours été très flexible au niveau du dom, et n'importe quel attributs ajoutés sur un élément HTML a toujours été considéré dans le DOM. Par exemple, récupérer un attribut de ce genre a toujours fonctionné avec Javascript:


<input type="text" max-length="30">


Bien qu'aucun attribut max-length n'existe. Les attributs data- fonctionnent donc bien partout (ie 6-7 compris), mais permettent seulement de standardiser la manière dont les développeurs utilisaient parfois des attributs customs. (Personnellement, c'est un des ajouts à HTML 5 que je trouve le plus utile !)

@besss : si rien ne fonctionne, tu peux me passer le lien par messagerie privée, j'irai y jeter un œil discret; ce ne doit vraiment pas être grand chose...
Modifié par Vaxilart (15 Jan 2012 - 06:51)
voila j'ai essayé l'autre methode mais cela ne fonctionne pas non plus sur chrome et explorer.
je t'envoie le lien de la page en privé alors.

merciii Smiley smile
Bonjour,

Voilà quelques points à vérifier:

1-
Le code de ton intégration du like: retire le data-layout="button_count" puisque tu utilise la layout par défaut (qui n'est pas le button count)

2-
Supprime temporairement ton bouton share (et au final, intègre le via le SDK que tu intègre pour ton bouton like, c'est la manière habituelle de faire)

3-
Si rien ne marche, essaie de définie la variable JS FB à null avant de télécharger les SDK:


window.FB = null;
FB = null;
ok super c'était le bouton share qui faisait bloquer le like. maintenant ca fonctionne.

Merci bcp pour ton aide !! Smiley smile
Pour le share, tu devras utiliser la méthode FB.ui()

http://developers.facebook.com/docs/reference/javascript/FB.ui/

En initialisant préallablement ton JS SDK:


window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
};


(+ d'info ici: http://developers.facebook.com/docs/reference/javascript/ )
ok, je note.

Pour l'instant j'ai remplacé le bouton share par une sharebar addthis. J'essayerai la méthone fb.ui quand j'aurais le temps Smiley smile .

En tout cas, merci encore pour ton aide !!! Smiley smile


Bonne soirée Smiley smile
Sujet clos
Aller à