[facebook] Facebook Like-Button - hide count?

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

• Alternative 1
• Alternative 2

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'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.

Facebook now supports hiding the count, use this in the markup:

data-layout="button"

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.

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

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

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>

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.

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.

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>

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>

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/

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;
}

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;
}

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!

this worked for me:

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
    height: 26px;
    overflow: hidden;
    width: 138px;
}