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

Unfortunately, the numbers for the website of my employer is nowhere near 22'000, so the powers that be have decided that we should not show the number of "likes" until said number is a little more in our favour. As far as I know, I don't have access to the layout of the button through Javascript or CSS (it's in an iframe served by facebook). Are there any other ways to hide the count?

14 Answers
14

The Like button coded to show "Recommend" is 84px wide and the "Like" button is 44px, will save some time for you CSS guys like me who need to hide how unpopular my page currently is! I put this code on top of my homepage, so initially I don't want it to advertise how few Likes I have.

If you're using the javascript version of the button, check out my answer below. There's more you need to do now to make sure everything still works correctly. We'll need to keep changing things as Facebook changes -- that is one of the pitfalls of mucking with things that weren't originally meant to be modified.
–
AkrikosSep 22 '11 at 17:14

have fun not cutting the button off in mobile webkit.
–
Marcy SuttonNov 16 '11 at 0:47

9

This does not take into account the length of the text in different languages. So you might end up cutting the text off. Unless there is a way to fix what language the button is displayed in, but I'm not aware of such a setting.
–
Emil StenströmJan 25 '12 at 16:15

2

you can force the language by specifying the locale when including the script from facebook
–
The SurricanJan 27 '12 at 16:59

this doesn't really work anymore because they've changed the Like button's functionality. i suspect it was partially deliberate to halt this kind of 'behavior' which is likely against terms and conditions. plus watch out because FireBug will complain sometimes if you click on something that is partially hidden as a security measure
–
Simon_WeaverSep 15 '10 at 2:50

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:

I know many solutions have been posted already, but mine is still somewhat different. It works for the HTML5 Version of the like button and only uses css to hide the count box. Don't forget to add the appId to test.

It seems as if FaceBook has recently changed some code - whenever I clicked "Like", the contents jumped to the left, thus messing up the UI. No CSS / JS tricks made it work. I went with a more simple solution, using an iframe.

NOTICE - Though some devices already support iFrames, not all mobile devices do. iFrames are actually old and not recommended at all, but it did the trick for me.

Lets take the default like-generation script from facebook, and generate an iFrame like box;

Now you'll probably see the left top corner of the counter. Now we have to fix the iFrame. Give it a class;

<iframe class="like_box" (...)> </iframe>

And make it so that it is always english, by adding "&locale=en_US" to the URL. This is to prevent weird layouts in other countries - in Dutch it would be "Vind ik leuk" and in english "Like". I guess everybody, in every language, knows a "Like" so lets stick with that.

Now we'll add some more CSS for the like_box;

.like_box {
margin-top:-40px;
}

So the whole code looks like this (i've removed the app_id as I didn't need it)

bounty added: Are there any additional clever things you can do with the Javascript API? perhaps put your own Like button and use the API to 'like' something. i suspect that's not possible but anything else clever?
–
Simon_WeaverSep 15 '10 at 2:58

FACEBOOK SHARE: The box_count and button_count options displays a count of the total number of times the page was shared on Facebook, how many comments were added to the story shared on Facebook, and how many times friends Liked the shared story [developers.facebook.com/docs/share]
–
Simon_WeaverSep 15 '10 at 3:00

My solution is a little hood but it works. What I do is just basically detect where the number is going to be and use css to have a box cover over it. I guess you can also cheat the system and add more hits if you want. Here is my code using jquery but it will be different than others depending on where you place the like button on your page.

Not the most glamorous but hey the security is to tight to manipulate content in side of a frame.

If you added more detail, this could be a good answer. There are a few different cases in hiding the count where the solution is vastly different because the problem being solved is different.
–
AkrikosSep 19 '11 at 18:11