Geek Answers Handbook

Show zero in button_count as a button

Is there a way to make a similar button (in the style of button_count) show a null value?

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

As an alternative alternative: any hints for dynamic interval shift depending on the presence of a button counter?

+7
source share
2 answers

You can fake it, I did it, I'm looking for a message that already likes on it using firebug. I replaced the counter with "0" and then a screenshot, then I cropped (default width: 90 pixels .: 20 pixels.) A similar button with a zero count and make its background a similar 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>
+1
source

What I was doing was what we put on Facebook as a button a loop with a zero count, which looks just like Facebook. The hard part was to position it in the right place, since it seems that the width of the button itself is different for each browser, and there is no way to depend on its stream, since it is in a separate iframe.

Here's what it looks like:

  • DOM (everything inside fb_bg_count_balloon, from iframe 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 (I find it more readable than plain CSS) - this is what nested selectors include - you can easily translate it into valid plain CSS, smoothing out 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 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]-->

Problems with this method:

  • If facebook changes something, it will probably break (at least visually)
  • When downloading, until facebook analyzes your fb: for example, you only have a balloon.
  • FB "fb_count_nub" is disgusting, but, I think, quite portable. You can simply replace it (fb_bg_count_balloon content) with an image.
+1
source

More articles:


All Articles