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

User · Answer

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>

User · Answer

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    lt span class  no overflow  gt   lt fb like gt  lt  fb like gt   lt  span gt    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

User · Answer

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     lt script type  text javascript  gt      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       lt div gt  lt  div gt    attr  id    hide count                parent append hide counter               clearInterval facebook load                    lt  script gt     lt style type  text css  gt       hide count           position absolute          top -8px          left 122px          background  becdd5          padding 5px 10px          lt  style gt

User · Answer

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

User · Answer

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

User · Answer

Just encompass the iframe in a div  set the width to the width of button  set overflow to hidden i e      lt div style  width 52px overflow hidden   gt         lt fb like layout  button count  gt  lt  fb like gt          lt div id  fb-root  gt  lt  div gt             lt script gt                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                                  lt  script gt         lt  div gt

User · Answer

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

User · Answer

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

User · Answer

Facebook now supports hiding the count  use this in the markup   data-layout  button

User · Answer

Most of the suggestions are now  no longer valid   The correct fix as of today  is to use the  button  layout   eg   lt 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  gt  lt  div gt      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

User · Answer

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

User · Answer

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      lt iframe src    www facebook com plugins like php href http 3A 2F 2Fwww example com amp amp send false amp amp layout box count amp amp width 45056 amp amp show faces false amp amp font amp amp colorscheme light amp amp action like amp amp height 90 amp amp appId 1234567891011  scrolling  no  frameborder  0  style  border none  overflow hidden  width 45056px  height 90px   allowTransparency  true  gt  lt  iframe gt    Now lets wrap a div around there    lt div class  like wrap  gt       lt iframe       gt  lt  iframe gt   lt  div gt    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    lt iframe class  like box        gt   lt  iframe gt    And make it so that it is always english  by adding   amp 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    lt div class  like wrap  gt       lt iframe class  like box           src    www facebook com plugins like php href CURRENT-URL-ENCODED amp amp send false amp amp layout box count amp amp width 45056 amp amp show faces false amp amp font amp amp colorscheme light amp amp action like amp amp height 90 amp amp locale en US           scrolling  no           frameborder  0           style  border none  overflow hidden  width 45056px  height 90px            allowTransparency  true  gt  lt  iframe gt   lt  div gt    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

User · Answer

this worked for me    fb-like fb edge widget with comment fb iframe widget       height  26px      overflow  hidden      width  138px

User · Answer

This is what I ve tried and it works fine in ff  chrome and ie8      set width for the  lt fb like gt  tag      fb-button       width 51px        set width for the iframe below  to hide the count label     fb-button iframe      width 45px important

User · Answer

It is now officially supported by Facebook  Just select the  Button  layout   https   developers facebook com docs plugins like-button

[facebook] Facebook Like-Button - hide count?

Examples related to facebook