Davide Di Cillo

Trick of the day: hide Tweetmeme’s button number

Sunday, August 30th, 2009

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.

Tags: CSS, How to, Plugins, Trick of the day, Tweetmeme, Twitter, Wordpress
Posted in Whatever | View Comments