web-dev-qa-db-de.com

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

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

107
BrynJ

Das Problem wurde behoben, indem der Iframe in einem Div mit entsprechender Größe und ausgeblendetem Überlauf abgelegt wurde - obwohl hierdurch das eigentliche Problem nur ausgeblendet wird.

81
BrynJ

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

125
Mohammad Arif

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-

69
Elmer

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

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

9
Zorox

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

5
Sahil Mittal

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/

4
Daniel Krueger

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>
3
Gerbus

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

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.

2
Shay Narang

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

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

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.

1

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
1
Trực Phạm

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>
1
Rafael

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

0
tleo

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

0
jollyr0ger

Das Setzen des Überlaufs auf "versteckt" könnte Abhilfe schaffen. Tun Sie dies in Ihrer Haupt-CSS-Datei.

#fb_button{
overflow:hidden;
}
0
Akshat

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.

0
Graham McLellan

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