chaos
LABORATORY

Here’s a nice trick I learnt a couple of days back. I wanted to display my feed subscriber count in a way that would match my site’s theme. I was tired of the vanilla feed-count display provided by FeedBurner - probably because you can find it on almost every other site these days (and I wanted something unique). So I got down to designing one on my own and I’m going to show you how to do the same for your site.

I won’t go into any lengthy (step-by-step) discussion on creating the graphical background - that’s something that’ll be your call. But I’ll teach you the core idea - fetching the feed-count from FeedBurner’s server using their API and displaying it on your site.

The Graphical Part

First and foremost, you need to decide on what kind of a display you want - small or large, dark or light. For example, I chose to display mine on a black background with medium sized font (see my RSS box at the top of the page). Depending on your background, you’ll need to either create or find a suitable RSS icon. You can find some excellent tutorials on creating feed icons here, here and here. Alternatively, you can download a whole bunch of free icons from here.

As a starter fire up your favourite graphics editor (Adobe Fireworks for me). For simplicity’s sake we’ll follow the same approach as I did with my feed-count box. Draw a black rectangle with rounded corners. Place your feed icon in a suitable place. Then draw another smaller rounded rectangle inside the earlier one, but with a lighter stroke colour (say white). This will be the container where you display your feed-count. You can throw in some fancy glow / shadow effects as you like. We should get something that approximately resembles the following image.

The image shown above was created with Fireworks and is an editable layered PNG file. If you’re using Fireworks, you can very well download this one (Right Click on it > Save Image), use it as a starting point and add/edit/resize it according to your preferences.

The Coding Part

You need to ensure that your web-host offers cURL (as an extension of PHP). By default, 90% of the web-hosts do - so you shouldn’t have anything to worry about. Secondly, the FeedBurner Awareness API (for your feeds) should be turned on. If you have been using the Feed Count feature of FeedBurner - then it IS already turned on. If not, you can login into your FeedBurner account, select the Publicize tab for the appropriate feed and activate this service. Once you’ve made sure of these two factors, we can progress to the actual coding.

Here’s the code you’ve going to need.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// Get FeedBurner Subscription Count - using FeedBurner Awareness API
function get_feedburner_count( $uri, $display = 'true', $format = 'true' ) {
 
	// Construct URL
	$apiurl = "http://api.feedburner.com/awareness/1.0/GetFeedData?uri=" . $uri;
 
	// Initialize the Curl session
	$ch = curl_init();
 
	// Set curl to return the data instead of printing it to the browser.
	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
	// Set the URL
	curl_setopt( $ch, CURLOPT_URL, $apiurl );
	// Execute the fetch
	$data = curl_exec( $ch );
	// Close the connection
	curl_close($ch);
 
	// Parse XML
	try {
		@$xml = new SimpleXMLElement($data);
		$fcount = $xml->feed->entry['circulation'];	
	} catch ( Exception $ex ) {
		// echo 'Caught exception: ',  $ex->getMessage(), "\n";
		$fcount = "?????"
	}
 
	// Display or Return, Formatted or Unformatted
	if( $display ) {
		if( $format )
			echo number_format( $fcount, 0, '.', ',' );
		else
			echo $fcount;
	}
	else
		return $fcount;
 
}

If you’re wondering where you’re going to add this code without messing up your theme - almost all modern WordPress themes have this file named functions.php, which contains the functions essential for registering the sidebar, tweaking specific WordPress routines etc. You can add this code to that file and it’ll be made available for calling from anywhere inside your theme.

The function is called get_feedburner_count() and accepts three parameters - two of which are optional. Here’s an explanation of the parameters…

1. $uri - This is a mandatory parameter. If you don’t specify this one, the function won’t be able to fetch the feed count. The URI is the name you chose to represent your feed on FeedBurner. For example - my feed url is, http://feeds.feedburner.com/ChaosLaboratory. That makes my URI, ChaosLaboratory. This is what needs to be specified here.
2. $display - This is an optional parameter. It takes up the values true or false. I have modelled this function on the lines of the general WordPress template functions - which means that the function is able to either display the feed-count directly, OR return it to you for further processing. If you don’t specify any value here, it’ll default to displaying the feed-count.
3. $format - This too is an optional parameter and takes up either true or false. By default it is set to true. This tells the function to pass the feed-count through another formatting function, which adds a digit-grouping comma to it for every thousandth place. The formatting occurs on Line 31 of the code and you can modify that line to reflect any sort of formatting you want.

A typical call the function can look like,
get_feedburner_count( 'ChaosLaboratory' ); - this will print out the formatted feed-count directly

OR

$fcount = get_feedburner_count( 'ChaosLaboratory', false, false ); - this will fetch the raw (non-formatted) feed count and store it in a variable called $fcount. This doesn’t print the figure directly to the screen, but leaves it at your disposal for further processing

OR any variation thereof.

Now, we need to apply some styling to that background image we created so that the feed-count is aligned properly.

Note: I applied the styling on an anchor (link) tag, since I wanted to make the whole image clickable, so as to provide a way of subscribing to my feeds too. Here’s an example…

1
2
3
4
5
6
7
8
9
10
11
12
13

a#feedcount {
	display:block;
	width:120px;
	height:26px;
	margin:0;
	padding:5px 10px 5px 0;
	background:url(images/bg-feed.png) no-repeat transparent;
	color:#D6D6D6;
	font-size:2em;
	font-weight:bold;
	text-align:right;
	text-decoration:none;
}

Points to note here: On Line 1, I’ve declared display:block. This is necessary, since the a tag by default is an inline element - which means, it collapses to the exact width of the text contained in the anchor. This is not desirable here as we’re attaching the background image to the a tag, and we want it to adapt to the exact proportions of it (specified in Lines 3 & 4). I’ve aligned the feed-count text to the right (Line 11) and used a padding of 10px on the right (Line 6) so as to leave a comfortable gap from the right edge of the graphics.

The code-block above can be added to your template’s stylesheet file or in the header.php within style tags - depends on you. For me, I prefer to keep all the styling in one place, i.e. the stylesheet file.

Adding it to your template

Now that we’ve got all the code in the right place, it’s time to add it to the template. Open up the appropriate file (header or index) - where you want to display the feed-count and add the following lines…

1
2
3

<a id="feedcount" href="http://feeds.feedburner.com/YOUR_FEED_URI" title="Feed Subscriber Count / Subscribe...">
	< ?php get_feedburner_count( "YOUR_FEED_URI" ) ?>
</a>

And that’s it! That should display your feed count with the custom graphical background and make the image clickable too, to act as a feed subscription button. The final effect should look like the following…

Any questions / clarifications, feel free to write back.