defsounds

http://revisedagain.com/wp-content/themes/r

Design Hack: Facebook Like Button_count 0 Count

Posted on March 27th, 2012 Design Hack: Facebook Like Button_count 0 Count

This is just a quick write up, not really development–more like a design hack. Wether you’re a developer, designer, or just someone trying to put a site/page together for their business, odds are you’ve come across the facebook like button in all it’s horrendous glory.

Why is it horrendous? Well, the actual function of it isn’t. However, being the shallow person that I am–the button is ugly. Not just ugly, but pretty much impossible to customize for a noob and even against Facebook’s TOS to do so.

Aside from my issues with the look, there’s a function of the button_count button that is aesthetically annoying as it creates alignment troubles specially when implementing the button to appear with each blogpost along say a tweet button.

Here’s how it looks when someone has liked a post:

And here’s the problem when nobody has liked the post:

It looks all distant, lonely, and unwanted–almost like a ginger. A quick solution was to throw in a div within each fb like button and set the background image to…you guessed it a 0 chicklet..you can grab that image below:

Now onto the css and html:

  
  1. /* make the like button smaller */
  2. .fb_edge_widget_with_comment iframe
  3. {
  4.     width:80px !important;
  5. }
  6.  
  7. /* but make the span that holds the comment box larger */
  8. span.fb_edge_comment_widget.fb_iframe_widget iframe
  9. {
  10.     width:401px !important;
  11. }
  12. .count {
  13. height:18px;
  14. width:26px;
  15. background-image:url(../images/count.png);
  16. position:absolute;
  17. margin-left:50px;
  18. margin-top:1px;
  19. }

In order to customize the button your css must override some of the css created by Facebook’s javascript so make sure to append the almighty “!important” to your css styles.

The html is pretty straight forward, keep in mind you’ll have to play around with it to get it to fit in with your design:

  
  1. <li><fb:like href="yourUrl" send="false" width="450" layout="button_count" show_faces="false"><div class="count"></div></fb:like></li>

This is using FB’s XFBML method but it should be the same approach for the others. The end result is:

When the post is liked, the chicklet simply appears over the 0 count div,you may have to play around with the margins in the css but it’s a good starting place.

Leave a comment