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=https://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('https://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;