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

Die einfachste Lösung zum Ausblenden des Kommentarfelds nach Facebook Like (XFBML-Version, nicht iframe-Version) lautet 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 beliebige CSS-Datei ein und sehen Sie, wie einfach es funktioniert :)

Ich benutze dies in meinem CSS:

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

und rendere den Facebook-Button mit dem normalen HTML5-Code, etwa 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;
}

Mir gefällt die Lösung von Mohammed Arif und ich wähle sie als beste Antwort. Aber falls der FB die Klassen wechselt, funktioniert das untenstehende 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();
});

wobei "like_button_holder" "DEINE" Div-ID ist, die den Facebook-Like-Button-Code enthält

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

1. Stellen Sie zunächst sicher, dass die <div class="fb-like" hat die Eigenschaft Datenlayout als Schaltfläche -

   <div class="fb-like" data-layout="button"........></div>
   

2. Fügen Sie einfach diese CSS-

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

Das ist es!

Demo

Nicht um hier ein Debby Downer zu sein, aber verstößt das Ausblenden des Kommentarfeldes nicht gegen die Facebook-Richtlinien?

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

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

Stimmen Sie mit BrynJ überein. Die beste Lösung besteht derzeit darin, den Like-Button in einen 20px-Container mit hohem Div-Wert zu setzen und den Überlauf auf "hidden" zu setzen. . fb_Edge_widget_with_comment ist für iFrame-Benutzer wahrscheinlich nicht mehr nützlich).

Verwenden Sie AddThis? 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>

Ich konnte die Option display: none Nicht für die HTML 5-Version der Schaltfläche verwenden. Stattdessen habe ich den Div, in dem die Schaltfläche "Gefällt mir" erstellt wurde, als Ziel ausgewählt und den Überlauf auf "Versteckt" gesetzt.

Folgendes in meiner Haupt-CSS-Datei zu löschen hat den Trick getan:

#fb_button{
    overflow:hidden;
}

Ich habe es geschafft, das Facebook-ähnliche Button-Kommentar-Popup-Problem zu umgehen, indem ich stattdessen die IFRAME-Version implementiert habe. Ich habe dazu folgende Schritte unternommen:

1. Besuchen Sie https://developers.facebook.com/docs/plugins/like-button/
2. Ändern Sie die URL in "Gefällt mir" in die URL Ihrer Facebook-Seite
3. Wählen Sie nach Bedarf andere Optionen (Layout, Aktionstyp usw.) aus
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 Ihre Anwendung

Soweit ich sehen kann, löst die Schaltfläche "Gefällt mir" mit der IFRAME-Implementierung kein Popup aus. Es fungiert einfach als eine Art Taste. Das war mein gewünschtes Ergebnis.

Viel Glück.

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

erstelle ein container div um den fb-like button zu platzieren und gib ihm das folgende css:

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

.fb_like iframe {
  left: 0 !important;
}

Lass es uns versuchen:

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

Wenn Sie die neuere HTML5-Schaltfläche verwenden und Sie sollten, da diese vorwärtskompatibel ist und von Facebook vorgeschlagen wird, einfach von dem abweichen, 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.

Da ich ok gemacht habe, wird das Kommentar-Popup deaktiviert, wenn:

1. Gesichter anzeigen: -> Häkchen entfernen
2. Code abrufen: -> Wählen Sie die Option IFRAME

Hier ist der Code, mit dem die Schaltfläche "Gefällt mir" neben 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>

Die oben genannten Optionen für die Überlaufhöhe sollten nicht verwendet werden, wenn show-faces=true. Andernfalls werden die Gesichter ausgeblendet.

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

Sie müssen es ausblenden und wie aus dem DOM-Beitrag 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);        
});

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 Setzen des Überlaufs auf "versteckt" könnte Abhilfe schaffen. Tun Sie dies in Ihrer Haupt-CSS-Datei.

#fb_button{
overflow:hidden;
}

Wie wäre es, wenn Sie den iframe mit der Schaltfläche "Gefällt mir" auf die gleiche Größe bringen würden wie die Schaltfläche:

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

Das ist es.

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