Design your own FeedCount chicklet
For most serious bloggers, FeedBurner has become an indispensable tool for managing RSS or Atom-based syndication. FeedBurner’s array of free tools makes you wonder just how the company can stay profitable with all of its cool free stuff, especially when the majority of bloggers have no use for its for-pay functionality.
One of the most popular FeedBurner tools is the FeedCount chicklet, a small, dynamically-generated image that gives your users a bit of information on how many people are subscribing to your feed at any given time (using yesterday’s statistics.) If you’ve never seen the FeedCount chicklet, chances are you’re a total feed newbie and don’t read a lot of techie blogs. If you’ve always wondered where everyone got those things, they’re under the “Publicize” tab of the feed once you’re logged into FeedBurner.
The nicest thing about this chicklet is that the code you need to write is little more than a copy/paste affair; FeedBurner takes care of the rest for you. You can even specify your own hexadecimal colour values to customize the chicklet to fit your site’s look and feel. While many are satisfied with this (and it certainly works for newbies and other non-geeks,) there’s no reason why those who want some seriously custom badges, including ones that are constructed entirely of XHTML/CSS instead of images, are left out of the game.
Using the FeedBurner Awareness API (AwAPI)
FeedBurner’s chicklet-producing software doesn’t do anything that you can’t externally. In fact, it uses the same API that is available to users; this API is turned on if you make a FeedCount badge. This API, known as the Awareness API or AwAPI, has tons of powerful functions for number-crunching and feed circulation analysis in an XML-based infrastructure.
For example, let’s make a very basic call to the Awareness API. (If you don’t have the Awareness API turned on, you’ll get an error message; log in to FeedBurner, go to the Publicize tab and then Awareness API, and activate the API if you’re uncertain of whether or not it’s on.) To make a basic call, all that needs to be passed to the Awareness API is your FeedBurner Feed URI (your Feed URI is the name of your feed after feeds.feedburner.com; in my case it’s hyalineskies.) To get the API to return you the latest circulation data, simply call http://api.feedburner.com/awareness/1.0/GetFeedData?uri=hyalineskies, where you replace hyalineskies with your Feed URI. With any given luck, FeedBurner should return some XML like this:
<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="257173" uri="hyalineskies">
<entry date="2006-12-17" circulation="81" hits="734" />
</feed>
</rsp>
This is the basic schema for the API call, and this is what we can extract circulation data from to build our own feed. If all goes well, you’ll see <rsp stat="ok">, meaning that the call went through OK; if there’s an error, the AwAPI will return <rsp stat="fail"> as well as an error message.
A simple XML parser
Now that we know that we can actually get statistics from FeedBurner in a consumable format, we’ll have to write a script to parse the XML and extract the data that we need. Many languages have such parsing systems built-in; PHP uses Expat through some built-in functions. I’ve built a very crude FeedBurner parsing class called awarenessParser that uses cURL to retrieve the page and Expat to parse the XML into some manageable arrays. The class will allow you to retrieve — in plain text — the latest circulation, hits, and date from the Awareness API.
Before we can pull any data from an array, though, we’ll need to connect to FeedBurner via cURL and then parse the incoming XML using xml_parse_into_struct, a feature built into most PHP installs. Here’s how it’s done in the awarenessParser class:
// gets the Feedburner XML via cURL.
$ch = curl_init();
if(!$ch) return false;
// Set all of the cURL options.
curl_setopt($ch, CURLOPT_URL, ‘http://api.feedburner.com/awareness/1.0/GetFeedData?uri=’.$feed_uri);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$this->data = curl_exec($ch);
curl_close($ch);
$parser = xml_parser_create(”); // create a new XML parser.
if(!$parser) return false;
xml_parse_into_struct($parser, $this->data, $this->xmlArray); // parse the XML file into an array.
xml_parser_free($parser);
return true;
}
From there, it’s simply reading the right attribute out of $xmlArray in the class. You can also download the class at the end of this page and work with it from there.
Using the awarenessParser class
Of course, we’ll now have to write some PHP and reference the awarenessParser class. Once we’ve made sure that we’ve included the class within our PHP document, we can then create a new instance of the awarenessParser object and extract the data we need from it. In the following code example, we’ll create an awarenessParser object, initialise it, and send it a feedURI.
$fbParse->initialise(‘boingboing/iBag’);
Yup, that’s it. The awarenessParser went and collected the data for BoingBoing’s primary RSS feed and is waiting for us to poll new data. Make sure you initialise the class, else you won’t get any data back.
Now, we’ll need to specify a format for the FeedCount chicklet in both XHTML and CSS. For the purpose of this, I’ve decided to try to emulate the default orange chicklet as you see in the TechCrunch photo above. Here’s the CSS to do that across IE6, Firefox, and Safari:
width: 110px;
overflow: auto;
background-color: #ff6600;
border-top: 1px solid #ff9100;
border-left: 1px solid #ff9100;
border-right: 1px solid #b24700;
border-bottom: 1px solid #b24700;
font: 11px/normal Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 0; padding: 2px 0 2px 0;
}
* html div.feedCountChicklet {
height: 100%;
}
p.quantity {
width: auto;
min-width: 25px;
background-color: #ffb380;
border-top: 1px solid #b27d59;
border-left: 1px solid #b27d59;
border-right: 1px solid #ffffb6;
border-bottom: 1px solid #ffffb6;
margin: 0 2px 0 2px;
padding: 2px;
float: left;
text-align: right;
overflow: hidden;
}
p.readerCaption {
width: auto;
float: left;
text-align: left;
margin: 3px 2px 0 2px;
padding: 0 2px 0 2px;
}
p.readerCaption a {
color: #000;
text-decoration: none;
}
Once we’ve got the CSS in place (somewhere on our page,) we can then build the XHTML structure around it and use the get_circulation function in the parser to return a number. Since the original FeedBurner chicklet doesn’t display exact numbers in the thousands (it displays the thousands + the letter K), I’ve added some code that will take the quantity, divide and round, and then return the number in thousands. If you don’t want to do this, just call what is in the else in the HTML/PHP code below.
<p class="quantity">
<?php
if(strlen($fbParse->get_circulation()) > 4) {
$thousands = round($fbParse->get_circulation() / 1000);
echo($thousands . ‘K’);
} else echo($fbParse->get_circulation());
?>
</p>
<p class="readerCaption">
<a href="http://feeds.feedburner.com/<?php echo($fbParse->get_feeduri()); ?>" id="feedCountLink">Readers</a>
</p>
</div>
If all went well, you should end up with a badge (for BoingBoing, at least,) that looks something like this:

If you change the $fbParse->initialise('boingboing/iBag'); to something other than boingboing/iBag, it will then use that FeedBurner feed instead.
That’s cool and all, but it looks the same.
While I’ve styled it similarly for this Pilot Training article, the possibilities are really endless. You’re really only limited to what you can think up; you could build the script into a WordPress plugin, your latest Web application, or make it some type of XML-RPC relay to return data to a remote server. Since it breaks you free of limitations, there’s really no reason why you couldn’t style it with dynamic images using GD like FeedBurner does or work it into a Flash swf.
All of the code from this article is available for download under a Creative Commons Attribution-ShareAlike 2.5 Licence. That means you can use it in commercial or personal projects, as long as you share your modified source code and attribute me (with a link back to hyalineskies) as the original author.
Article Abstract
Posted 18 December 2006. Approx. 1,451 words.
Sick of having the same-old FeedBurner FeedCount chicklet on your blog or MySpace profile? With some PHP and XHTML/CSS, you can easily develop your own.
Download Information
Download AwAPI PHP4 Class & Example Badge
FeedBurner AwAPI awarenessParser PHP Class with XHTML/CSS badge generation example. (PHP Source File, 4KB)
From Our Sponsors
Comments
Comments RSS Feed for “this post”
Write Your Own Comment
To preserve legitimate discussion, please use your real name and email address.
Your email address will not be published. Derogatory comments will be deleted.
External Discussion
No trackbacks have been posted to this article yet.
Hello and thank you. This is what I was looking for.