Show zero in button_count Like button

Question

Is there a way to force the like button (styled as button_count) to show zero likes?

That is the preferred solution, to match Twitter and Goolge +1.

As a underirable alternative: any tips to dynamically shift spacing around depending on the presence of the button counter?

Masticate

Answer 1

You can fake it, what I did is I look for a post with already have likes on it, using firebug I replaced the count with "0" then have it screenshot, then I cropped (default width: 90 pixels. height: 20 pixels.) the like button with now zero count and make it the background of the like button.

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

Discomposure

For anyone finding this solution, because the counter is rendered with HTML and not a background image, this implementation will break across browsers, ie, iPhone, who show the bubble dimensions at a slightly different size – Enginery

Answer 2

What I've done was putting behind the Facebook like button a zero-count balloon which looks just like Facebook's. The tricky part was positioning it in the right place since apparently the width of the like button itself is different per browser and there's no way to depend on its flow since it's in a separate iframe.

Here's how it looks:

• DOM (everything within fb_bg_count_balloon, is from facebook's 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 (I find it much more readable than plain CSS - it's what enables the nested selectors here - you can translate it to valid plain CSS quite easily by flattening the nesting):

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

• And the happy tweaks for 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]-->
  

The problems with this way are:

1. If facebook changes anything, it'll probably break (at least visually)
2. When loading, until facebook parses your fb:like, you'll have only the balloon.
3. FB's "fb_count_nub" is disgusting, but I guess quite portable - You can just replace it all (fb_bg_count_balloon's content) with an image.

Callimachus

Thanks, complicated but helpful! – Masticate