Question

I’d like to use the Facebook like button but without the count. I’ve tried just setting the width of it’s container to 47px, with no overflow. This works on browsers on Windows, but on Mac OS X the width of the button seems to expand to 49px, so part of it is cut off.

Does anyone know of a way to use the Like button, with button_count style, but without the count AND without it being displayed differently on Windows and Mac?

Here is the code I’m using for the Facebook button:

    <script type="text/javascript"> 
    //<![CDATA[
    //Facebook like button
    window.fbAsyncInit = function() {
        FB.init({xfbml: true});
    };
    //]]>
    </script>


               <div id="fb-root"></div>
                <fb:like href="{{ page_url }}" send="false" layout="button_count" width="49" height="21" show_faces="false"></fb:like>
                <script type="text/javascript">
                    (function() {
                        var e = document.createElement('script');
                        e.async = true;
                        e.src = (document.location.protocol == 'file:' ? 'http:' : document.location.protocol) + '//connect.facebook.net/en_US/all.js';
                        document.getElementById('fb-root').appendChild(e);
                    }());
                </script>

Answer 1

Could you set the width of the button in CSS so that all browsers show it at the same with? Maybe try to use the “!important” tag so that it persist over the fb style sheet. That should allow the same “hack” to hide the display.

I don’t think there is a way to hide it by default. You may also have to tweak the style if the width of the button changes after it is pressed.