Sıfırla button_count Beğen düğmesi

Question

Sıfır beğeni göstermek için benzer düğmeyi (button_count gibi biçimlendirilmiş) zorlamak için bir yol var mı?

Twitter ve Goolge +1'i eşleştirmek için tercih edilen çözüm budur.

İstenmeyen bir alternatif olarak: düğme sayacının varlığına bağlı olarak boşluğu dinamik olarak kaydırmak için herhangi bir ipucu?

Answer 1

Sahte o, ben "0" ile sayımı yerini kundakçı kullanarak, zaten üzerinde sever var olan bir yazı için bakmak ne yaptığını daha sonra bunu ekran görüntüsü olabilir, o zaman (varsayılan genişliğini kırpılmış: 90 piksel yükseklik: 20 piksel) Sıfır sayımı olan benzeri düğme ve benzer butonun arka planı. karmaşık ama yararlı

<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

Yaptığım şey, Facebook’un tıpkı Facebook’a benzeyen sıfır sayımlı bir balon gibi ardı ardına basmaktı. Zor bölüm, doğru yerde konumlandırıyordu, çünkü görünüşte, benzer düğme genişliğinin kendisi tarayıcı başına farklıdır ve ayrı bir iframe olduğu için akışına bağlı kalmanın bir yolu yoktur. bu ne var - (Ben çok daha okunabilir düz CSS daha bulmak

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

• DOM (herşey fb_bg_count_balloon içinde Facebook'un iframe dan): Burada

  böyle görünüyor iç içe geçmiş seçicilerin burada olmasını sağlar - yuvalamayı düzleştirerek bunu kolayca geçerli CSS'ye çevirebilirsiniz):

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

IE için

• Ve mutlu ince ayarlar: bu yolla

  <!--[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]--> 
  

sorunlar şunlardır: facebook şey değiştirirse

1. , muhtemelen (en azından görsel olarak)
kırarım
2. Yükleme sırasında, facebook sizin fb: like gibi ayrıştırıncaya kadar yalnızca balonunuz olur.
3. FB "fb_count_nub" iğrenç, ama oldukça taşınabilir tahmin - Sadece bir resim ile hepsini (fb_bg_count_balloon içeriği) yerini alabilir.