Facebook Like-Button - Anzahl ausblenden?

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

• Alternative 1
• Alternative 2

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?

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.

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

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.

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>

Es wird jetzt offiziell von Facebook unterstützt. Wählen Sie einfach das Layout "Schaltfläche".

https://developers.facebook.com/docs/plugins/like-button/

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.

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>

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>

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.

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

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.

das hat bei mir funktioniert:

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
    height: 26px;
    overflow: hidden;
    width: 138px;
}

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>

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/

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

data-layout="button"

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

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.