Afficher zéro dans button_count Comme le bouton

Question

Existe-t-il un moyen de forcer le bouton "J'aime" (stylisé en tant que button_count) à afficher zéro like ?

C'est la solution privilégiée, pour s'aligner sur Twitter et Goolge +1.

Comme alternative souhaitable : des astuces pour déplacer dynamiquement l'espacement en fonction de la présence du compteur de boutons ?

Answer 1

Ce que j'ai fait, c'est que j'ai mis derrière le bouton "like" de Facebook un ballon à zéro qui ressemble à celui de Facebook. La partie la plus délicate a été de le positionner au bon endroit car apparemment la largeur du bouton like lui-même est différente selon le navigateur et il n'y a aucun moyen de dépendre de son flux puisqu'il est dans un iframe séparé.

Voilà à quoi ça ressemble :

• DOM (tout ce qui se trouve dans fb_bg_count_balloon, provient de l'iframe de facebook) :

  <div class="fb_like_container">
      <div class="fb_bg_count_balloon">
          <table cellspacing="0" cellpadding="0"><tbody><tr>
              <td>
                  <div class="fb_count_nub">
                      <s></s><i></i>
                  </div>
              </td>
              <td><div class="fb_count_count">0</div></td>
          </tr></tbody></table>
      </div>
      <div class="fb_like_foreground">
          <fb:like href="http://yoururl.com/path" send="false" layout="button_count" width="90"></fb:like>
      </div>
  </div>

• SCSS (je le trouve beaucoup plus lisible qu'un simple CSS - c'est ce qui permet les sélecteurs imbriqués ici - vous pouvez le traduire en un simple CSS valide assez facilement en aplatissant l'imbrication) :

  .fb_like_container {
      width:90px;
      position:relative;
  
      .fb_bg_count_balloon {
          position:absolute;
          top: 1px;
          right: 13px;
          font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
          font-size: 11px;
          color: #333;
          .fb_count_nub {
              display: block;
              position: relative;
              z-index: 2;
              height: 0;
              width: 5px;
              top: -5px;
              left: 2px;
  
              s, i {
                  display: block;
                  border-style: solid;
                  border-color: transparent;
                  border-right-color: #D7D7D7;
                  border-width: 4px 5px 4px 0;
                  position: relative;
                  top: 1px;
              }
              i {
                  left: 2px;
                  top: -7px;
                  border-right-color: white;
              }
          }
          .fb_count_count {
              background-color: white;
              border-style: solid;
              border-color: #D1D1D1;
              border-width: 1px;
              height: 14px;
              margin-left: 1px;
              min-width: 15px;
              padding: 1px 2px 1px 2px;
              text-align: center;
              line-height: 14px;
              white-space: nowrap;
          }
      }
      .fb_like_foreground {
          position:absolute;
          left: 0;
          top: 0;
          z-index:3;
      }
  }

• Et les heureux ajustements pour l'IE :

  <!--[if IE 9]>
      <style type="text/css">
          .fb_like_container .fb_bg_count_balloon {
              right: 16px;
          }
      </style>
  <![endif]-->
  <!--[if lte IE 8]>
      <style type="text/css">
          .fb_like_container .fb_bg_count_balloon {
              top: 2px;
              right: 17px;
          }
      </style>
  <![endif]-->

Les problèmes de cette méthode sont les suivants :

1. Si facebook change quelque chose, ça va probablement casser (au moins visuellement)
2. Au chargement, jusqu'à ce que Facebook analyse votre fb:like, vous n'aurez que la bulle.
3. Le "fb_count_nub" de FB est dégoûtant, mais je suppose qu'il est assez portable - Vous pouvez simplement remplacer tout le contenu (celui de fb_bg_count_balloon) par une image.

Answer 2

Vous pouvez le truquer, ce que j'ai fait c'est que je cherche un post avec déjà des likes dessus, en utilisant firebug j'ai remplacé le compte par "0" puis j'ai fait une capture d'écran, puis j'ai recadré ( Largeur par défaut : 90 pixels. Hauteur : 20 pixels. ) le bouton "J'aime" avec maintenant un compte zéro et en faire le fond du bouton "J'aime".

<style>
    div.like {background:url(likewithzerocount.png) no-repeat left center}
</style>
<div class="like">
    <fb:like href="#" send="false" layout="button_count" width="90" show_faces="false"></fb:like>
</div>