Custom feedburner counter

Sometimes badges just don’t go very well with the design of a web page. So while during the overhaul of this site I was thinking of creating my own custom feedburner counter. You can easily use the feedburner awareness API with some AJAX to create your own. In the end I opted out because you lose the trust and recognition value of such a well known badge. But maybe it’s something for you.

Doing a GET you get the result as XML.

telnet api.feedburner.com 80

GET /awareness/1.0/GetFeedData?uri=http://vafer.org/blog/feed

<?xml version="1.0" encoding="UTF-8"?>
<rsp stat="ok">
  <!--This information is part of the FeedBurner Awareness API. If you want to hide this information, you may do so via your FeedBurner Account.-->
  <feed id="351656" uri="tcurdt">
    <entry date="2008-05-02" circulation="202" hits="1178" reach="149" />
  </feed>
</rsp>

So is needed is to extract the information from an AJAX request. Just create a “feedburner.js” javascript file

var xmlHttp

function loadReaders(feed) {
    document.getElementById("readers").innerHTML = "";

    xmlHttp = GetXmlHttpObject();

    if (xmlHttp == null) {
        alert ("Your browser does not support AJAX!");
        return;
    }

    var url = "http://api.feedburner.com";
    url = url + "/awareness/1.0/GetFeedData?uri=" + feed;

    xmlHttp.onreadystatechange = readersReceived;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function readersReceived() {
    if (xmlHttp.readyState == 4) {
        var s = xmlHttp.responseText;
        var start = s.indexOf('circulation="') + 13;
        var stop = s.indexOf('"', start);
        var readers = s.substring(start, stop);
        document.getElementById("readers").innerHTML = readers;
    }
}

function GetXmlHttpObject() {
    var xmlHttp=null;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    } catch (e) { // Internet Explorer
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

And then load and call it from the HTML page.

<html>
    <head>
        <script src="feedburner.js" type="text/javascript"></script>
    </head>
    <body onload="loadReaders('http://vafer.org/blog/feed')">
        <p>
            Readers: <span id="readers"></span>
        </p>
    </body>
</html>

While this works fine in Safari many browsers choke on the fact that the we try to connect to a web service that is outside of the page’s domain. In order to work around this we can proxy the request. You can probably even use mod_proxy for this. But a simple php page does work fine as well.

<?php
define('HOSTNAME', 'http://api.feedburner.com');

$array = explode('/feedburner.php', $_SERVER['REQUEST_URI']);
$path = $array[1];
$url = HOSTNAME.$path;

$session = curl_init($url);
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
$xml = curl_exec($session);
header("Content-Type: text/xml");

echo $xml;
curl_close($session);
?>

Of course then you need to change the javascript to use the web service in your domain

    var url = "http://yourdomain.com/feedburner.php";
    url = url + "/awareness/1.0/GetFeedData?uri=" + feed;

3. May 2008 | ajax, blog, feedburner | DiggIt!

2 Responses to “Custom feedburner counter”

mary said, on 8. May 2008 at 8:33

Hi,
I tried to implement this in my application.i am getting the following error
“uncaught exception: Permission denied to call method XMLHttpRequest.open”
i googled for this error ,but i didnt get any solution.could u pls help me
tcurdt said, on 8. May 2008 at 10:42

@mary: I’ve got a bunch of results on Google …turns out you need to use a proxy as cross-site connects are not allowed. I’ve fixed up the post. Cheers!

Torsten Curdt’s weblog

Custom feedburner counter

2 Responses to “Custom feedburner counter”

Leave a Reply