Published: 8 years ago

Trick of the day: hide Tweetmeme’s button number

Tweetmeme is a great plugin that makes it easier for your reader to retweet your posts. But, if you don’t have a high number of retweets, especially in the beginning, it might look a little sad seeing all those zeros on your page.

While working on a friend’s WordPress blog, I was asked to remove the number from the Tweetmeme button (in the compact version). Of course this can’t be accomplished from the settings page, so it required little bit of CSS work.

Here’s the code generated by the Tweetmeme WordPress plugin in your post:

<div class="tweetmeme_button" style="float: left; margin-right: 0;"><iframe src="http://api.tweetmeme.com/button.js?url=http%3A%2F%2Fwww.fdavidedicillo.com%2F%3Fp%3D1160&source=
DavideDiCillo&style=compact" height="20" width="90" frameborder="0" scrolling="no"></iframe></div>

And here’s the code you need to add to your stylesheet in order to remove the number from the Tweetmeme button:

.tweetmeme_button { overflow: hidden; width: 70px; }
.tweetmeme_button iframe { position: relative; left: -10px; }

For those of you not familiar with CSS, what we’re doing is simply telling the container of the IFRAME (which contains the actual button) to hide everything that goes beyond its borders. We then forced the IFRAME to move 10px to the left, pushing the number outside the container’s borders.

  • http://www.rewindmemories.com adam

    I just want to include tweetme on my blog in wordpress, not on every page. Im using wordpress. How would I go about excluding it from the other pages? Thanks.

    • http://www.davidedicillo.com Davide

      On the Tweetmeme setting page deselect “Display the button on pages” and you should be good to go.

  • http://www.rewindmemories.com adam

    I just want to include tweetme on my blog in wordpress, not on every page. Im using wordpress. How would I go about excluding it from the other pages? Thanks.

    • http://www.davidedicillo.com Davide

      On the Tweetmeme setting page deselect “Display the button on pages” and you should be good to go.

  • jamie

    how do you use tweetmeme on a secure wordpress page without the button causing security popups

    • http://www.davidedicillo.com Davide

      I don’t think you can’t, cause it will always make a call to an external server.

  • jamie

    how do you use tweetmeme on a secure wordpress page without the button causing security popups

    • http://www.davidedicillo.com Davide

      I don’t think you can’t, cause it will always make a call to an external server.

  • dookie

    Is it possible to hide/restyle the button but use the data? Basically want I’m trying to get is a simple rectangle/button with the count + text in it – ie. “32 retweets” or whatever.

    Is there any way to integrate the tweetmeme data in there?

  • dookie

    Is it possible to hide/restyle the button but use the data? Basically want I’m trying to get is a simple rectangle/button with the count + text in it – ie. “32 retweets” or whatever.

    Is there any way to integrate the tweetmeme data in there?

  • http://blog.jmelgoza.com Jason

    Very helpful. Cheers!

  • http://blog.jmelgoza.com Jason

    Very helpful. Cheers!

  • http://www.dubaimoves.com Sal

    Hi there,

    This is a great fix, though for it to work correctly in IE, you should also make the containing div have “position: relative;”.

    So in other words, “position: relative;” should also be added to the class “tweetmeme_button”.

  • http://www.dubaimoves.com Sal

    Hi there,

    This is a great fix, though for it to work correctly in IE, you should also make the containing div have “position: relative;”.

    So in other words, “position: relative;” should also be added to the class “tweetmeme_button”.

  • Flo

    Hey,

    very helpful, but I do need this for the retweet button from topsy, can you explain how can I do that? Please tell/email me!

    Thank you very much!

  • Flo

    Hey,

    very helpful, but I do need this for the retweet button from topsy, can you explain how can I do that? Please tell/email me!

    Thank you very much!

  • Flo

    Just have figured out how to do this with the topsy button, just ad to the .css:

    .topsy-sm {
    overflow: hidden; width: 70px;
    position: relative; left: -16px;
    }

  • Flo

    Just have figured out how to do this with the topsy button, just ad to the .css:

    .topsy-sm {
    overflow: hidden; width: 70px;
    position: relative; left: -16px;
    }

  • Tessa

    Awesome info, exactly what I needed. Thank you!

  • http://twitter.com/iron77pl Andrzej Z.

    Unfortunately, it will only work if tweet count number has just one digit – otherwise it gets cutted off.

Some HTML is OK