Mostrar cero en button_count Como el botón

Question

¿Hay alguna manera de forzar el botón Me gusta (con el estilo de button_count) para mostrar cero me gusta?

Esa es la solución preferida, para que coincida con Twitter y Goolge +1.

Como una alternativa indeseable: ¿alguna sugerencia para cambiar dinámicamente el espaciado dependiendo de la presencia del contador de botones?

Answer 1

Puede fingir, lo que hice es que busco un post con ya tienen gustos en él, usando firebug He sustituido el conteo con "0" y luego tenerlo pantalla, luego recortada (ancho por defecto: 90 píxeles de alto: 20 píxeles) el botón Me gusta con ahora cero y convertirlo en el fondo del botón Me gusta.

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

Answer 2

Lo que he hecho fue poner detrás del botón me gusta de Facebook un globo cero que se parece al de Facebook. La parte engañosa fue ubicarlo en el lugar correcto, ya que aparentemente el ancho del botón similar en sí es diferente por navegador y no hay manera de depender de su flujo ya que está en un iframe separado.

Así es como se ve:

• DOM (todo dentro de fb_bg_count_balloon, es de marco flotante 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 (Me resulta mucho más legible que CSS normal - es lo habilita los selectores anidados aquí; puede traducirlo a CSS simple válido con bastante facilidad aplanando el agrupamiento):

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

• Y los ajustes felices para 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]--> 
  

Los problemas con esta forma son:

1. si Facebook cambia nada, es probable que la rotura (al menos visualmente)
2. Al cargar, hasta que facebook analice su archivo fb: como, solo tendrá el globo.
3. Fb's "fb_count_nub" es repugnante, pero creo que es bastante portátil: puede reemplazarlo todo (contenido de fb_bg_count_balloon) con una imagen.