Freitag, 28. Mai 2010

flattr plugin for blogger.com/blogspot.com (old version)

There is a new version of this plugin that uses the new API. Please look here.


As this post is intended for an international audience, I'll write it in English.
As I'm a memeber of flattr.com since a few days, I wanted to add a flattr button to my blog posts.
I found this solution on Nicolas Gramlich's blog (who copied most of the script from Mattias Bomelin), but it worked only on short blog entries. All others showed only a large "ER" which seems to be the flattr error message.
If Nicolas hasn't changed his Blogger template yet, you can see the behaviour if you click on the link above. (Looks good sometimes, shows error at other times.)
When I investigated the issue, I found out that the flattr decription as sent by the plugin was too long, and I was also told that it shouldn't contain newlines or unescaped ' chars. Update: This seems to have been a wrong information, at least if a div tag is used like in the script. The posts ended up with literal \n and \' in them, so I put the relevant lines in comments.
I tweaked everything a bit, and here's a solution to the problem:
Click this link to get a changed version of the plugin.
It will:
  • Use the post itself as the flattr description just as the original plugin did, but …
  • It will remove all HTML tags from the flattr description.
  • It will replace newlines by \n. See update above.
  • It will escape ' chars to \'. See update above.
  • It will truncate the description to a maximum length of 980 chars. If possible, it will use a space as truncation point and add "…".
  • It will respect other flattr limits and truncate the title to a maximum length of 80 chars and the tags to a maximum length of 230 chars in a similar manner. (I stayed a little away from the hard limits of 100 / 255 chars, respectively.)
  • Update: flattr requires the title of a flattr thing to have at least five chars. So if you have a blog post called "Uh!" it won't be enough and you'll get an error in the flattr button. I couldn't think of a good possibility to fill missing chars without garbling the blog post title, so I just kept it the way it is (suggestions welcome). So this is a caveat: Always use post titles longer than 5 chars! ;-)
As you can see in this post, I added the flattr button to the bottom of the post, different from what Nicolas did. To achieve that, I placed it in the 'post-body entry-content' div. Here are a few lines from the Blogger template and the start of the plugin to illustrate where I put it:

<div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->

   <!-- flattr plugin starts here -->
   <div expr:id='&quot;flattr_summary_&quot; + data:post.id' style='display: none;'> 
   <data:post.body/> 
   </div> 


Note that I put the <span> tags from Nicolas' version into comments to achieve a sensible placement. You'll have to reenable them if you want to use the plugin in the title as Nicolas did.
Also, I changed the language to de_DE as appropriate for my blog; you'll have to change that, too, if you're not writing in German.

If anybody knows how to change the content of the RSS and Atom feeds I'd appreciate a notice as I'd like to add a flattr button to the feeds, too.

So, happy flattring to all of you! Credits go to Nicolas and especially to Mattias who created the original work.

11 Kommentare:

  1. Flattered. But still not working ...

    My testing blog (econhat.blogspot.com) looks kind of OK,but not all flattr-buttons are OK. My real blog (egghat.blogspot.com) is completely broken. Some kind of Umlaut problem? Very strange ...

    AntwortenLöschen
  2. Seems that you got it working now? Looks great, all buttons are ok on both blogs.
    I looked into the HTML of egghat.blogspot.com and saw that you set the flattr_tag to be always the same. Did that do the trick or did the errors come form another source?
    Also, note that I meanwhile commented out the regular expressions (the lines with the .replace commands) where \n and \' are replaced as those lead to strange description texts.
    I test-flattred one of your posts, and it works, though as expected with the older version you still have \ns in the description.

    AntwortenLöschen
  3. Danke, hat mir eine Menge Bastelei erspart! Natürlich geflattered ;-)

    AntwortenLöschen
  4. es funktioniert. das Büro für besondere Maßnahmen bedankt sich herzlich für deine arbeit!!

    AntwortenLöschen
  5. habs auch mal geflattrt. leider hauts bei mir noch nicht so hin... mal schauen.

    AntwortenLöschen
  6. @saibot: Im Rahmen meiner zeitlichen Möglichkeiten kann ich Dich gern ein bisschen unterstützen. Schreib mir einfach eine Mail über den Kontakt-Link rechts oben. Erwarte keine Antwort innerhalb von 24h, oder so, aber wenn ich Zeit habe, schau ich gern mal rein.

    AntwortenLöschen
  7. Danke für das Angebot. jetzt klappts glaub ich...

    AntwortenLöschen
  8. Can you update your plug-in with the last version of the flattr api? ( 0.6 )
    There are some new features!
    ( I'll flattr you for sure! ;D )

    AntwortenLöschen
  9. I've seen the new API, yes, and I will do a complete rework to support it. Actually, i planned to do that today or this weekend, but I can't promise if I'll actually have the time to.

    AntwortenLöschen
  10. Don't worry! I'm already happy that you are going to do it one day! :D

    AntwortenLöschen
  11. Ok, I've done the new version. :-) Follow the new link at the beginning of the article to get it.

    AntwortenLöschen