As you’ve no doubt noticed, I’ve started to add Flattr buttons to my various creations. However, given that none of my other attempts to get other people to pay for my hosting have worked, I’ve learned to care more about aesthetics, tact, and tastefulness than about the actual effectiveness of my attempts.
That meant that, when I decided to add a Flattr button to the list of TiddlyWiki plugins I’ve created, I insisted on it looking good and not disturbing the rest of the layout.
My first attempt was to use the standard “dynamic counter” button in the large, rectangular form that Digg originally popularized. It turns out that something about TiddlySpace keeps it from showing and I don’t have time to fool around. On to the static button.
Flattr gave me code that looks like this:
<a href="http://flattr.com/thing/416932/TiddlyWiki-Plugins-by-ssokolow" target="_blank"> <img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a>
Unfortunately, embedding raw HTML in TiddlyWiki using <html> is messy, inelegant, and wraps the HTML in a span with no ID or class to set float: right; on. Therefore, I started translating the markup into TiddlyWiki’s syntax:
[>img[Flattr this|http://api.flattr.com/button/flattr-badge-large.png][http://flattr.com/thing/416932/TiddlyWiki-Plugins-by-ssokolow]]
According to the documentation, that should’ve been enough… but unlike their demo, I was getting align="right" rather than float: right;… so I wrapped the thing in a div using TiddlyWiki’s custom class markup and floated it by adding a line to the StyleSheet tiddler:
{{flattrFloat{
[>img[Flattr this|http://api.flattr.com/button/flattr-badge-large.png][http://flattr.com/thing/416932/TiddlyWiki-Plugins-by-ssokolow]]
}}}
.flattrFloat { float: right; }
That just left one problem: TiddlyWiki was inserting a <br> tag that was throwing off my layout. A quick adjacent sibling rule solved that.
.flattrFloat + br { display: none; }
You can see the result in the wild on my TiddlyWiki Plugins list.
Floating Flattr Buttons in TiddlyWiki by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Nice guide! 🙂
I added it to our plugin/guide list!