Facebook Like Button - Wie deaktiviere ich das Kommentar-Popup?

107

Ich möchte das Kommentarfeld deaktivieren, das angezeigt wird, wenn ein Benutzer auf die Schaltfläche "Gefällt mir" auf Facebook (fbml) klickt, die ich auf meiner Website platziert habe. Ist das möglich? Ich kann keine Details in der Dokumentation finden.

BrynJ
quelle
2
Konnte keine Antwort für Sie finden. Haben Sie die "Like Box" als Workaround betrachtet? developer.facebook.com/docs/reference/plugins/like-box . Sie können "Stream anzeigen" und "Header anzeigen" deaktivieren und "Verbindungen" auf 0 setzen, wodurch das resultierende Markup eine angemessene Größe erhält.
Zombat
Ich habe eine Antwort hinzugefügt, die ich als Problemumgehung gefunden habe.
BrynJ

Antworten:

125

Die einfachste Lösung zum Ausblenden des Kommentarfelds nach Facebook Like (XFBML-Version nicht die Iframe-Version) ist wie folgt:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

Fügen Sie den CSS-Stil in eine Ihrer CSS-Dateien ein und sehen Sie die Magie, es funktioniert :)

Mohammad Arif
quelle
Vielen Dank, Jonathan, obwohl ich nicht der Beste bin :) Ich habe mich mit dem gleichen Problem auseinandergesetzt und nur versucht, es mit CSS zu lösen, anstatt nach ausgefallenen Lösungen zu suchen, und es hat 'wie ein Zauber' funktioniert :)
Mohammad Arif
8
Glaubt nicht jemand, dass BrynJ die beste Antwort sein könnte? Wenn Facebook seine Klassen im Markup ändert, wird diese Methode unterbrochen.
tybro0103
Erstaunlicherweise gibt es noch keine Option, mit der Sie das Kommentar-Popup deaktivieren können. Funktioniert super.
Messing
@tybro, wenn sich Klassennamen zufällig von Facebook ändern, kann man die Regel natürlich auch einfach über das CSS ändern. Es ist keine funktionale Änderung erforderlich. Dies ist die einfachste Lösung, um das Kommentar-Popup bis zum zu verbergen Zeit FB macht es nicht konfigurierbar.
Mohammad Arif
14
Dies funktionierte nicht für mich ab dem 12. Februar 2013. Musste Kotzillas Lösung verwenden
Bashevis
81

Das Einfügen des Iframes in ein Div mit geeigneter Größe und ausgeblendetem Überlauf hat dieses Problem behoben - obwohl dies das Problem als solches nur tatsächlich verbirgt.

BrynJ
quelle
5
Komisch für mich, dass der andere alle Stimmen bekommen hat. Vielleicht spart seine Methode drei Minuten, aber wenn Facebook ihre Klassen ändert, wird es kaputt gehen.
tybro0103
@tybro Sie können dem fb-Tag eine Klasse hinzufügen und es formatieren, sodass das Ändern der Klasse durch fb keinen Einfluss auf Ihren Code hat.
Gangesh
1
@ Gangesh Ähm, nein, das kannst du nicht. Das Markup stammt direkt von Facebook, über das Sie keine Kontrolle haben.
Tybro0103
@ tybro0103, ich habe eine Methode hinzugefügt, die nicht die Gewinnschwelle erreicht, wenn FB ihre Klassen
ändert
Vielen Dank @BrynJ
Abhishek
69

Ich benutze dies in meinem CSS:

.fb-like{
    height: 20px;
    overflow: hidden;
}

und rendern Sie den Facebook-Button mit dem normalen HTML5-Code, ungefähr so:

<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>

GR-

Elmer
quelle
4
Nachdem Sie die anderen Lösungen ausprobiert hatten, funktionierte diese am besten. Iframe nicht geeignet, da ich das Ereignis edge.create abonnieren muss. Das erneute Rendern des div-Tags in der Ereignisbehandlungsroutine edge.create hatte eine gewisse Verzögerung. Die andere CSS-Lösung mit ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr" hat auch bei mir nicht funktioniert.
CodeWarrior
Dies ist der einzige, der auch für mich funktioniert hat. Ich verwende die Nicht-Iframe-ähnliche Einbettungsmethode.
TK123
4
Funktioniert nicht wirklich (Jan 2014). Das Kommentarfeld wird nicht deaktiviert, sondern nur ausgeblendet. Wenn Sie die drücken Wie Taste (Vorsicht um Ihre Seite zu aktualisieren , nachdem unliking den Link, mit dem Sie testen) und dann mit der Eingabe beginnen, die <div>Aufenthalte die gleiche Größe , aber zeigt das Texteingabefeld, dann die Tabulatortaste drücken , und die Schließen und Pfosten Tasten sichtbar werden . Nicht gut. Ich habe mit Firefox getestet.
Annabel
yeeeaaahh, diese Lösung, die wirklich funktioniert, danke !!
Michael
14

Was ich getan habe, ist ein Div für den "Gefällt mir" -Button wie folgt zu erstellen:

<div class="fb_like">
  <fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>

Und das ist das CSS:

.fb_like {  
  overflow: hidden;
  width: 90px;
}
Kotzilla
quelle
4
Dies ist tatsächlich die beste Problemumgehung, die ich gefunden habe. Wenn Sie das Layout der Boxanzahl verwenden, verwenden Sie das folgende CSS: .fb-like {overflow: hidden; Höhe: 61px; } Sie werden nur die kleine Kerbe über der Schaltfläche "Gefällt mir" sehen, aber Sie werden sich nicht mehr über dieses blöde Popup ärgern.
NicolasBernier
Für das Shopify-Minimal-Thema funktionierte diese Verwendung eines Wrapping-Divs sowohl im Web als auch auf Mobilgeräten, während nur die fb-ähnliche Klasse überschrieben wurde, die direkt im Web, aber nicht auf Mobilgeräten funktioniert (da zusätzliche medienspezifische Klassen enthalten sind)
gamozzii
9

Ich mag die Lösung von Mohammed Arif und wähle sie als beste Antwort. Aber wenn FB die Klassen wechselt, funktioniert das Folgende immer.

FB.Event.subscribe('edge.create', function(response) {
   $('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
   FB.XFBML.parse();
});

Dabei ist "like_button_holder" "IHRE" Div-ID, die den Facebook-ähnlichen Button-Code enthält

Zorox
quelle
4
Ich habe diese Lösung verwendet, weil ich mit CSS-Stilen ein Div nicht in einem Iframe verstecken kann.
Pons
das ist wirklich klug, aber das Kommentarfeld konnte für sehr kurze Zeit gesehen werden
pinkdawn
1
Ich würde dies nicht als "wirklich intelligente" gute Lösung bezeichnen - es beinhaltet das Entfernen des Like-Button-Markups (aber das Verwaisen von Code für die Ereignisbehandlung), das Hinzufügen einer neuen Ergänzung zum DOM, das erneute Analysieren des DOM der gesamten Seite für XFBML und das Neuerstellen von a Neue Schaltfläche "Gefällt mir", was mehr Ereignishandler, ein Repaint und Reflow, ein paar neue Anforderungen usw. bedeutet. Ich würde dies tatsächlich als schlechte oder gar keine Lösung bezeichnen, da Sie Ihren Browser wie aktualisieren einen neuen Computer kaufen.
AndrewF
1
Hast du eine bessere Idee? Das verdammte Kommentarfeld wird sonst nicht verschwinden.
Amalgovinus
@ AndrewF - bessere Idee dann?
Jeremy Haile
5

Die sauberere Lösung , die funktioniert (Stand Mai 2014 ) -

  1. Stellen Sie zunächst sicher , dass das die <div class="fb-like" hat Daten-Layout Eigenschaft als Taste -

    <div class="fb-like" data-layout="button"........></div>
    
  2. Fügen Sie einfach dieses CSS hinzu.

    .fb-like{
       overflow: hidden !important;
    }
    

Das ist es!

Demo

Sahil Mittal
quelle
4

Hier kein Debby Downer zu sein, aber das Ausblenden des Kommentarfelds verstößt nicht gegen die Facebook-Richtlinien?

IV. Anwendungsintegrationspunkte d. Sie dürfen keine Elemente unserer sozialen Plugins wie die Schaltfläche "Gefällt mir" oder das Plugin "Gefällt mir" verdecken oder verdecken.

https://developers.facebook.com/policy/

Daniel Krueger
quelle
1
Das gibt keine Antwort auf die Frage. Bitte zusätzliche Anmerkungen als Kommentar.
Trinimon
2
Das ist ironisch - es ist das verdammte Kommentarfeld, das meinen Like-Button verbirgt !!
Amalgovinus
3

Ich konnte nicht display: nonemit der HTML 5-Version der Schaltfläche arbeiten. Stattdessen habe ich das Div ausgewählt, in dem die Schaltfläche "Gefällt mir" erstellt wurde, und den Überlauf auf "Ausgeblendet" gesetzt.

Das Löschen des Folgenden in meiner CSS-Hauptdatei hat den Trick getan:

#fb_button{
    overflow:hidden;
}
Symulation
quelle
3

Stimmen Sie BrynJ zu. Die derzeit beste Lösung besteht darin, die Schaltfläche "Gefällt mir" in einen 20-Pixel-Container mit hoher Div zu legen und den Überlauf auf "Ausgeblendet" zu setzen (ich habe irgendwo gelesen, dass FB kürzlich das Kommentar-Flyout in den iFrame verschoben hat, also die Lösung, die das Styling von ändert . fb_edge_widget_with_comment ist für iFrame-Benutzer wahrscheinlich nicht mehr nützlich.

AddThis verwenden? Mach das:

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>
Gerbus
quelle
Kann bestätigen, dass die 20px div Container-Lösung die einzige funktionierende ist.
Bashevis
2

Wenn die Schaltfläche "Gefällt mir" verschwindet, wenn Sie auf "Gefällt mir" klicken und ein Container-Div zum Ausblenden des Kommentar-Popups vorhanden ist, verwenden Sie die folgende Lösung:

Erstellen Sie ein Container-Div, um die fb-ähnliche Schaltfläche zu platzieren, und geben Sie ihr das folgende CSS:

.fb_like {
  overflow: hidden;
  width: 90px;
}

.fb_like iframe {
  left: 0 !important;
}
MaxK
quelle
2

Ich habe es geschafft, das Popup-Problem mit Facebook-ähnlichen Schaltflächen zu umgehen, indem ich stattdessen die IFRAME-Version implementiert habe. Ich habe dazu die folgenden Schritte unternommen:

  1. Besuchen Sie https://developers.facebook.com/docs/plugins/like-button/
  2. Ändern Sie die URL zu "Gefällt mir" in Ihre Facebook-Seiten-URL
  3. Wählen Sie nach Bedarf andere Optionen (Layout, Aktionstyp usw.)
  4. Klicken Sie auf die Schaltfläche 'Code abrufen'
  5. Wählen Sie die IFRAME-Version
  6. Stellen Sie sicher, dass Sie Ihre Facebook-Anwendung mit der Aufschrift "Dieses Skript verwendet die App-ID Ihrer App" auswählen.
  7. Implementieren Sie den bereitgestellten Code in Ihrer Anwendung

Soweit ich sehen kann, löst die Schaltfläche "Gefällt mir" mit IFRAME-Implementierung kein Popup aus. Es funktioniert einfach als Like-Button. Dies war mein gewünschtes Ergebnis.

Viel Glück.

Shay Narang
quelle
Wenn Sie den Ereignis-Listener nicht benötigen, ist dies die beste offizielle Antwort. Danke, Mann !!
Yahel
1

Hier ist der Code, mit dem die Schaltfläche "Gefällt mir" zusammen mit Twitter und Linkedin nur als Standardschaltfläche fungiert. Ich hoffe es hilft.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FB</title>


<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; } 
.social ul li { float: left; margin-right: 10px; }
</style>

</head>

<body>
<div id="fb-root"></div>

<div class="social">

    <ul>
        <li class="facebook">   
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&amp;send=false&amp;layout=button_count&amp;width=45&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe> 
        </li>
        <li class="twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.smh.com.au" data-count="none">Tweet</a>
        </li>
        <li class="linkedin">
            <script type="IN/Share" data-url="http://www.smh.com.au/"></script>
        </li>
    </ul>
</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/en_US/all.js#xfbml=1&appId=333450970117655";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>

<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

</body>
</html>
Rafael
quelle
Schön, das war die beste Lösung, die ich auf der Seite ausprobiert habe. Nochmals vielen Dank @Rafael.
Stuart
1

Versuchen wir es mal:

FB.Event.subscribe('edge.create', function(response) {
    var $parent =  $('[href="'+response+'"]').parent();
    $parent.empty();
    $parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
    FB.XFBML.parse();
 });
Aamir Afridi
quelle
1

Wie ich es in Ordnung gemacht habe, wird das Kommentar-Popup deaktiviert, wenn:

  1. Gesichter anzeigen: -> Deaktivieren Sie diese Option
  2. Code abrufen: -> Wählen Sie die Option IFRAME
Trực Phạm
quelle
1

Wenn Sie die neuere HTML5-Schaltfläche verwenden und diese sollte, da sie vorwärtskompatibel ist und von Facebook vorgeschlagen wird, ist es einfach, von dem abzuweichen, was andere gesagt haben:

.fb-like, .addthis_button_facebook_like
  height: 25px
  overflow: hidden

Die zweite Klasse ist ein Bonus für diejenigen, die das AddThis-Plugin verwenden.

Bill Pairaktaridis
quelle
0

Die oben genannten Überlaufhöhenoptionen sollten nicht verwendet werden, wenn show-faces=true. Andernfalls werden die Gesichter ausgeblendet.

tleo
quelle
0

In meinem Fall (mit der XFBML-Version) habe ich dem Tag Folgendes hinzugefügt:

width="90" height="20" style="overflow: hidden;"

Das Endergebnis ist also:

<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>

Das Kommentar-Popup wird korrekt ausgeblendet.

jollyr0ger
quelle
0

Das Ausblenden des Kommentarfelds funktioniert, kann jedoch zu Problemen führen, wenn Sie ein anklickbares Element hinter dem Kommentar-Flyout-Feld haben.

Sie müssen es ausblenden und wie folgt aus dem DOM-Post entfernen.

Hier ist das CSS, um das Kommentarfeld auszublenden:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

Hier ist die JQuery-Methode zum Entfernen des DOM-Elements:

 FB.Event.subscribe('edge.create', function (href, widget) {        
    $('.fb_edge_comment_widget.fb_iframe_widget').remove()       
});

Hier ist die reine Javascript-Methode mit dem bereitgestellten Widget aus dem Rückruf:

FB.Event.subscribe('edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});
Stephane Brillant
quelle
Wie soll ich CSS-Regeln für iframed-Inhalte auf einer anderen Domain erstellen? Geschweige denn CSS-Klassen, deren Namen nächsten Monat anders sein werden?
Amalgovinus
0

Wenn Sie nur die Schaltfläche "Gefällt mir" anzeigen möchten, können Sie Folgendes versuchen

HTML:

<div class="fb_like">
    <div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
    <div class="like_counter_hider"></div>
</div>

CSS:

.fb_like {
    overflow: hidden;
    width: 80px;
    height: 20px;
}
.like_counter_hider {
    position: absolute;
    top: 0;
    left: 45px;
    width: 35px;
    height: 20px;
    background-color: #f3f3f3; /*you'll have to match background color*/
    z-index: 200;
}
user0000001
quelle
0

Das Einstellen des Überlaufs auf "Ausgeblendet" kann hilfreich sein. Tun Sie dies in Ihrer Haupt-CSS-Datei.

#fb_button{
overflow:hidden;
}
Akshat
quelle
0

Wie wäre es einfach, wenn der Iframe, der die Schaltfläche "Gefällt mir" enthält, dieselbe Größe wie die Schaltfläche hat:

.fb_iframe_widget_lift
{
    width: 49px !important;
    height: 20px !important;
}

Das ist es.

Graham McLellan
quelle