How to use static flattr buttons

1 Views

How can I use static flattr (button image hosted on my server) buttons on a wordpress 3.x installation using the flattr plug-in? Several people asked me to not load the flattr button from the flattr servers to prevent user tracking by flattr.

[Edit] As already mentioned, I was asked to change the way the flattr plugin works. But I don’t have a clue how to do this. So I’m not sure whether it is just about the background image or any other resource loaded from the flattr servers. This is what I want have answered here.[/Edit]

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. If I understand you correctly, you want to add the Flattr button to your posts but instead of using the Flattr JavaScript API you just want the button image to be saved on your server and go to your Flattr page when clicked.

    I have embedded a working example into this answer and will provide the code and instructions below.

    working example:

    WordPress Post Title

    orem ipsum dolor sit amet, consectetur adipiscing elit. Duis eros libero, ullamcorper id ultrices ac, ultrices a magna. Vivamus sit amet tempus justo. Sed risus tellus, volutpat id sagittis sit amet, vehicula commodo ipsum. Nunc adipiscing sagittis ligula in tempor. […]

    To have this button automatically added to the bottom of each post:

    Save the image to your local machine
    then upload it to WordPress using the
    media uploader. Make note of the
    img URL or highlight and copy to
    your clipboard.

    Open your themes functions.php file and add the following code somewhere.

    <?php
    add_filter('the_content', 'pvitt_flattr_this' );
    add_filter('the_excerpt', 'pvitt_flattr_this' );

    function pvitt_flattr_this() {    
         echo '<a href="http://flattr.com/thing/64811/dotnetphen-com"><img src="http://www.dotnetphen.com/blog/2011/04/flattr-badge-large.png" /></a>';
    }
?>

    The button that links back to your Flattr page will now be added to end of every post or post excerpt.

  2. Are you just referring to the background image that is used for links?

    http://svn.wp-plugins.org/flattr/trunk/tabber.css

    ul.tabbernav li a
{
 padding: 12px;
 margin-left: 0px;
 border-bottom: none;
 background-color: #78A931;
 background-image: url(https://flattr.com/_img/fluff/bg-boxlinks-green.png);
 color: #fff;
 border-left: 1px solid #7a3;
 text-decoration: none;
}

    The only way that particular request to the flattr.com server isn’t going to happen is if you modify the plugin’s stylesheet directly, ie. wp-content/plugins/flattr/tabber.css and adjust the CSS posted above.