Donnerstag, 13. Mai 2010

Using Flattr in a forum / board signature (phpBB2 / phpBB3 / vBulletin)

Some of you might wonder how to add a Flattr Button to a forum / board signature. As there is in almost no case it is allowed to post HTML(static button) or even JavaScript (dynamic button), you cannot directly use the codes Flattr currently generates for you. 
As JavaScript is not allowed due to severe security risks, still almost every forum out there allows you to use so called BBCode which is pretty similar to HTML and can be used to achieve the same behavior as the static HTML buttons:

The normal button in HTML generated by Flattr:
<a href="http://flattr.com/thing/1214/Tutorials-by-Nicolas-plusminus-Gramlich-on-anddev-org" target="_blank">
<img src="http://api.flattr.com/button/button-static-50x60.png" title="Flattr this" border="0" /></a>

... and what it looks like in BB-Code:
[url=http://flattr.com/thing/1214/Tutorials-by-Nicolas-plusminus-Gramlich-on-anddev-org][img]http://api.flattr.com/button/button-static-50x60.png[/img][/url]

The compact button in HTML generated by Flattr:
<a href="http://flattr.com/thing/1214/Tutorials-by-Nicolas-plusminus-Gramlich-on-anddev-org" target="_blank">
<img src="http://api.flattr.com/button/button-compact-static-100x17.png" title="Flattr this" border="0" /></a>

... and what it looks like in BB-Code:
[url=http://flattr.com/thing/1214/Tutorials-by-Nicolas-plusminus-Gramlich-on-anddev-org][img]http://api.flattr.com/button/button-compact-static-100x17.png[/img][/url]

Tipp:
As most of the time, signatures are often strictly limited by length, you can shorten that code a lot by using various techniques and services:
Originating from...
[url=http://flattr.com/thing/1214/Tutorials-by-Nicolas-plusminus-Gramlich-on-anddev-org][img]http://api.flattr.com/button/button-compact-static-100x17.png[/img][/url]
... deleting the title from the url - it still does the same ..
[url=http://flattr.com/thing/1214/][img]http://api.flattr.com/button/button-compact-static-100x17.png[/img][/url]
... using a url-shortener - it still does the same ...
[url=http://bit.ly/dAI1mT][img]http://api.flattr.com/button/button-compact-static-100x17.png[/img][/url]
... using an image hoster - it still does the same ...
[url=http://bit.ly/dAI1mT][img]http://i41.tinypic.com/s329zs.png[/img][/url]

So one can reduced the size to less than 50% !

Obviously you'd want to adapt the thing-url to your own ;)

Best Regards,
Nicolas

5 Kommentare:

  1. Well done mate great guide :D! Going for a signature generator as well?

    AntwortenLöschen
  2. Thank you for sharing these great resources with us - specially with those who are newbees in the internet - but very creative and motivated to learn.

    AntwortenLöschen
  3. Have you ever considered about including a little bit more than just your articles? I mean, what you say is important and all. However think about if you added some great visuals or videos to give your posts more, "pop"! Your content is excellent. Baggy breeches

    AntwortenLöschen
  4. 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