it-swarm.com.de

Facebook Like-Button - Anzahl ausblenden?

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

Dead link - Alternative 1Dead link - 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" nicht anzeigen sollten, bis diese Zahl etwas mehr zu unseren Gunsten ist. Soweit ich weiß, habe ich keinen Zugriff auf das Layout der Schaltfläche durch Javascript oder CSS (es handelt sich hierbei um einen von Facebook bereitgestellten iframe). Gibt es andere Möglichkeiten, die Zählung zu verbergen?

72

Der Like-Button, der für "Recommend" codiert ist, ist 84px breit und der Like-Button ist 44px. Dadurch sparen Sie CSS-Typen wie mir, die verstecken müssen, wie unbeliebt meine Seite derzeit ist! Ich habe diesen Code oben auf meine Homepage gestellt, deshalb möchte ich zunächst nicht, wie viele Likes ich habe.

42
The Surrican

Wenn Sie overflow:hidden tun, denken Sie daran, dass auch das Kommentarfeld in der XFBML-Version ausgeblendet wird ... nachdem der Benutzer dies mag. Also am besten, wenn du das tust ...

/* 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;
}
54
farooq

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

Englisch: Wie

Niederländisch: Vind ik leuk

Deutsch: Gefällt mir

Nur ein Heads-Up.

42
Bondt

Umfassen Sie einfach den iframe in einem div. Setzen Sie die Breite auf die Breite der Schaltfläche.

  <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>
11
Silly Rabbit

Es wird jetzt offiziell von Facebook unterstützt. Wählen Sie einfach das 'Button'-Layout.

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

9
amosmos

Wenn Sie die Javascript-Schaltfläche von Facebook verwenden (um Ereignisse wie Ereignisse festzuhalten), müssen wir Folgendes tun:

Aufgrund einer kürzlich erfolgten Änderung von Facebook in der Art und Weise, wie Kommentar-Dialoge angezeigt werden, mussten wir ändern, wie wir es versteckten. Die Art und Weise, wie der Kommentardialog angezeigt wird, hat den Inhalt innerhalb meines überlauf: ausgeblendeten Elements "verschoben", so dass die Schaltfläche für den Benutzer nach dem Klicken auf die Schaltfläche "Gefällt mir" ungewöhnlich erscheint.

Neben dem Hinzufügen eines Umbruchelements mit dem Stil "overflow: none" müssen Sie das Kommentarelement ausblenden, das Facebook auf Ihrer Seite platziert:

Styles:

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 die fb: wie Markup. Ich habe dies nicht mit dem neuen div-basierten Markup getestet, das Facebook jetzt auf seiner Website bereitstellt.

3
Akrikos

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, die appId zum 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>
3
TJ.

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

Die korrekte Lösung für heute ist die Verwendung des 'Button'-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>

Image of button on FB Docs

Die FB-Dokumente scheinen noch nicht vollständig aktualisiert zu sein. Wenn Sie nach unten scrollen, werden nur 3 Layouts angezeigt. 

enter image description here

Das bedeutet, dass Sie jetzt eine weniger gehackte Lösung verwenden können!

2
kaichanvong

Es scheint so, als ob FaceBook kürzlich Code geändert hat - jedes Mal, wenn ich auf "Gefällt mir" geklickt habe, sprang der Inhalt nach links und verwirrte so die Benutzeroberfläche. Keine CSS/JS-Tricks machten es möglich. Ich habe mich für eine einfachere Lösung entschieden, einen iframe.

NOTICE - Einige Geräte unterstützen zwar bereits iFrames, nicht jedoch alle mobilen Geräte. iFrames sind eigentlich alt und nicht empfehlenswert, aber es hat mir geholfen.

Nehmen wir das standardmäßige Like-Generation-Skript von Facebook und generieren eine iFrame-ähnliche Box.

Klicken Sie hier, um einen ähnlichen Button zu erzeugen

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

Wenn Sie "Grab the code" drücken, 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>

Lass uns jetzt ein Div herumwickeln.

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

Geben Sie das folgende CSS ein:

.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>

Und machen Sie es so, dass es immer englisch ist, indem Sie der URL "& locale = en_US" hinzufügen. Dies dient dazu, um seltsame Layouts in anderen Ländern zu verhindern - in Niederländisch wäre es "Vind ik leuk" und in Englisch "Like". Ich denke, jeder kennt in jeder Sprache ein "Like", also bleiben wir dabei.

Jetzt fügen wir noch 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.

2
Rob Quist

Meine Lösung ist eine kleine Kapuze, aber es funktioniert. Was ich mache, ist im Grunde nur herauszufinden, wo die Nummer sein wird, und css verwenden, um eine Box zu überdecken. Ich denke, Sie können das System auch betrügen und weitere Treffer hinzufügen, wenn Sie möchten. Hier ist mein Code mit jquery, aber er wird sich von anderen unterscheiden, je nachdem, wo Sie den Like-Button auf Ihrer Seite platzieren.

Nicht gerade glamourös, aber 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>
1
Cornelius

das hat für mich funktioniert:

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

Wenn Sie Folgendes in Ihre CSS-Datei einfügen, sollte das Textelement für Benutzer ausgeblendet werden und FB Happy bleiben 

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

- Aktualisieren

Versuchen Sie es mit einem anderen Ansatz.

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

0
RobertPitt

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

data-layout="button"
0