The Ultimate Guide to Styling Your FeedBurner Subscriber Count in Your WordPress Blog

When your blog reaches a solid RSS subscriber count, you can give that number a boost by showing the number as social proof to your visitors. After all, that’s how human psychology works: if this many other people like the blog, it’s a fair guess that I will too.

FeedBurner comes with a predefined widget called FeedCount that you have probably seen many times, and maybe used on your blog already. FeedBurner lets you pick the colors, and then you copy the HTML code to your own blog. It’s really quick and easy, but it does come with some drawbacks if you are trying to super charge your blog to a whole new level.

1. Limited customization: The only style changes you can make to the widget is choosing its color. While this can be OK, if you want to separate your blog from the crowd and customize the subscriber count widget in a creative way, you need something different.
2. Daily variation: The counter value can change quite dramatically from one day to another. You won’t notice this so much if you post at least once every day, but because of the method FeedBurner uses to estimate the subscriber count, quiet days will bring the number down.

Luckily this FeedCount “chicklet” (as they call it) is not the only way to show off your subscribers. FeedBurner provides a simple API that can be used to retrieve the count along with some other data in XML format. So, to get past these limitations, we are going to build a WordPress extension that fetches the subscriber count programmatically and then counts a five day average of the values read from FeedBurner. Finally, this number is printed out in a format that is easily formattable using CSS.

This tutorial is written with the Thesis theme in mind so we are going to end it by hooking the new subscriber count function to the Thesis sidebar. If you are not using Thesis, don’t worry, you can still follow most of the tutorial and just skip this last part and call the function from wherever you like in your own theme code.

If using Thesis, put all the code below to the custom/custom_functions.php file inside your theme directory installation. With other themes, most of the code will go to functions.php

Step 1: Polling today’s subscriber count from FeedBurner

The first step is to call the FeedBurner API to retrieve the information about your feed. For this to work, you need to have set up the feed in FeedBurner and your web hosting needs to support curl (if it doesn’t, contact your web host, it should not be a big deal to change).

Basically, we call the API method GetFeedData (or more precisely, https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=FEED_ID, where FEED_ID should be your feed’s ID) and parse the XML response for the field we are interested in, circulation. If you want, you can try opening the URL in your browser, and you’ll get something like this:

<?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="q4loi4ctntb3msebh2hb7i2bsg" uri="jarkkolaine/sSkp">
        <entry date="2010-05-24" circulation="653" hits="538" reach="45" />
    </feed>
</rsp>

Here’s the code that will poll the subscriber count from FeedBurner:

function poll_subscriber_count() {
    $apiURL = "https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=FEED_ID";

    // Read the XML using CURL
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $apiUrl);
    $data = curl_exec($ch);
    curl_close($ch);

    // Parse XML response
    $xml = new SimpleXMLElement($data);

    return array(
        "feed_count" => intval($xml->feed->entry['circulation']),
        "date" => $xml->feed->entry['date']
    );
}

If we would only be interested in styling the subscriber count, we wouldn’t need much more; calling this function and printing the feed count inside a div that can be styled with CSS would be enough.

But we want to address the fluctuation issue as well (and there is an even more important issue to worry about: for about an hour every day, this API call will return 0 as subscriber count while the system updates the number of the day!).

To get past these problems, we are going to save the subscriber count in a history table in the WordPress database and use that history to count the number to show to the visitors.

Step 2: Updating the five day history

WordPress provides an easy way to save data from plugins and themes using two functions: get_option to retrieve the stored values and update_option to save data.

In this following code snippet we use that functionality to save two values: the subscriber count history as an array of five numbers and the date of the last data point stored in the array. Each number in the history array is the subscriber count for one day, the newest always being in array index 0, and the oldest in 5.

In the end, the function returns the average subscriber count over the days stored in history.

function get_subscriber_count() {
    // Get previouus days counts (last five days)
    $subscriber_count_history = get_option('fburner_subscriber_history');
    if ($subscriber_count_history == null) {
        $subscriber_count_history = array();
    }

    $date_now = getdate();
    $today = $date_now["year"] . "-"
        . $date_now["mon"] . "-"
        . $date_now["mday"];

    $last_fb_date_saved = get_option('fburner_subscriber_stats_last_day');

    // FeedBurner updates around 7:00 PST, so we can use that as an estimate of when
    // to try to update the number for today. This way we only need to poll FeedBurner
    // once each day
    $hour = $date_now["hours"];
    if ($last_fb_date_saved != $today && $hour > 7) {
        $subscriber_count_data = poll_subscriber_count();
        $today_number = $subscriber_count_data["feed_count"];

        // Don't update if FeedBurner is not done updating today's numbers yet
        if ($today_number != 0) {
            $new_history = array();
            $new_history[0] = $today_number;

            // Move old history one step forward
            for ($i = 0; $i < count($subscriber_count_history); $i++) {
                if ($i < 5) {
                    $new_history[$i + 1] = $subscriber_count_history[$i];
                }
            }

            update_option('fburner_subscriber_history', $new_history);
            update_option('fburner_subscriber_stats_last_day', $today);
        }
    }

    // Calculate average
    $subscriber_count = 0;
    $history = get_option('fburner_subscriber_history');

    for ($i = 0; $i < count($history); $i++) {
        $subscriber_count += $history[$i];
    }

    if (count($history) == 0) {
        return 0;
    }
    return intval($subscriber_count / count($history));
}

Step 3: Displaying the number in your blog sidebar

Now we have the subscriber count stored in an integer variable and the only thing remaining is to actually show it to your visitors. For example like this:

This tutorial builds on the fabulous Thesis theme, so we can use Thesis custom hooks to place the number right before the sidebars. If you are not using Thesis, just look up the position in your php files where you want to add the subscriber count and call the get_subscriber_count function.

Here’s the subscriber count function and its Thesis hook that bring all the previous pieces together:

function show_subscriber_count() {
?>
    <div id="subscriber_count">
        Join <span class="rss_number"><?php echo get_subscriber_count(); ?></span> subscribers
       and receive free updates via <a href=YOUR FEED URL">RSS</a> or
       <a href="YOUR EMAIL FEED URL">email</a>!
    </div>
<?php
}

add_action('thesis_hook_before_sidebars', 'show_subscriber_count');

And that’s it. All that is left for you to do is to style the subscriber count box to fit your theme.

If you have any questions or concerns about the tutorial, leave a comment. I’ll be happy to help.

Tagged as: feedburner, thesis, tutorial, wordpress