Today I spent about an hour trying to figure out how I could add a Flattr button to my self hosted WordPress blog. I found a complicated post by WP Engineer, and Flattr provides a page where you can make buttons, but they didn’t provide any hard code for doing so. It wasn’t until I found their Javascript API that I was able to put together the code myself. I would check out all of the resources above to make sure you can’t use one of their methods before you attempt mine.

STEP ONE – ADD THE JAVASCRIPT

The first thing you need to do when adding a Flattr button to your self-hosted WordPress site is add this little snippet of code to your footer.

<script type="text/javascript">
/* <![CDATA[ */
    (function() {
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];

        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';

        t.parentNode.insertBefore(s, t);
    })();
/* ]]> */
</script>

STEP TWO – UNDERSTAND THE BUTTON CODE

After you have added the above code to your footer to enable the javascript you can add the code that will output the button.

For the most part this code looks like regular html but it also has some random parameters in the middle. Here is what the code looks like before you populate the parameters.

<a class="FlattrButton" style="display:none;"
    title=""
    rev="flattr;uid:USER-ID;category:MEDIA-CATEGORY;tags:TAGS;"
    href="PAGE-URL"

    A DESCRIPTION OF THE CONTENT

</a>

STEP THREE – ADDING THE PARAMETERS

As you can see, we need to populate certain areas with the appropriate information. To do this we can use the built in WordPress template tags to output the various parameters needed. The tags I used are as follows.

• TITLE –>  php the_title(); ?>
• URL –>  php the_permalink(); ?>
• DESCRIPTION –>  php the_excerpt(); ?>
• TAGS –>  php
  $posttags = get_the_tags();
  if ($posttags) {
  foreach($posttags as $tag) {
  echo $tag->name . ‘,  ’;
  }
  }
  ?>

<a class="FlattrButton" style="display:none;"
	    title="<?php the_title(); ?>"
	    rev="flattr;uid:USER-ID;category:text;tags:<?php
		$posttags = get_the_tags();
		if ($posttags) {
		foreach($posttags as $tag) {
		echo $tag->name . ', &nbsp;';
		    }
		}
		?>;"
	    href="<?php the_permalink(); ?>"

    <?php the_excerpt(); ?>
	</a>