Floating Flattr Buttons in TiddlyWiki

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 this

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:

[>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.

CC BY-SA 4.0 Floating Flattr Buttons in TiddlyWiki by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

This entry was posted in Geek Stuff. Bookmark the permalink.

One Response to Floating Flattr Buttons in TiddlyWiki

  1. Marie says:

    Nice guide! 🙂
    I added it to our plugin/guide list!

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution under the same terms as the associated post.       Also, please be aware that non-constructive comments will have their URL field erased before being approved in order to combat SEO spam.