Tuesday, June 8, 2010

Feedburner: Adding Flattr to your FeedFlare

Update 2010-06-11: This article and information with-in are superseded by Feedburner: Adding Flattr to your FeedFlare (Part: 2)

I've added Flattr to my blog and also wanted to add it to my feedburner FeedFlare, but alas, no one has yet to create one. So I've gone through the trouble of doing it for you :)

First, I went to the Feedburner FeedFlare API documentation. I wont go into the details of writing your own flare, but I opted for the dynamic type, since it would allow me to show how many times one of my blog posts had been flattered.

Second, I dove into the Flattr JavaScript API. I don't think they recommend this, but it's the only way I could get to the button information contained in their default IFrame.

Third, I downloaded the PHP Simple HTML DOM Parser. There's probably a simpler way to parse the IFrame sent back from Flattr, but I opted for this method since it was pretty straight forward.

For the lazy, you can use my existing FeedFlare URLs as your own. You will need to go to your feedburner page, login, select the feed you want to add this to, click on "Optimize" and then "FeedFlare". Below the stock list you will see a place to enter a URL. Enter the URL below and BE SURE to replace "your_uid" with your Flattr UID, else you wont get the money.

http://www.swissdisk.com/~bcollins/flattr-me-dynamic.php?uid=your_uid

For the interested, here are the two files I've created. First is the dynamic PHP FeedFlare file:

<FeedFlareUnit>
  <Catalog>
    <Title>Flattr Me</Title>
    <Description>
      Adds a Flattr link including flattr count for each feed unit.
    </Description>
    <Link href="http://www.swissdisk.com/~bcollins/flattr-me-dynamic.php?uid=flattr_uid"/>
    <Author email="benmcollins13@gmail.com">Ben Collins
  </Catalog>
  <DynamicFlare href="http://www.swissdisk.com/~bcollins/flattr-me-static.php?uid=<?
        print $_GET['uid']; ?>&title=${title}&link=${link}"/>
  <Sample>Flattr (11)</Sample>
</FeedFlareUnit>

Note that the <Link> element references another PHP script, and that this is in fact PHP. This allows us to pass along the Flattr UID to the second script, which is the one that actually produces the FeedFlare (feedburner periodically checks the second URL it gets from this file for updates to the FeedFlare).

Now, the second script is the one that uses the simple_html_dom.php library I spoke of. You will see it referenced in the file below. Basically I pack the data just like the original Flattr load.js script does, and request the Flattr button, and then rip a few bits of information from it:

<?
include_once("simple_html_dom.php");

$btn_url = "http://api.flattr.com/button/view/";

$data = "button=compact&uid=" . $_GET['uid'] .
        "&url=" . $_GET['link'] . "&lng=en_US&hide=0&title=" .
        $_GET['title'] . "&cat=text&tag=&desc=";

$html = file_get_html($btn_url . bin2hex($data));

$els = $html->find("span.flattr-count");
$count = $els[0]->innertext;

$els = $html->find("a.flattr-pop");
$link = $els[0]->href;

$els = $html->find("span.flattr-link");
$txt = $els[0]->innertext;

?>
<FeedFlare>
  <Text><? print "$txt ($count)"; ?></Text>
  <Link href="<? print $link; ?>"/>
</FeedFlare>

Those familiar with Flattr will note that I did not pass in the description, which could probably be added in the first script (or at least a shortened version of it) and then passed to the button. Usually the description is the first few hundred characters of the post in this case.

Hope all works well. Please post back if you take the time to add the description to this!

5 comments:

  1. Here's an update. I did eventually find a way to include the first 200 characters of the post as the description sent back to Flattr. In the flattr-me-dynamic.php, I changed the DynamicFlare line to look like this:

    <DynamicFlare href="http://www.swissdisk.com/~bcollins/flattr-me-static.php?uid=&title=${title}&link=${link}&summary=${substring((a:content//text()),0,200)}"/>

    And in flattr-me-static.php I changed one line to look like this:

    $data = "button=compact&uid=" . $_GET['uid'] .
      "&url=" . $_GET['link'] .
      "&lng=en_US&hide=0&title=" . $_GET['title'] .
      "&cat=text&tag=&desc=" . $_GET['summary'];

    ReplyDelete
  2. To make it easier, here's the links to the source for the two files I'm using:

    * flattr-me-dynamic.php
    * flattr-me-static.php

    ReplyDelete
  3. Ben, I took the time to add this to my feed. The only problem that I see right now, is that the Flattr link doesn't show up in the feed if the item has never been Flattr'd before via the JavaScript API (or manually added). I'm going to look at if that can be corrected, but was wondering if you had any thoughts?

    ReplyDelete
  4. Wait, no, watching my feed something else is happening, that I don't quite understand. I'm going to assume that Feedburner is doing some magic in the backend.

    ReplyDelete
  5. @Jeff Honestly, feedburner is pissing me off. There can be severe delays in updating feedflares for feed items even after the initial addition of it.

    I've been working on a v2 of this flare and will post it as a separate entry on my blog once I'm done.

    It alleviates using feedburner to pass things in the URL to the second script by just passing the feedUrl and parsing it directly in the second script.

    Will be able to handle longer descriptions and tags from the original feed.

    Stay tuned...

    ReplyDelete