web-dev-qa-db-de.com

Facebook Like-Buttons werden beim Laden nicht angezeigt

Ich bin ein bisschen bei diesem geblieben. Ich habe eine Artikelliste mit Ausschnitten, die auf den vollständigen Artikel verweisen. Wenn Sie den Mauszeiger über die einzelnen Felder bewegen, wird am unteren Rand des Balkens eine Leiste angezeigt, die Schaltflächen für das soziale Teilen enthält (FB, Twitter und G + 1).

http://jsfiddle.net/6Ukmb/

Beachten Sie, dass die Formatierung im jsfiddle-Beispiel reduziert wurde und G + 1 nicht funktioniert - für diese Frage nicht wichtig.

Mein Problem ist, dass der FB-Button nicht richtig geladen wird. In Chrome funktioniert alles wie erwartet. In FF oder IE laden die FB-Tasten "hidden" und ich kann sie nicht erscheinen lassen. 

Wenn sich die Maus immer noch über einer der Artikel-Schaltflächen befindet, wird die FB-Schaltfläche für diesen Artikel geladen. Wenn der Hover-Effekt ausgeblendet wird, wenn FB das Laden beendet hat, erscheint er weder für die Liebe noch für das Geld.

Ich habe es auseinander genommen und festgestellt, dass es gut ist, wenn ich das css display: none; von content-box .story-hover entferne. Das bedeutet natürlich auch, dass die verborgenen Platten sichtbar sind, bis sich jemand über ihnen befindet, um sich zu verstecken, was nicht funktioniert.

Ich kann nicht herausfinden, wie ich das lösen kann. Aufgrund des Volumens von FB-ähnlichen Schaltflächen ist es bei meinem Entwickler-Build etwas langsamer. Das Verzögern des display:none bis zum Ende der Seite wird ebenfalls nicht funktionieren. 

25
TH1981

Die Verwendung von CSS opacity ist hier eine gute Option. Etwas grundlegend wie folgt:

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);
     }

Von dort aus können Sie Übergänge hinzufügen, damit es schön aussieht!

10
tcd

Eine Alternative, die ich verwendet habe, war, die fb-artige Schaltfläche erst wiederzugeben, wenn der Container angezeigt wird. Dies kann mithilfe von erreicht werden

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

Dann können Sie den Like-Button rendern, den Sie verwenden können

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

oder das folgende ist ein Jquery-Beispiel zum Rendern aller XFBML-Elemente in einem Element

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

oder einfaches Javascript

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

Wir hatten das gleiche Problem und lösten es, indem wir die anfängliche Breite und Höhe des enthaltenden div mit CSS auf Null setzen und dann, wenn der Trigger aktiviert ist, jQuery verwenden, um:

  • setzen Sie die Deckkraft auf null (um das div auszublenden, während es erweitert wird)
  • breite und Höhe einstellen (div erweitern)
  • die Deckkraft auf 1 animieren (im div einblenden)

Beim Ausblenden müssen Sie die Breite und Höhe nicht auf Null zurücksetzen. Nur für die Anzeige eingestellt: keine, nachdem die Deckkraft auf Null gebracht wurde. Nun, da der Facebook-Button geladen ist und seine Abmessungen festgelegt sind, wird sich dies nicht ändern.

7

Die Opazitätsmethode funktioniert, die Schaltflächen sind jedoch auf der Seite live, nur nicht sichtbar.

Wenn Sie also das div mit der Deckkraft 0 überlappen, müssen Sie versehentlich auf die ausgeblendeten Schaltflächen klicken.

Ich hatte gehofft, dass diese Methode funktionieren würde, leider für meine Website nicht.

5
Matt Gorner

Verwenden Sie dieses CSS:

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

Die Technik dahinter: Sie überschreiben die Daten von Facebook mit Ihrem CSS, indem Sie "! Important" verwenden.

5
TonkBerlin

Versuchen Sie, die Anzeige mithilfe von margin-top oder z-index auszublenden. Beides bricht den FB-Button nicht.

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

Dies ist keine Antwort, das ist ein Kommentar! Hoffentlich komme ich zurück und arbeite daran und verwandle es in eine Antwort.

Mit dem gleichen Problem umgehen. Firefox + versteckter Container. Der einzige Unterschied besteht darin, dass ich ein onclick slideDown/slideUp-Element zum Ausblenden/Ausblenden von Bildern verwende. Dies ist jedoch irrelevant.

Nach unten, mein HTML sieht so aus:

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

Ich habe festgestellt, dass der Unterschied zwischen ausgeblendeten und nicht ausgeblendeten Containern, das heißt dem Entfernen meiner Klasse "hide" aus div # fb_like_button, den <span> und <iframe>, den facebook in div.fb-like platziert, die Stilattribute Breite und Höhe ändert. 

Also, wenn die Seite gerendert wird (wieder stark HTML reduziert)

nicht versteckt:

<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;">

versteckt:

<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;">

Durch das Spielen mit Breite und Höhe mit den Firefox-Entwicklerwerkzeugen nach einem vollständigen Rendering konnte der Like-Button wieder sichtbar gemacht werden.

Noch keine Lösung, aber ich werde immer auf dem neuesten Stand sein, wenn ich mehr Informationen finde. Ich werde mich bemühen, kein zusätzliches Javascript hinzuzufügen, das diese Stilattribute zurücksetzt, sondern wtf Facebook dekodiert. Ich hoffe nur, das hilft jemandem.

1
FlipMcF

Jeder Browser arbeitet auf jsfiddle anders. Wenn Sie versuchen, den Code in eine Test-HTML-Datei zu laden, die Sie erstellen können. Es könnte noch funktionieren. Nur nicht auf js Fiddle .. Manchmal überschreibt jquery CSS-Code in CSS-Dateien oder Tags nicht. Also, wenn es auf diese Weise gemacht wird. Es ist möglicherweise versteckt.

Ich habe gesehen, wie es zufällig passiert, wenn ich an meinen Geigen zwischen Computern und Browsern arbeite.

0
CoasterChris

Ich bevorzuge es, es innerhalb eines Containers absolut zu machen 

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

Die Einstellung der Deckkraft auf 0 ist für mich keine Lösung, da sie alles verbirgt und überlappt, was Sie zum Anklicken benötigen, und auch die Funktion jquery fadein verwendet die css-Anzeigeeigenschaft und nicht die Deckkraft.

die Lösung, die ich mir ausgedacht habe, ist die Anzeige des Containers als Block, aber außerhalb des Fensters links: -9999px, dann setze ich einen Timer für 1s ~ 2s (Zeit, die für das Rendern aller sozialen Schaltflächen erforderlich ist) und wechselt zu keiner Anzeige und zurück zur ursprünglichen Position:

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

$(window).load(function () {

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

});

Klicken Sie auf die Schaltfläche + Teilen hier , um diese Lösung zu testen.

0
Chtiwi Malek