Pokaż zero w button_count Like button

Question

Czy istnieje sposób na wymuszenie podobnego przycisku (w stylu button_count), aby pokazać zero lubi?

Jest to preferowane rozwiązanie, które pasuje do Twittera i Goolge +1.

Jako pożądaną alternatywę: wszelkie wskazówki dotyczące dynamicznego przełączania odstępów w zależności od obecności licznika przycisków?

Answer 1

Można udawać, co zrobiłem, to patrzę na stanowisko z już lubi na nim, używając Firebug Wymieniłem licznik z „0”, a następnie mieć to zrzut ekranu, potem przycięte (domyślną szerokość: 90 pikseli, wysokość: 20 pikseli,) podobny przycisk z teraz zerem i sprawi, że będzie on tłem przycisku podobnego.

<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

To, co zrobiłem, to umieszczenie za przyciskiem Facebooka balonu zerowego, który wygląda jak Facebook. Najtrudniejszą częścią było umieszczenie go we właściwym miejscu, ponieważ podobno szerokość samego przycisku jest różna dla każdej przeglądarki i nie można polegać na jego przepływie, ponieważ jest on w oddzielnym elemencie iframe.

Oto jak to wygląda:

• DOM (wszystko w fb_bg_count_balloon jest z Facebooka iframe):

  <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 (uważam, że o wiele bardziej czytelny niż zwykły CSS - to co włącza tutaj selektory zagnieżdżone - możesz łatwo przetłumaczyć je na prawidłowy CSS poprzez spłaszczenie zagnieżdżenia):

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

• A szczęśliwe poprawek dla 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]--> 
  

Problemy z tej drodze są:

1. facebook Jeśli zmienia się nic, to pewnie złamać (przynajmniej wizualnie)
2. Podczas ładowania, dopóki facebook nie przeanalizuje twojego fb: jak, będziesz miał tylko balon.
3. "Fb_count_nub" FB jest obrzydliwe, ale wydaje mi się dość przenośne - możesz po prostu zastąpić wszystko (zawartość fb_bg_count_balloon) obrazem.