HOME PAGE     Delicious.Com Bookmark this on Delicious    StumbleUpon.Com Recommend to StumbleUpon

How to clone Flattr buttons between your web pages

I first met Flattr early in 2013. I like the idea in general. And I hope it will help me receive $upport from the people who benefit from my web pages.

If you don't yet have a web page of your own with a Flattr button on it, you don't yet want the page you are reading. Instead, I invite you to read my page explaining what Flattr is, and how to get started.

More buttons for an existing Flattr user

I say "existing Flattr user". I should restrict that somewhat. There are Flattr users who get their Flattrs by somehow "connecting" (my word... may be used in same way by Flattr (and may not be)) their Wordpress blog, or other widely used platforms to their Flattr account. This page isn't for those users.

One of the delights of Flattr is that it does seem to try to provide multiple ways to skin the "Get- paid- for- your- work" cat.

One of the frustrations of Flattr is that it does seem to try to provide multiple ways to skin the "Get- paid- for- your- work" cat... but, though frustrating, the work to please several constituencies is welcome.

Furthermore, Flattr is evolving.

This page for you, if you "do" html

If you work directly with the html in pages you publish on the web, this page is for you!

When I started using Flattr, I stumbled down the path of using Javascript to put Flattr buttons on my pages. There was a bit of code to go in the <head></head> block, and a bit of code in the page's <body></body> block.

I'm pretty sure you can still "do" Flattr buttons on your pages this way. It is the way I will press on with here, and in my own pages. There is documentation at the embedded buttons page of developers.flattr.net.

Before I say more about working with that answer, I should mention in passing that I may be doing things the hard way. If you go to https://flattr.com/embed, you will be offered a simpler button. It seems to be relatively new in October 2013, and it seems that you just put one bit of code in where you want the Flattr button. You put the code in your page's <body></body> block.

But. You have to fetch a new block of code for each page you are giving a button. (There's a "serial number" in it.)

By the way... that page does seem to give you a way to enter a URL manually.. but the URL is only relevant if you are creating a static button. The page's willingness to accept a URL when trying to make a different sort of button confused me at first.

Us dinosaurs who used Flattr in "the old days" (say, July 2013) had a way to fill in a number of fields about new "things" (Flattr's word for one of the pages you've put a "Flattr me" button on). Things like "title", "description", "language", "tags". These are all useful, I think. At October 2013, I can't find an easy way to fill in those fields any more. (We used just to go to https://flattr.com/submit.)

Now-a-days, I think we have to operate differently. I think we put a button on our web-page, and only after someone has clicked on it, "Flattr'd us", does that page appear in your list of your "Things". (Which I find just jumbled in no order I can discern.) Once it is in that list, I hope that we will be able to edit the description, etc.


Sorry I had to subject you to all that preface.

We're supposing that you are a Flattr user with at least one page already. That you "do" html. That you want to clone a new page out of an old one. That you use the "old"/"complicated" two part Javascript answer. That your pages with Flattr buttons on them have....

Stop Press!... The rest of this page...

... is a work in progress. See what I am currently doing at
... for an idea of MY current idea of "how to do Flattr buttons by hand!
It is still SOMETHING LIKE the following... but not exactly. Sorry.

The code in the head block is the same on all of the pages associated with a given Flattr account.

The code in the body block has at least three things to change in it... which is a pain, but it is also good news, I think.

You need to change the reference to the page the Flattr button appears on. That must be tweaked for each page you have one or more Flattr buttons on.

In the buttons I had on my sites, in the "body" block code, I also had a "title" section and some descriptive text at the end of the block of code.

If you use one of the new, simple, buttons, you don't need the block of code in the page's "head" block, you don't need to put the page's URL in the button-creating code, and you don't supply title or description. So: the new buttons are easier to use. Good. Except that you can't pre-enter title, description, etc. And you also must fetch "new" code for each page from the Flattr site. (Note the "serial number" near the start of the code.)

I think the extra work associated with cloning the old buttons had the following advantage. I think that when the button was called for the first time, the values in the "title" section, and description, were passed to Flattr, and incorporated in the entry for that "thing" in your list of "things". The title and description may also have been presented to the person Flattring your page.

So... the old buttons were a bit more work, but they supplied a bit more function. Function which, I hope, is still available to you, but after the fact, and not at the time you set up the button.

To recap: How to clone...

So... to recap:

If you are using the old-style code (with URL in it), to create a new webpage out of an old one, re-using the existing twp part Flattr button code...

Create the new page, retaining the two blocks of Flattr Javascript.

The block in the "head" part of your page doesn't need any changes.

The block in the "body" part will need several things changed: Any URL needs to be fixed. There may be a "title" section. If so, fix it. There may be a description. If so, fix it.

Wait until someone has Flattr'd the new page. When they have, go to your list of your "Things", and tweak the title, description, etc., as necessary.

Note to self: Use ss/BookMad.htm as source of code, if retro-fitting old pages.

(If anyone can tell me how to get at those values before the page has been tweaked, I will be most grateful. Email info at bottom of page.)

This is part of one of my web sites. Please visit ...

Main table of contents for Sheepdog Software

To access those pages

You can email this page's editor, Tom Boyd. Click here for details.

Valid HTML 4.01 Transitional Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. Mostly passes. There were two "unknown attributes" in Google+ button code, and four in the Flattr code. Sigh.

-- Page ends --