web-dev-qa-db-fra.com

Les boutons Facebook Like ne s'affichent pas lorsqu'ils sont chargés masqués

Je suis un peu coincé avec celui-ci. J'ai une liste d'articles avec des extraits qui renvoient à l'article complet. lorsque vous survolez chaque texte de présentation, une barre apparaît au bas du texte de présentation, qui contient des boutons de partage social (FB, Twitter et G + 1).

http://jsfiddle.net/6Ukmb/

Notez que la mise en forme a été réduite dans l'exemple jsfiddle et que G + 1 ne fonctionne pas, ce qui n'est pas important pour cette question.

Mon problème est avec le FB comme le bouton ne se charge pas correctement. Dans Chrome, tout fonctionne comme prévu. En FF ou IE, les boutons FB chargent le mot "masqué" et je ne parviens pas à les faire apparaître. 

Si, lorsque la page est encore en cours de chargement, votre souris survole l'un des boutons d'article, le bouton FB correspondant à cet article se charge correctement. Si l'effet de survol est masqué à la fin du chargement de FB, il n'apparaîtra ni par amour ni par argent.

Je l'ai choisi et constaté que si je supprime le css display: none; de content-box .story-hover, il se charge très bien. Bien entendu, cela signifie également que les panneaux masqués se chargent jusqu'à ce que quelqu'un les cache, ce qui ne fonctionnera pas.

Je n'arrive pas à comprendre comment résoudre celui-ci. De plus, à cause du volume des boutons comme FB, il est un peu plus lent sur ma version de développement, donc retarder le display:none jusqu'à la fin du chargement de la page ne fonctionnera pas non plus. 

jqueryhtmlcssfacebook-like
25
TH1981

Utiliser CSS opacity est une bonne option ici .. quelque chose de basique comme ceci:

HTML

<div class="div">
  <div class="social"></div>
</div>

CSS

.div {
     opacity: 0;
     filter:alpha(opacity=0);
     }
.div:hover .social {
     opacity: 1.0;
     filter:alpha(opacity=100);
     }

À partir de là, vous pouvez ajouter des transitions pour que ce soit joli!

10
tcd

Une alternative que j’avais utilisée était de ne pas rendre le fb comme bouton tant que le conteneur n’a pas été affiché. Cela peut être réalisé en utilisant

window.fbAsyncInit = function () {
    FB.init({
        xfbml:false  // Will stop the fb like button from rendering automatically
    });
};

Ensuite, pour rendre le bouton J'aime, vous pouvez utiliser

FB.XFBML.parse(); // This will render all tags on the page

ou voici un exemple Jquery sur la manière de rendre tout le XFBML dans un élément

FB.XFBML.parse($('#step2')[0]);

ou javascript simple

FB.XFBML.parse(document.getElementById("step2"));
21
Mike

Nous avons eu le même problème et l'avons résolu en définissant la largeur initiale et la hauteur du div contenant à zéro avec CSS, puis, lorsque le déclencheur est activé, utilisez jQuery pour:

  • définir l'opacité à zéro (pour masquer la div lorsqu'elle est développée)
  • définir la largeur et la hauteur (développer la div)
  • animer l'opacité à 1 (fondu dans le div)

Lors du fondu en sortie, il n'est pas nécessaire de remettre à zéro la largeur et la hauteur. Il suffit de régler pour afficher: aucune après avoir animé l'opacité à zéro. Maintenant que le bouton Facebook est chargé et que ses dimensions sont définies, cela ne changera pas.

7
Paul Chamberlain

La méthode d'opacité fonctionne, cependant, les boutons sont actifs sur la page, mais ne sont pas visibles.

Donc, si la div d'opacité 0 recouvre tout ce sur quoi vous devez cliquer, vous cliquerez sur les boutons cachés par accident.

J'espérais que cette méthode fonctionnerait, malheureusement pour mon site, ce n'est pas pour cette raison.

5
Matt Gorner

Utilisez ce CSS:

.fb_iframe_widget span,
iframe.fb_iframe_widget_lift,
.fb_iframe_widget iframe {
    width:80px !important;
    height:20px !important;
    position:relative;
}

La technique derrière: Vous écrasez les données de Facebook avec votre CSS en utilisant "! Important"

5
TonkBerlin

Au lieu de définir display: none, essayez de le masquer en utilisant margin-top ou z-index. Les deux ne cassent pas le FB comme le bouton.

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}
1
Code Whisperer

Ce n'est pas une réponse, c'est un commentaire! J'espère que je reviendrai pour travailler dessus et le transformer en une réponse.

Faire face au même problème. Firefox + conteneur caché. La seule différence est que j'utilise un onClick slideDown/slideUp pour afficher/masquer, mais je pense que ce n'est pas pertinent.

Dépouillé, mon code HTML ressemble à ceci:

<div id="fb_like_button" class="hide">
   <div class="fb-like" data-action="recommend" ...></div>
</div>

J'ai remarqué que la différence entre les conteneurs masqués et non masqués, c'est-à-dire la suppression de la classe 'masquer' de div # fb_like_button, du <span> et du <iframe> que place Facebook dans div.fb-change les attributs de style largeur et hauteur. 

Donc, quand la page est rendue (encore une fois, fortement dépouillé en html)

non caché:

<div id="fb_like_button" class="">
   <div class="fb-like" data-action="recommend" ...>
     <span style="height: 61px; width: 97px;">
       <iframe style="height: 61px; width: 97px;">

caché:

<div id="fb_like_button" class="hide">
  <div class="fb-like" data-action="recommend" ...>
    <span style="height: 0px; width: 0px;">
      <iframe style="height: 0px; width: 0px;">

Jouer avec les styles width et height en utilisant les outils de développement firefox après un rendu complet, m'a permis de bidouiller le bouton de ce type en le rendant visible.

Aucune solution pour le moment, mais je continuerai à mettre à jour car je trouve plus d'informations. Je vais essayer très fort de ne pas ajouter de javascript supplémentaire qui redéfinit ces attributs de style, mais plutôt de décoder wtf sur Facebook. Espérons que cela aide quelqu'un.

1
FlipMcF

Chaque navigateur fonctionne différemment sur jsfiddle. Si vous essayez de charger le code sur un fichier HTML de test que vous pouvez créer. Cela pourrait encore fonctionner. Juste pas sur js fiddle .. Parfois, jQuery ne remplace pas le code CSS dans les fichiers CSS ou les balises .. Donc, donc si c'est fait de cette façon. C'est peut-être coincé caché.

Je l'ai vu se produire au hasard lorsque je travaille sur mes violons sur des ordinateurs et des navigateurs.

0
CoasterChris

Je préfère le rendre absolu dans un conteneur 

  iframe{
     position: absolute !important;
     height: 500px !important;
  }
0
kplates

Définir l'opacité sur 0 n'est pas une solution pour moi, car elle masque et chevauche tout ce dont vous avez besoin pour cliquer sur. De plus, la fonction jquery fadein utilise la propriété d'affichage css, pas l'opacité.

la solution que j’ai trouvée est d’afficher le conteneur sous forme de bloc, mais par la fenêtre de gauche: -9999px, puis je règle un minuteur pour 1s ~ 2s (le temps nécessaire au rendu de tous les boutons sociaux) et de changer l’affichage en aucun et retour à la position d'origine:

#bnts_container
{
  left:-9999px;
  display:block;
}

$(window).load(function () {

  setTimeout(function () {
     $('#bnts_container').css("display", "none");
     $('#bnts_container').css("left", "50%");
    } , 2000);

});

Cliquez sur le bouton + Partager ici pour tester cette solution.

0
Chtiwi Malek