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

All you need to do is edit the iframe code that facebook gives you and change the width to 47 (you need to change it in 2 places). Seems to work perfectly for me so far.

Answer 2

It is now officially supported by Facebook. Just select the 'Button' layout.

https://developers.facebook.com/docs/plugins/like-button/

Answer 3

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;

Click here to generate like button

Go for the "Box_Count" style, with a counter on top.

When you press "Grab the code", go for the iFrame code. You'll get something similar to this;

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=1234567891011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45056px; height:90px;" allowTransparency="true"></iframe>

Now lets wrap a div around there.

<div class="like_wrap">
    <iframe (...)></iframe>
</div>

Give it the following CSS:

.like_wrap {
    width:55px;
    height:25px;
    overflow:hidden;
}

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)

HTML:

<div class="like_wrap">
    <iframe class="like_box" 
        src="//www.facebook.com/plugins/like.php?href=CURRENT-URL-ENCODED&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;locale=en_US" 
        scrolling="no" 
        frameborder="0" 
        style="border:none; overflow:hidden; width:45056px; height:90px;" 
        allowTransparency="true"></iframe>
</div>

CSS:

.like_wrap {
    width:55px;
    height:25px;
    overflow:hidden; 
}

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

And now i have a decent, small, like box, that works fine and doesn't jump around. Let me know how this works out for you and if there are any problems that you are facing.