More on implementing Twitter’s Tweet button

A week or so back, I wrote about putting a Tweet button onto a self-hosted WordPress blog. The method I used was fine – it works – but I was struggling to place the button within my page (I knew where to put it in my code but it seemed to display in the wrong place sometimes, as a result of some of the floats that the stylesheet applies).

That’s when I called in my buddy Alex: XHTML and CSS wizard; and fixer of many things on this site.

He spotted that, even though Twitter gives us three options for implementing the Tweet button: JavaScript, IFrame, and roll your own, the JavaScript implementation also uses an IFrame.

The trouble with this is that IFrames are bad. Well, not really bad, but certainly deprecated for Strict HTML and XHTML, and certainly not the direction I want to be heading in for a compliant site. Ideally, I would find another way around the issue but rolling my own Tweet button doesn’t look great) and Twitter’s implementation uses several images in one file, just showing the appropriate section of the image. I could use this, with image replacement techniques for hover and click (which is what Twitter do) but, to be honest, that was a little out of my league, so IFrames it is…

Alex helped me style up the button – if you want to do something similar, this was the CSS that he used:

p.social-media {margin-top: -15px;}
iframe.twitter-share-button {float: left; margin-right: 1em;}

Together with adding class="social-media" to the

tag in the code to display the tweet button so that it now reads:

Leave a Reply