Mittwoch, 12. Mai 2010

Flattr Button Plugin for Blogger.com / Blogspot

Hi guys,

recently I stumbled over new service called Flattr. Basically it's pretty much like a Facebook "I like!" Button, with the tiny difference that you kind of pay a part of your monthly deposit to the 'owner' of the button. More info can be obtained here: https://flattr.com/

So as I expect this service to become big and a got an invite yesterday, I thought of the need for a plugin for blogger.com / blogspot.com .

Of course you can manually insert the a Flattr button using the Javascript-code (https://flattr.com/support/api). I did that too, at least in the beginning.

As Blogger doesn't really provide a plugin mechanism Matthias Bomelin had a nice idea to integrate the code into the template engine of blogger.
http://mattias.bomelin.com/2010/05/att-infoga-flattr-knappar-i-blogger.html

As I had some trouble using the code from his blog (due to the formatting that blogger tends to break pretty successfulyl), this is my copy-paste save version:
<div expr:id='&quot;flattr_summary_&quot; + data:post.id' style='display: none;'>
<data:post.body/>
</div>
<div expr:id='&quot;flattr_title_&quot; + data:post.id' style='display: none;'>
<data:post.title/> 
</div>

<span style='float:left; margin:5px;'>
 <script type='text/javascript'>
  var flattr_uid = &#39;_____&#39;; // Replace underscores with Flattr ID
  var flattr_tle = document.getElementById(&#39;flattr_title_<data:post.id/>&#39;).innerHTML;
  var flattr_dsc = document.getElementById(&#39;flattr_summary_<data:post.id/>&#39;).innerHTML;
  var flattr_cat = &#39;text&#39;;
  var flattr_lng = &#39;en_GB&#39;;
  var flattr_tag = &#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>&#39;;
  var flattr_url = &#39;<data:post.url/>&#39;;
  var flattr_btn = ''; // for normal button
  // var flattr_btn = 'compact'; // for compact button  
 </script>
 <script src='http://api.flattr.com/button/load.js' type='text/javascript'/>
</span>

But where to put this code?
Caution: Before you change anything in the template, save a backup somewhere!
This code goes right into your template. Make sure that you have the field to show the whole template checked! While I myself am not really familiar with blogger templates at all (mine obviously isn't the most common one) I can only assume that the right line to put the code below is the one surrounded by the red ellipse. (It seems to include the needed variables).


Actually I don't need to post a screenshot of the result, as you can check it out yourself in this post ;)

If you have questions, post a comment!

[Edit]
Reader Piratino requested how to add a compact button to the bottom of a blog post. Actually it is almost the same except that you'd 'swap' (comment the one and uncomment the other one) the following lines of the code used avobe:
var flattr_btn = ''; // for normal button
  // var flattr_btn = 'compact'; // for compact button;

You'd add that code somewhere below the line marked below, as it includes the content of the post.

As always it is a little different for every template, so you might have go for a little Try and Error to find the right place and formatting.
[/Edit]

Best Regards,
Nicolas

Kommentare:

  1. Sometimes it doesn't work.
    Can you see that you have also a botton ( Scala + GridGain (+ Eclipse + JUnit) = WIN ) with an error message?
    Is it a problem of my browser? ( Chrome dev )
    Can you also show how to add the compatc button under the message?

    Thanx :)

    AntwortenLöschen
  2. Hi Piratino,

    I added a sample of adding a button to the bottom of each post.

    I'll now investigate the "Error" Bug you described. Probably something with the title or so...

    Regards,
    Nicolas

    AntwortenLöschen
  3. Thanks. Works perfectly. You deserve flattr for this. ^^

    AntwortenLöschen
  4. Thanks, works nicely!

    It took me a while, though, before I saw that I needed to edit the code to substitute a few underscores for my numeric Flattr user id.

    And for non-HTML-hackers, it might be a good tip that the button can be moved to the right of the post title by changing the opening span tag to:
    <span style='float:right; margin:5px;'>

    Thanks again for this excellent guide!

    AntwortenLöschen
  5. the formatting seems to be correct, but in the flatter box it says error. Will this fix itself?

    -sam

    AntwortenLöschen
  6. Are all those ampersand-hash-thirty-nine-semicolon OK or should it rather be simple single quote?

    AntwortenLöschen
  7. Hi!
    Danke für das geniale Flattr Plug-In!
    Leider habe ich nur das Problem das alle Flattr Icons bei mir im Blog den selben Spendenzähler anzeigen wie der in meiner Seitenleiste anstatt für jeden Artikel einen neuen anzulegen. Woran könnte das liegen? Siehe hier: http://blog.nerdpfleger.de

    PS: Super Blog! Habe mich als Leser eingetragen und die geflattrert ;)

    AntwortenLöschen
  8. Some work, some dont. Title doesnt make a difference. Seems to work better in Firefox. In Internet Explorer its just a white box? Is this a Flattr issue, or Blogger issue? Hmm... I know Flattr has better support ;)

    Another way to add to Blogger if your confused:

    http://tinyurl.com/BLOGGERflattr

    AntwortenLöschen
  9. All the buttons show an error when i use this code. I have put in my user number and have been trying to the past two hours to tweak this code for it to work, but no matter what, the buttons just display error

    AntwortenLöschen
  10. I also ran into problems - but finally resolved them:

    1. Be sure to replace the underscores with your numerical Flattr Id!
    2. Check if you really want to include lines 01...03. They might replicate your whole blog posting in a hidden DIV. I removed those lines - and replaced line 12. with a simple fixed string assignment to the variable.
    3. If you have problems with errors in your Flattr icon replace innerHTML with innerText.
    4. If you want to place a button at several locations in a single location be sure to always include either line 17. or line 18.

    Good luck!

    AntwortenLöschen
  11. Hi Nico, Thanks for blogging this (and of course, I've flattr'd you :-) )

    AntwortenLöschen
  12. On http://blog.zottel.net/2010/05/flattr-plugin-for-bloggercomblogspotcom.html There is an edited version of this plugin that shortens texts to avoid flattr errors and takes out html tags that otherwise show up in the flattr description.

    AntwortenLöschen
  13. thanks - it worked right away (~3min) http://gummih.com

    AntwortenLöschen
  14. Hi Nico, thanks for this code has been helpful in past, but now I've developed a different version with the new API capable of detecting the post language.
    If you want to use or improve it, I'm too lazy :D Check out my blog.

    AntwortenLöschen
  15. Just don't know where to put it. Any idea? I guess it's somewhere in between these lines?
    Thanks,
    Richard

    /* Posts
    -----------------------------------------------
    */

    h2.date-header {
    margin:1.5em 0 .5em;
    }

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:180%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:$titlecolor;
    font-weight:normal;
    }

    .post h3 strong, .post h3 a:hover {
    color:$textcolor;
    }

    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    }

    .post-body blockquote {
    line-height:1.3em;
    }

    .post-footer {
    margin: .75em 0;
    color:$sidebarcolor;
    text-transform:uppercase;
    letter-spacing:.1em;
    font: $postfooterfont;
    line-height: 1.4em;
    }

    .comment-link {
    margin-$startSide:.6em;
    }
    .post img {
    padding:4px;
    border:1px solid $bordercolor;
    }
    .post blockquote {
    margin:1em 20px;
    }
    .post blockquote p {
    margin:.75em 0;
    }

    AntwortenLöschen
  16. sálü nicolas - Büro für besondere Maßnahmen sagt merci vielmals für deine arbeit!

    AntwortenLöschen
  17. We sell ray ban 2132 wayfarer Sunglasses Resin-tortoise/green hzxmwic into uk area, abusolutely high quality glasses online. Shop in our ray ban sunglasses store,Flaunting on each eye of the followers of fashion can be found with at least one
    pair of ray ban wayfarer 2151 . They offer both sturdy and We are selling ray ban 3025 aviator Sunglasses Glass-gold/dark brown here.
    Choose the Ray Ban you like for free.The cool and trendy ray ban aviator 3026 made by famous designer companies make up your personality. Nowadays, sunglasses with UV ray protection are Shop for ray ban 3183 polarized. Find the best deals on ray ban 3183 polarized , ray ban
    and more on iOffer.com.Buy ray ban rb 3194 sunglasses. We carry a huge selection of all Ray Ban sunglasses. 100% free US shipping and easy returns!

    AntwortenLöschen
  18. Its working i applied it through blogger edit html ...
    Vertical Jump Bible

    AntwortenLöschen
  19. At last! I found a good post like this.. Thanks for this informative post! By the way, can you write a post about linkedin seo factors? Thanks again!

    AntwortenLöschen
  20. Good to know someone I could share my ideas. Looking forward to know and learn some more from you.
    Order Zyprexa

    AntwortenLöschen
  21. If the same company is ray ban uk making all these brands, then the quality Ray Ban Aviator 3025 has to be similar too.

    AntwortenLöschen
  22. A couple of ray ban wayfarer sunglasses may be the ultimate comfort cheap ray ban and pampering you may offer your big eyes.

    AntwortenLöschen
  23. I like to make friends with you,haha.


    ----------------------------------------------------------------------------------------------------------------------------------------
    Rc Helicopter|Mini Rc Helicopter|Rc Helicopters|Rc Helicopter Reviews

    AntwortenLöschen
  24. Your blog article is very intersting and fanstic,at the same time the blog theme is unique and perfect,great job.To your success. indian wedding sherwani for men

    AntwortenLöschen
    Antworten
    1. oh coo, this information is really useful and definately is comment worthy! hehe. I’ll see if i can try to use some of this information for my own blog. Thanks ker sangri

      Löschen
  25. Thanks for this post. I definitely agree with what you are saying. I have been talking about this subject a lot lately with my brother so hopefully this will get him to see my point of view. Fingers crossed!
    Buy Lehenga Online

    AntwortenLöschen
  26. レイバンのファンなら、知るはずのことです。レイバン aviatorは古典的な美しさを継承してきました。最初、レイバンというブランドは、世界中に、パイロットモデルとして知られています。今、その代表的なモデル:レイバン RB3025は多くの名人に愛用されています。

    AntwortenLöschen
  27. I have just opened a blogspot site. Now I need to design it and give a dynamic look. I have little knowledge about HTML and CSS codes. As a beginner I am searching for something new to enrich my knowledge. So your post seems very useful to me. Thank you and please keep it up.

    Cheap printer ink cartridges

    AntwortenLöschen
  28. Great post thanks for sharing such a nice information I just book marked this blog.keep the work up. :D

    graphic logo designer

    AntwortenLöschen
  29. Another great way to make small donations online: 25c.com. It's a lot easier to use than flattr. You don't have to put in any money off the bat. Just start clicking and fund your pledges later. Worth considering.

    AntwortenLöschen
  30. bollywood saree
    your raise my mind to read your blog and now i thanks you also for signing me here and i hope you do visit my web thanks..

    AntwortenLöschen
  31. Admiring the time and effort you put into your weblog and detailed information you provide! catering for events
    Mens tuxedo suit

    AntwortenLöschen
  32. i do pretty much the exact same thing, local vhosts and all. taking nightly backups of /home is easy with rsync, so when anything goes awry, i just pull down the folder from my vps. since the cronjob itself is in the folder, even my backup script gets backed up. what ide do you use?
    tuxedo suits for men

    AntwortenLöschen
  33. Really your post is really very good and I appreciate it. It’s hard to sort the good from the bad sometimes, but I think you’ve nailed it. You write very well which is amazing. I really impressed by your post. Indian outfits online

    AntwortenLöschen
  34. great information in this site . i really thanx you have put nice information..
    kurta and sherwani

    AntwortenLöschen
  35. I am thinking about starting. Thank you for this information, it has been educational and helpful to me. Sherwani online

    AntwortenLöschen
  36. I thank you about that. No doubt it will be very useful for me. Would like to see some other posts on the same subject!taxis in w2 | stansted to w2 | w2 minicabs

    AntwortenLöschen
  37. This is a truly excellent read for me, Must admit that you are one of the greatest bloggers I ever saw.Ches for posting this helpful blog post. minicabs in w2 | cab w2 | mirza maqbool

    AntwortenLöschen
  38. Your spectacular entry, man.I read your blog and I blog.its your article very useful and very good knowledge and information gained. Really sure, he likes what you say here, and you got it, I like clothes that claim to. Have Fun and witty you for making that continues to be nervous.
    urdu newspaper | english newspaper | news from pakistan

    AntwortenLöschen
  39. I had a great time reading your article and I found it interesting. This is such a beautiful topic that me and my friends are talking about. Thanks for this blog, we are enlightened.
    pakistani matrimony | pakistani matrimonial | pakistani matrimonial sites

    AntwortenLöschen
  40. Admire the information published.its really informative and innovative keep us posted with new updates. it was really valuable
    maqbool mirza | mirza maqbool

    AntwortenLöschen
  41. That is really cool. Thanks for finding it. Some really good ideas there, this is going to be a real time sink. I am a china tour lover,You can learn more: Guilin tour packages  | Travel to Lhasa | Lhasa Travel Guide

    AntwortenLöschen
  42. Like Bob, this has helped me out a lot. I was utterly clueless before I came across this guide. I really appreciate it as well.
    web design baroda

    AntwortenLöschen
  43. A person essentially assist to make significantly articles I might state. That is the very first time I frequented your website page and so far? I amazed with the research you made to create this actual submit amazing. Excellent process! Nehru suit

    AntwortenLöschen