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

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.

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 :)

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.

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-

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

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

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

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/

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

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>

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

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.

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>

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

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

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.

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

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.

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

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

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

#fb_button{
overflow:hidden;
}

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.