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:
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:
When I asked him how this works, he explained that the class on the
is just to close up the top margin; the real magic is floating just the Tweet button (which cured the CSS float issues that had been frustrating me).
Of course, there may be plugins to display buttons like Tweet, Facebook Share/Like, etc. but when something only takes a couple of lines of code, I’d rather implement it natively than add to the list of plugins running on my WordPress installation.