Facebook Like-Button - hide count?

Question

In the setup dialog for the Like-Button, there are only two options for layout:

• Alternative 1
• Alternative 2

Unfortunately, the numbers

Answer 1

If you do overflow:hidden then keep in mind that it will also hide the comment box that comes up in XFBML version... after user likes it. So best if you do this...

/* make the like button smaller */
.fb_edge_widget_with_comment iframe
{
    width:47px !important;
}

/* but make the span that holds the comment box larger */
span.fb_edge_comment_widget.fb_iframe_widget iframe
{
    width:401px !important;
}

Answer 2

If you're using Facebook's javascript like button (so you can capture like events), here's what we had to do:

Due to a change Facebook recently made in the way comment dialogs display, we had to change how we were hiding it. The way they show the comment dialog has been 'moving' the content inside of the my overflow:hidden element so that the button looks really odd to the user after they click the like button.

In addition to adding a wrapping element with an 'overflow:none' style, you will need to hide the comment element that Facebook is putting onto your page:

Styles:

span.no_overflow {
  overflow: none;
  width: 50px;
}

.no_overflow span.fb_edge_comment_widget.fb_iframe_widget {
  display: none;
}

Markup:

<span class="no_overflow">
<fb:like></fb:like>
</span>

We're still using the fb:like markup though. I have not tested this with the new div-based markup that Facebook is providing on their site now.

Answer 3

Most of the suggestions are now, no longer valid.

The correct fix as of today, is to use the 'button' layout.

eg. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>

The FB Docs, seem not to be fully updated yet... if you scroll down you'll see they state only 3 layouts are available, yet the dropdown suggests 4.

This means you can now use a less hacky solution!

Answer 4

This is what I've tried and it works fine in ff, chrome and ie8:

/* set width for the <fb:like> tag */

.fb-button {
    width:51px;
}

/* set width for the iframe below, to hide the count label*/

.fb-button iframe{
    width:45px!important;
}

Answer 5

Adding the following to your css should hide the text element for users and keep FB Happy

.connect_widget_not_connected_text
{
    display:none !important; /*in your stylesheets to hide the counter!*/
}

-- Update

Try using a different approach.

http://www.facebook.com/share/

Answer 6

Accepted answer is good, but be careful with multilingual pages. The text differ in length:

English: Like

Dutch: Vind ik leuk

German: Gefällt mir

Just a heads up.