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

47 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. Good to know someone I could share my ideas. Looking forward to know and learn some more from you.
    Order Zyprexa

    AntwortenLöschen
  20. 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
  21. 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
  22. I like to make friends with you,haha.


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

    AntwortenLöschen
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. great information in this site . i really thanx you have put nice information..
    kurta and sherwani

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

    AntwortenLöschen
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. Are you facing issues and Blockchain Phone Number
    problems while login blockchain exchange? Sometimes an error is out of the proportion and users to find difficult to erase the errors on their own. In order to get rid of login errors in blockchain account, you can always have a conversation with the elite executives by dialing blockchain support number at 1-800-665-6722 which is active all day and night to assist the users. The executives are functional throughout the 365 days of a year for guidance.
    Blockchain Number
    Blockchain Contact Number
    Blockchain Toll Free Number
    Blockchain Support Number
    Blockchain Phone Number
    Blockchain Helpline number
    Blockchain Support Phone number
    Blockchain Customer Support
    Blockchain Customer Service
    Blockchain Customer Service Number
    Blockchain Wallet phone Number

    AntwortenLöschen
  39. Mobile app development is meant to develop applications that are accessed in mobile. Since all our website users are turning into mobile users, there are nearly 194 billion mobile app downloaders are found based on stats.



    For Mobile App Development in Vadodara Contact Mysphere Infotech



    Mobile Application Development Company in Vadodara

    website development company in Vadodara

    Web Design Company in Vadodara

    AntwortenLöschen
  40. Taslima Marriage Media is one of the most prominent and trusted Bengali marriage sites that provides online matrimony services to clients. marriage bureau

    AntwortenLöschen
  41. best bizz is the UK most trusted website which provide list of leading businesses in the UK.Improvement agency, assisting with growing your business to be more profitable, sustainable and successful.. Visit our website to learn more!대전출장아로마
    대구출장아로마
    부산출장아로마
    울산출장아로마
    서울출장아로마

    AntwortenLöschen
  42. Thank you so much for sharing this wonderful information. I hope that there’s more information to come.서산콜걸샵추천
    아산콜걸샵추천
    천안콜걸샵추천
    예산콜걸샵추천
    당진콜걸샵추천

    AntwortenLöschen
  43. Nice blog post. What sets our web development services in Surat apart is our commitment to staying ahead of the technological curve. We leverage the latest tools and frameworks to ensure that your website is not just aesthetically pleasing but also technologically advanced, with features that enhance functionality and user engagement.

    AntwortenLöschen
  44. Valuable blog, As the best website design company in Surat, we take pride in turning your vision into a captivating online reality. Our team of experienced designers and developers harness the latest technology and design trends to craft websites that not only stand out but also drive engagement and conversions. With a meticulous focus on user-centric design, functionality, and aesthetics, we bring your brand story to the digital forefront.

    AntwortenLöschen