Hiển thị số không trong nút_count Nút Thích

Question

Có cách nào để buộc nút tương tự (được tạo kiểu như button_count) hiển thị số lượt thích không?

Đó là giải pháp được ưu tiên, để khớp với Twitter và Goolge +1.

Là giải pháp thay thế đáng chú ý: bất kỳ mẹo nào để tự động thay đổi khoảng cách xung quanh tùy thuộc vào sự hiện diện của bộ đếm nút?

Answer 1

Bạn có thể giả mạo nó, những gì tôi đã làm là tìm một bài đăng đã có lượt thích, sử dụng firebug Tôi đã thay số bằng "0" rồi có ảnh chụp màn hình, sau đó tôi cắt (chiều rộng mặc định: Chiều cao 90 pixel: 20 pixel.) nút tương tự với số không bây giờ là 0 và làm cho nền của nút tương tự.

<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

Những gì tôi đã thực hiện đã được đặt phía sau nút Facebook giống như một quả bóng số không trông giống như của Facebook. Phần khó khăn là định vị nó ở đúng nơi vì rõ ràng chiều rộng của nút tương tự là khác nhau trên mỗi trình duyệt và không có cách nào phụ thuộc vào luồng của nó vì nó nằm trong khung nội tuyến riêng biệt.

Sau đây là cách nó trông giống:

• DOM (tất cả mọi thứ trong vòng fb_bg_count_balloon, là từ iframe facebook của):

  <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 (tôi thấy nó dễ đọc hơn so CSS đơn giản - đó là những gì cho phép các bộ chọn lồng nhau ở đây - bạn có thể dịch nó thành CSS đơn giản hợp lệ khá dễ dàng bằng cách làm phẳng phần lồng):

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

• Và chỉnh hạnh phúc cho 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]--> 
  

Những vấn đề với cách này là:

1. Nếu facebook thay đổi bất cứ điều gì, nó sẽ có thể phá vỡ (ít nhất là trực quan)
2. Khi tải, cho đến khi facebook phân tích cú pháp fb của bạn: giống như, bạn sẽ chỉ có bóng.
3. FB của "fb_count_nub" là kinh tởm, nhưng tôi đoán khá di động - Bạn chỉ có thể thay thế tất cả (nội dung của fb_bg_count_balloon) bằng một hình ảnh.