Facebook Like-Button - Anzahl ausblenden?

73

Im Setup-Dialog für den Like-Button gibt es nur zwei Optionen für das Layout:

Leider sind die Zahlen für die Website meines Arbeitgebers nicht annähernd 22'000, so dass die Befugnisse entschieden haben, dass wir die Anzahl der "Likes" erst anzeigen sollten, wenn diese Zahl etwas mehr zu unseren Gunsten ist. Soweit ich weiß, habe ich keinen Zugriff auf das Layout der Schaltfläche über Javascript oder CSS (es befindet sich in einem von Facebook bereitgestellten Iframe). Gibt es andere Möglichkeiten, die Zählung zu verbergen?

Benjamin Wohlwend
quelle
Können Sie jquery nicht verwenden, um das dom-Element zu finden, in dem sich die gleiche Anzahl befindet, und es zu entfernen?
BeRecursive
Verwenden Sie überhaupt keinen Iframe. Verwenden Sie ein statisches Image von Ihrem eigenen Server. Hat den zusätzlichen Vorteil, die Privatsphäre Ihrer Benutzer zu schützen.
CodesInChaos
Diese Seite hat eine Lösung, die perfekt für mich funktioniert hat (unter Verwendung des im August 2012 generierten FB-Codes): learn-a-lot-everyday.blogspot.com/2012/05/…
bigmac
2
Dürfen wir (ohne Einschränkungen) mit dieser Schaltfläche "Gefällt mir" manipulieren? Ich kann keine Informationen darüber finden und würde dies gerne tun :)
lukas.pukenis
1
fb datenschutzrichtlinie IV. Anwendungsintegrationspunkte 4 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.
Dario

Antworten:

42

Die Schaltfläche "Gefällt mir", die so codiert ist, dass "Empfehlen" angezeigt wird, ist 84 Pixel breit und die Schaltfläche "Gefällt mir" ist 44 Pixel groß. Dies spart Zeit für CSS-Leute wie mich, die verbergen müssen, wie unbeliebt meine Seite derzeit ist! Ich habe diesen Code oben auf meiner Homepage platziert, daher möchte ich zunächst nicht, dass er anzeigt, wie wenig Likes ich habe.

Der Surrican
quelle
2
Wenn Sie die Javascript-Version der Schaltfläche verwenden, lesen Sie meine Antwort unten. Sie müssen jetzt noch mehr tun, um sicherzustellen, dass alles noch richtig funktioniert. Wir müssen die Dinge ständig ändern, wenn sich Facebook ändert - das ist eine der Gefahren, wenn wir uns mit Dingen herumschlagen, die ursprünglich nicht modifiziert werden sollten.
Akrikos
Viel Spaß beim Abschneiden des Buttons im mobilen Webkit.
Marcy Sutton
9
Dies berücksichtigt nicht die Länge des Textes in verschiedenen Sprachen. Sie könnten also den Text abschneiden. Es sei denn, es gibt eine Möglichkeit, die Sprache festzulegen, in der die Schaltfläche angezeigt wird, aber mir ist eine solche Einstellung nicht bekannt.
Emil Stenström
2
Sie können die Sprache erzwingen, indem Sie das Gebietsschema
angeben,
@ Joe-Hopfgartner Ich habe heute nach einer Lösung gesucht und Ihr Kommentar hat mein Problem gelöst :)
Edelwater
54

Wenn Sie dies tun overflow:hidden, denken Sie daran, dass auch das Kommentarfeld in der XFBML-Version ausgeblendet wird ... nachdem es dem Benutzer gefällt. Also am besten, wenn Sie dies tun ...

/* make the like button smaller */
.fb_edge_widget_with_comment iframe
{
    width:47px !important;
}

/* but make the span that holds the comment box larger */
span.fb_edge_comment_widget.fb_iframe_widget iframe
{
    width:401px !important;
}
farooq
quelle
4
Klappt wunderbar. Aus allen Antworten sollte dies die gewählte sein.
Dan H
Dies ist nicht die beste Lösung für die Unterstützung mehrerer Sprachen.
T. Junghans
2
Dies hat es für mich getan (muss die <fb: like /> Version verwenden): .fb_edge_widget_with_comment>span,.fb_edge_widget_with_comment>span>iframe { width:52px !important; height:24px !important; }
Nathan JB
es hat gut funktioniert, aber jetzt hat Facebook das Kommentarfeld auch im selben Iframe eingeführt, so dass die Iframe-Größe dynamisch erhöht wird, weil! wichtig ist, dass sie nicht erhöht wird, was ein seltsames Problem darstellt
Techmaster
42

Die akzeptierte Antwort ist gut, aber seien Sie vorsichtig mit mehrsprachigen Seiten. Der Text unterscheidet sich in der Länge:

Deutsch: Wie

Niederländisch: Vind ik leuk

Deutsch: Gefühl mir

Nur ein Kopf hoch.

Bondt
quelle
1
Genau, ich kann die Antwort nicht für meine Website verwenden
David 天宇 Wong
10

Umfassen Sie einfach den Iframe in einem Div, setzen Sie die Breite auf die Breite der Schaltfläche, setzen Sie den Überlauf auf versteckt, dh

  <div style="width:52px;overflow:hidden;">
      <fb:like layout="button_count"></fb:like>

      <div id="fb-root"></div>
          <script>
              window.fbAsyncInit = function() {
                  FB.init({
                    appId: 'YOUR_APP_ID',
                    status: true,
                    cookie: true,
                    xfbml: true
                  });
              };
              (function() {
                  var e = document.createElement('script');
                  e.type = 'text/javascript';
                  e.src = document.location.protocol +
                  '//connect.facebook.net/en_US/all.js';
                  e.async = true;
                  document.getElementById('fb-root').appendChild(e);
              }());
          </script>
      </div>
Dummer Hase
quelle
2
Dies funktioniert nicht mehr wirklich, da die Funktionalität der Schaltfläche "Gefällt mir" geändert wurde. Ich vermute, es war teilweise beabsichtigt, diese Art von "Verhalten" zu stoppen, was wahrscheinlich gegen die allgemeinen Geschäftsbedingungen verstößt. Außerdem aufgepasst, da FireBug sich manchmal beschwert, wenn Sie auf etwas klicken, das aus Sicherheitsgründen teilweise verborgen ist
Simon_Weaver
3

Wenn Sie den Javascript-Like-Button von Facebook verwenden (damit Sie ähnliche Ereignisse erfassen können), mussten wir Folgendes tun:

Aufgrund einer Änderung, die Facebook kürzlich an der Anzeige von Kommentardialogen vorgenommen hat, mussten wir ändern, wie wir sie versteckten. Die Art und Weise, wie sie den Kommentardialog anzeigen, hat den Inhalt innerhalb des Elements my overflow: hidden 'verschoben', sodass die Schaltfläche für den Benutzer nach dem Klicken auf die Schaltfläche "Gefällt mir" wirklich seltsam aussieht.

Zusätzlich zum Hinzufügen eines Wrapping-Elements mit dem Stil "Überlauf: Keine" müssen Sie das Kommentarelement ausblenden, das Facebook auf Ihre Seite setzt:

Stile:

span.no_overflow {
  overflow: none;
  width: 50px;
}

.no_overflow span.fb_edge_comment_widget.fb_iframe_widget {
  display: none;
}

Markup:

<span class="no_overflow">
<fb:like></fb:like>
</span>

Wir verwenden immer noch das fb: like Markup. Ich habe dies nicht mit dem neuen Div-basierten Markup getestet, das Facebook jetzt auf seiner Website bereitstellt.

Akrikos
quelle
3

Ich weiß, dass bereits viele Lösungen veröffentlicht wurden, aber meine ist immer noch etwas anders. Es funktioniert für die HTML5-Version der Schaltfläche "Gefällt mir" und verwendet nur CSS, um das Zählfeld auszublenden. Vergessen Sie nicht, das appIdzum Testen hinzuzufügen .

CSS:

<style type="text/css">
    .fb-like span {
        display: block;
        height: 22px;
        overflow: hidden;
        position: relative;
        width: 140px /* set this to fit your needs when support international sites */;
    }

    .fb-like iframe {
        height: 62px;
        overflow: hidden;
        position: absolute;
        top: -41px;
        width: 55px;
    }
</style>

FB Like Button:

<div id="fb-root"></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_GB/all.js#xfbml=1&appId=xxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>
T. Junghans
quelle
3

Die meisten Vorschläge sind jetzt nicht mehr gültig.

Die richtige Lösung für heute ist die Verwendung des "Schaltflächen" -Layouts.

z.B. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>

Bild der Schaltfläche auf FB Docs

Die FB-Dokumente scheinen noch nicht vollständig aktualisiert zu sein. Wenn Sie nach unten scrollen, sehen Sie, dass nur 3 Layouts verfügbar sind. Das Dropdown-Menü schlägt jedoch 4 vor.

Geben Sie hier die Bildbeschreibung ein

Dies bedeutet, dass Sie jetzt eine weniger hackige Lösung verwenden können!

Kaichanvong
quelle
2

Es scheint, als hätte FaceBook kürzlich einen Code geändert - jedes Mal, wenn ich auf "Gefällt mir" klickte, sprang der Inhalt nach links und brachte so die Benutzeroberfläche durcheinander. Keine CSS / JS-Tricks haben es geschafft. Ich entschied mich für eine einfachere Lösung mit einem Iframe .

HINWEIS - Obwohl einige Geräte bereits iFrames unterstützen, tun dies nicht alle mobilen Geräte. iFrames sind eigentlich alt und überhaupt nicht zu empfehlen, aber es hat den Trick für mich getan.

Nehmen wir das standardmäßige Like-Generation-Skript von Facebook und generieren ein iFrame-Like-Feld.

Klicken Sie hier, um die Schaltfläche "Gefällt mir" zu generieren

Wählen Sie den Stil "Box_Count" mit einem Zähler oben.

Wenn Sie auf "Code abrufen" klicken, wählen Sie den iFrame-Code. Sie werden etwas Ähnliches bekommen;

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=1234567891011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45056px; height:90px;" allowTransparency="true"></iframe>

Nun wickeln wir dort ein Div herum.

<div class="like_wrap">
    <iframe (...)></iframe>
</div>

Geben Sie ihm das folgende CSS:

.like_wrap {
    width:55px;
    height:25px;
    overflow:hidden;
}

Jetzt sehen Sie wahrscheinlich die linke obere Ecke der Theke. Jetzt müssen wir den iFrame reparieren. Gib ihm eine Klasse;

<iframe class="like_box" (...)> </iframe>

Stellen Sie sicher, dass es immer englisch ist, indem Sie der URL "& locale = en_US" hinzufügen. Dies soll seltsame Layouts in anderen Ländern verhindern - auf Niederländisch wäre es "Vind ik leuk" und auf Englisch "Like". Ich denke, jeder kennt in jeder Sprache ein "Gefällt mir", also bleiben wir dabei.

Jetzt fügen wir etwas mehr CSS für die like_box hinzu.

.like_box {
    margin-top:-40px;
}

Der gesamte Code sieht also so aus (ich habe die app_id entfernt, da ich sie nicht brauchte).

HTML:

<div class="like_wrap">
    <iframe class="like_box" 
        src="//www.facebook.com/plugins/like.php?href=CURRENT-URL-ENCODED&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;locale=en_US" 
        scrolling="no" 
        frameborder="0" 
        style="border:none; overflow:hidden; width:45056px; height:90px;" 
        allowTransparency="true"></iframe>
</div>

CSS:

.like_wrap {
    width:55px;
    height:25px;
    overflow:hidden; 
}

.like_box {
    margin-top:-40px;
}

Und jetzt habe ich eine anständige, kleine Box, die gut funktioniert und nicht herumspringt. Lassen Sie mich wissen, wie dies für Sie funktioniert und ob es Probleme gibt, mit denen Sie konfrontiert sind.

rauben
quelle
1

das hat bei mir funktioniert:

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
    height: 26px;
    overflow: hidden;
    width: 138px;
}
Matías Cánepa
quelle
1

Meine Lösung ist eine kleine Haube, aber es funktioniert. Was ich tue, ist im Grunde nur zu erkennen, wo die Nummer sein wird und zu verwenden css, um eine Boxabdeckung darüber zu haben. Ich denke, Sie können das System auch betrügen und weitere Treffer hinzufügen, wenn Sie möchten. Hier ist mein Code, der verwendet wird, jqueryaber er unterscheidet sich von anderen, je nachdem, wo Sie die Schaltfläche "Gefällt mir" auf Ihrer Seite platzieren.

Nicht das glamouröseste, aber hey, die Sicherheit ist zu eng, um Inhalte in einem Frame zu manipulieren.

<script type="text/javascript">
    var facebook_load = '';
    $(document).ready(function() {
        facebook_load = setInterval('checkIframeFacebookLoad()',100);
    });

    function checkIframeFacebookLoad() {
        if($('iframe.fb_ltr').length) {
            var parent = $('iframe.fb_ltr').parent();
            var hide_counter = $('<div></div>').attr('id', 'hide_count');
            parent.append(hide_counter);
            clearInterval(facebook_load);
        }
    }
</script>
<style type="text/css">
    #hide_count {
        position:absolute;
        top:-8px;
        left:122px;
        background:#becdd5;
        padding:5px 10px; 
    }
</style>
Cornelius
quelle
0

Wenn Sie Folgendes zu Ihrem CSS hinzufügen, sollte das Textelement für Benutzer ausgeblendet und FB Happy beibehalten

.connect_widget_not_connected_text
{
    display:none !important; /*in your stylesheets to hide the counter!*/
}

- Update

Versuchen Sie es mit einem anderen Ansatz.

http://www.facebook.com/share/

RobertPitt
quelle
Zumindest unter Firefox und Chrome hilft es nicht. Ich habe die gleiche CSS-Regel ausprobiert, ohne !importantzuvor die Frage ohne Erfolg gestellt zu haben, und das Hinzufügen !importantscheint nichts zu ändern. Siehe auch die 3. Antwort in dieser Frage: stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
Benjamin Wohlwend
Kopfgeld hinzugefügt: Gibt es zusätzliche clevere Dinge, die Sie mit der Javascript-API tun können? Setzen Sie vielleicht Ihre eigene Schaltfläche "Gefällt mir" und verwenden Sie die API, um etwas zu "mögen". Ich vermute, das ist nicht möglich, aber sonst noch etwas Kluges?
Simon_Weaver
FACEBOOK SHARE: Die Optionen box_count und button_count zeigen an, wie oft die Seite insgesamt auf Facebook geteilt wurde, wie viele Kommentare zu der auf Facebook geteilten Geschichte hinzugefügt wurden und wie oft Freunde die geteilte Geschichte mochten [ developer.facebook. com / docs / share]
Simon_Weaver
0

Facebook unterstützt jetzt das Ausblenden der Zählung. Verwenden Sie diese Option im Markup:

data-layout="button"
Gayan Dasanayake
quelle
-1

Dies ist, was ich versucht habe und es funktioniert gut in ff, Chrom und IE8:

/* set width for the <fb:like> tag */

.fb-button {
    width:51px;
}

/* set width for the iframe below, to hide the count label*/

.fb-button iframe{
    width:45px!important;
}
Emanuel Sanabria
quelle
-3

Alles was Sie tun müssen, ist den Iframe-Code zu bearbeiten, den Facebook Ihnen gibt, und die Breite auf 47 zu ändern (Sie müssen ihn an zwei Stellen ändern). Scheint bisher perfekt für mich zu funktionieren.

Dave
quelle
Wenn Sie weitere Details hinzufügen, könnte dies eine gute Antwort sein. Es gibt verschiedene Fälle beim Ausblenden der Anzahl, in denen die Lösung sehr unterschiedlich ist, da das zu lösende Problem unterschiedlich ist.
Akrikos