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?
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;
}
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.
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.
Just encompass the iframe in a div set the width to the width of button, set overflow to hidden i.e.
<div style="width:52px;overflow:hidden;">
<fb:like layout="button_count"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</div>
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!
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.
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.
CSS:
<style type="text/css">
.fb-like span {
display: block;
height: 22px;
overflow: hidden;
position: relative;
width: 140px /* set this to fit your needs when support international sites */;
}
.fb-like iframe {
height: 62px;
overflow: hidden;
position: absolute;
top: -41px;
width: 55px;
}
</style>
FB Like Button:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>
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&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&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&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&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.
this worked for me:
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
height: 26px;
overflow: hidden;
width: 138px;
}
Facebook now supports hiding the count, use this in the markup:
data-layout="button"
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.
<script type="text/javascript">
var facebook_load = '';
$(document).ready(function() {
facebook_load = setInterval('checkIframeFacebookLoad()',100);
});
function checkIframeFacebookLoad() {
if($('iframe.fb_ltr').length) {
var parent = $('iframe.fb_ltr').parent();
var hide_counter = $('<div></div>').attr('id', 'hide_count');
parent.append(hide_counter);
clearInterval(facebook_load);
}
}
</script>
<style type="text/css">
#hide_count {
position:absolute;
top:-8px;
left:122px;
background:#becdd5;
padding:5px 10px;
}
</style>
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.
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;
}
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.
