Home > CSS Blog > Fixing a Bad Feedburner Subscriber Count

Fixing a Bad Feedburner Subscriber Count

March 21st, 2009

Fixing a Bad Feedburner Subscriber Count

feedburner errors

Google’s Feedburner is a fantastic service for managing RSS feeds and delivering useful statistics on those feeds, and they have a great API (application programming interface) for pulling those statistics and displaying them on your site. But lately, I’ve run into occasional problems getting at the information that Feedburner collects. Here’s the solution that I’ve developed for dealing with Feedburner’s flops.

I’m using Francesco Mapelli’s Feed Count WordPress plugin to display the number of feed subscribers I’ve accrued. It’s a great little plugin that allows you to generate a custom message associated with your feed stats. For example, in the subscribe section of my sidebar, there’s a little message that, as I write this, reads, “Join 2449 other happy readers!” That’s the Feed Count plugin at work. I find it preferable to those little Feedburner “chicklets” that are scattered around the web these days.

But here’s the problem: when Feed Count makes a call to Feedburner to grab my latest subscriber stats, sometimes Feedburner drops the ball when it returns the number. Instead of returning the number of subscribers, it will sometimes return a “N/A” instead, suggesting Feedburner couldn’t find my stats, and resulting in a sentence that reads “Join N/A other happy readers!” Not quite the message I intended. And worse, sometimes Feedburner will return a big fat zero if it can’t find my stats — and “Join 0 happy readers!” is definitely not the impression I’m hoping to make on first-time visitors.

So what’s my solution? When in doubt, turn to JavaScript.

A JavaScript Solution

I first wrote this JavaScript solution in the last iteration of CSS Newbie when I finally got sick of being greeted every morning with my “not available” subscriber count:

$spans = document.getElementById('subbox').getElementsByTagName('span');
if($spans[4].innerHTML=="N/A" || $spans[4].innerHTML=="0") {
	$spans[4].innerHTML = "thousands of";
}

This solution relies heavily on the XHTML structure generated by the Feed Count plugin, but the concept could be edited to work with most any solution. Basically, I’m using JavaScript to find the 5th span (counting starts at 0) inside the #subbox id, which is the span generated by Feed Count that holds my subscriber count. The code checks the contents of that span, and if it finds one of the two dreaded values — N/A or 0 — it replaces that content with the phrase “thousands of” instead. It’s not as specific as I’d like, but it certainly gets the point across.

A jQuery Option

When I rebuilt CSS Newbie recently, I decided to upgrade this script to work with jQuery. I was already using jQuery for a few other effects on the page, so it made sense to cut down on the size of my code where available. Here’s the much smaller jQuery solution:

if($(".subscribers").html() == "N/A" || $(".subscribers").html() == "0") {
	$(".subscribers").html("thousands of");
}

This code does essentially the same as the JavaScript above but in fewer lines and, I personally think, with greater clarity. It looks for the contents of the element with the “.subscribers” class (which would have been an absolute bear to do with JavaScript due to the lack of a getElementsByClass function) and replaces it if it’s on our no-go list.

This is how I’ve gotten around the inconsistencies of the Feedburner API. If you have other solutions or ideas you’d like to share, I’d love to hear them in the comments!

How to Fix WordPress Feedburner Plugins After Converting to Google Feedburner

Feedburner API

I ran into (yet another) Feed Count + Feedburner problem recently, shortly after writing my last article on accounting for Feedburner’s subscriber count mistakes. And since I heard from a few people who are also using the Feed Count plugin, I thought I should share this info.

The Backstory

As I’m sure all you Feedburner users out there are well aware, Google purchased Feedburner quite some time ago. But until recently, that didn’t mean much: the same people were working on the code, your information was stored in the same place and was represented the same way, and so on.

But recently Google has begun bringing Feedburner more fully into the fold. As a result, all Feedburner users are being required to convert their Feedburner accounts into Google accounts. That created quite a few headaches for lots of people (including myself) right off the bat, as it took a good week for Google to nail down my subscriber numbers with any accuracy – one day I would have thousands of subscribers, the next I might have zero, and the day following only a few hundred.

A New Problem

However, even once Google started reporting my Feedburner numbers correctly, I still had a problem: my Feed Count plugin no longer grabbed my subscription statistics. Now, this wasn’t as huge a problem as it could have been, because I had my jQuery Feeburner fix in place… but I still wanted my real subscriber stats back at some point.

After a bit of digging, I found the problem: as part of their conversion from Feedburner to “Google” Feedburner, Google changed the location of their API. Thus, any plugins that used the old Feedburner API ceased functioning once that user’s account was successfully ported to Google.

The Solution

Long-term, the best solution would be for the plugin developers to update and release new versions of their plugins. But as of now, the Feed Count plugin has not been updated – and since it hasn’t seen an update since last July, I’m not going to hold my breath on a new version. So I decided to take matters into my own hands and edit my copy of the Feed Count plugin.

Note: this solution is specific to the Feed Count plugin, but any brave souls out there could probably modify and use this information to update other plugins as well.

I opened up my copy of the Feed Count plugin file (feedcount.php) and found this function:

function mapelli_fc_get_defaults() {
	return array(
			'map_fc_feedurl' => '',
		  'map_fc_queryurl' =>'http://api.feedburner.com/awareness/1.0/GetFeedData?uri=',
			'map_fc_lastcount' => 'N/A',
			'map_fc_lastupdate' => 0,
			'map_fc_updateinterval' => 60, // 1 h
	    'map_fc_error_updateinterval' => 5, // 5 min
		  );
}

This function mostly sets all the plugin defaults, but it also sets the “queryurl” – the website that the plugin hits to find your subscriber count information. This URL is not customizable anywhere inside WordPress, and since this URL has now changed, we’re forced to edit the plugin itself.

All I had to do was change the “map_fc_queryurl” line to read this instead:

'map_fc_queryurl' =>'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=',

Then I saved the plugin, uploaded it to my server, and my stats started showing up again! However, it’d still recommend putting something like this JavaScript fix in place for those random times when Feedburner drops the ball (and your subscriber count).

Note: Your stats probably won’t start showing up again instantly. You’ll have to wait for the duration of your “update interval,” which can be configured in WordPress under Settings -> Feed Count:

feedcount update interval

If you’re using a different plugin and have run into this same problem, please give this solution a try and let people know in the comments if it worked. Thanks!

AJAX Crawler – Collection of DHTML and AJAX Samples.: CSS Image Rollovers

Visit the library of ajax, DHTML, php, and .net codes and find the interesting … CSS Image Rollovers. Flip – A jQuery plugin. FreshGenerator – Webdesign Tool …

Source

AJAX Crawler – Collection of DHTML and AJAX Samples.: CSS Image Rollovers

Visit the library of ajax, DHTML, php, and .net codes and find the interesting … CSS Image Rollovers. Flip – A jQuery plugin. FreshGenerator – Webdesign Tool …

Source

Feed Icons – Home of the Standard Web Feed Icon

… examples of different ways you can use it with minimal HTML and CSS. … CSS … “feed-button”><a href=”#”>Comments Feed</a></p> CSS: .feed-button { padding: …

Source

NealGrosskopf.com l CSS Horizontal And Vertical Align JQuery Plugin

CSS Horizontal And Vertical Align JQuery Plugin – From … Trygve: Add vAlign and hAlign calls to documents resize-Event? This can be done by jQuery, too…

Source

The Year In Review: 2008

Fireworks over Enmore, Sydney
Photo by yewenyi.

2008 was a great year for CSS Newbie. And in the same nostalgic spirit of CSS-Tricks, Smashing Magazine and (I’m sure) countless other web entities, I thought I’d take a minute or two to step back and reflect on what the year has brought for CSS Newbie.

Although I first purchased cssnewbie.com some time in the middle of 2007 and wrote my first “intro to CSS” article in November of last year, I didn’t officially launch the site until February 1, 2008. Thus, this article also serves as History of CSS Newbie – before 2008, there wasn’t such a website, and now there is. And thanks to you fantastic readers and commenters out there, it’s become a better and more rewarding website than I had imagined it could.

Growth

On January 1, 2008, CSS Newbie had exactly zero visitors – it seems even I was too busy recovering from my celebrating to stop by! Luckily, that trend hasn’t continued. I published my first “official” article on the site (talking about how to create book-style article introductions) on February 1st. That day I saw a huge jump in traffic… 11 visits!

By the end of the week, that one article had gained me a couple hundred visitors, and a milestone against which to work. Although the number was small, that first week’s worth of traffic meant a great deal to me. It proved, if nothing else, that maybe I wasn’t entirely crazy to think that I could put together a website talking about CSS. Maybe, just maybe, a few people would find what I had to say interesting.

That first successful article gave me the drive to write a second, and so forth until here we are at the end of 2008 and the CSS Newbie table of contents is chock full of interesting tidbits, so much so that I often find myself looking through the archive to remember how to do things I’ve forgotten! That’s one benefit of writing for CSS Newbie that I never expected.

Statistics

I’m a bit of a statistics nerd. As such, here are some interesting stats that help visualize the year’s progression.

I published 99 articles, or an average of a little more than eight per month.
You-all have left 670 comments(!). That’s an average of 56 per month, or roughly seven comments per article. And I appreciate it!
Alexa gives CSS Newbie a 3-month average traffic rank of 124,122… and a 1-week average of 58,318. Growth is in the cards!
152,907 unique visitors have stopped by this year, generating 293,329 page views.
50% of my traffic came from other sites. Thanks to all of you who linked here!
38% of visitors get here through search engines.

The five most responded-to articles of the year were:

And here are the five most popular articles of the year in terms of traffic:

Progression

And where will CSS Newbie go from here? Well, I certainly hope to increase both overall usefulness and visitor levels between the end of this year and the end of 2009. But how that happens could have a lot to do with you, the reader.

To that end, I’ve started a new survey to find out what you’d like to see happen with CSS Newbie over the course of the next year. I’ve made a few suggestions for ideas that I’ve thrown around, but if you can think of anything that I should be doing that I haven’t considered, please let me know about it in the comments.

The survey:

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

The survey is also available in the footer of every page on the site. Please take a second to let me know what you’d like to see from the site over the next year – I’ll take your suggestions into very serious consideration.

Thanks

Thank you, the reader, for making CSS Newbie what it is today, and for helping me make it what it will become in 2009. Thanks to my guest authors for the year: Scott Philips, Chris Coyier, and Aaron Webb. Thanks to Jeremy Harrington for designing the new CSS Newbie that launched at the beginning of this month. Thanks to my coworkers and friends for helping me talk through my article ideas and suggesting fantastic articles of their own. And thanks to the Twitter crowd for expanding my online and inlife communities in ways I never imagined.

Here’s to a fantastic 2008, and an even better 2009!

Styling the button element with sliding doors | Filament Group, Inc.

At Filament Group, we build elegant communications and interactions that help people understand, work, and collaborate … <span>Submit</span></button> CSS …

Source

Advanced jQuery Tabbed Box Techniques

Last week’s article covered how to build a tabbed box interface, starting with Photoshop, and moving through XHTML and CSS to our basic jQuery functionality. If you missed it, I would highly recommend starting your reading there. This article will show you how to use jQuery to make your tabbed interface more attractive and interactive. Specifically, I’ll show you how to:

Make your tabs all the same height
Automatically rotate through your tabbed content
Stop the rotation when the user is interacting with the content

Equal Height Tabs

The tabbed interface we built last week was fully functional, but one nicety I’d like to add is the option to have all your tabs be the same height – a height that is determined by the content within the tabs, not any number I arbitrarily determine in advance.

While there are several ways to calculate and apply height in jQuery, the fastest and easiest means to our end would be to use the equalHeights jQuery plugin I developed and wrote about recently. By using that plugin, we’d only have to make a single addition to the “document ready” portion of our jQuery:

$(".tabbed-content").equalHeights();

This will cycle through all of our tabbed content divs and equalize their heights based on the height of the tallest div. The benefit of this is the content around our tabbed box won’t shift up or down each time the user switches tabs, resulting in a more pleasant visual experience.

Rotate Through Tabbed Content

While tabbed boxes like the one we’ve built are a great way to fit a large amount of content in a small space, they do have one drawback: many users never click through the tabs to see what all is offered, meaning they only ever see the content on the first tab. My proposed solution to this problem is to automatically rotate through the tabs.

This solution has two benefits: first, the movement is more likely to catch the users’ eyes, increasing the chances they’ll notice the tabbed box in the first place. Second, it allows your users to see all the content your box contains instead of just the first tab.

Making this adjustment to our jQuery requires edits in several areas, so I’ll show you the new code in its entirety before explaining what it all does:

var currentTab = 0;
var rotateSpeed = 5000;
var numTabs;.
var autoRotate;

function openTab(clickedTab) {
	var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
	$(".tabbed-box .tabs li a").removeClass("active");
	$(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
	$(".tabbed-box .tabbed-content").hide();
	$(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
	currentTab = thisTab;
}

function rotateTabs() {
	var nextTab = (currentTab == (numTabs - 1)) ? 0 : currentTab + 1;
	openTab($(".tabbed-box .tabs li a:eq("+nextTab+")"));
}

$(document).ready(function() {
	$(".tabbed-content").equalHeights();
	numTabs = $(".tabbed-box .tabs li a").length;

	$(".tabbed-box .tabs li a").click(function() {
		openTab($(this)); return false;
	});

	autoRotate = setInterval("rotateTabs()", rotateSpeed);
	$(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});

The first variable, currentTab, is unchanged from our first iteration. But then we’ve added three new variables:

rotateSpeed is the number of milliseconds to wait before switching tabs.
numTabs is a variable that will contain the total number of tabs in our box. We’re initializing it at the beginning so we can use it in all our functions.
autoRotate is a variable we’ll use later.

Our openTab function hasn’t changed. If you’d like to understand how it works, please refer to the first article.

Next we’ve written a new function called rotateTabs. This function will handle the math required to determine which tab should be opened next. First we set a new variable, nextTab. What we set nextTab to depends on which tab we’re on currently. The function looks at currentTab: if currentTab is our last tab in the list, it starts back over at the beginning (the tab with an index of 0). Otherwise, nextTab is simply the next tab in the list. Once we’ve determined our next tab, we call the openTab function, which prevents us from having to duplicate all that heavy lifting.

We’ve added two lines to our document ready function. The first sets the numTabs variable to be the number of tabs in our box. We don’t populate this variable until the document is ready, because otherwise it will try to count the tabs before our tabs have loaded and will return a length of -1 (aka, none found).

The second bit we added is towards the end, where we set autoRotate. In autoRotate we’re calling the JavasScript setInterval function, which executes a piece of JavaScript on a regular interval. As we’ve written it, we will be calling our autoRotate function every “rotateSpeed” milliseconds. This means that when our document loads, it will wait that many milliseconds, then switch to the next tab, then pause again, then switch again infinitely.

Pretty neat, huh? You can see this functionality in action here.

Stopping the Rotation

Now, automatically rotating your tabs is a pretty awesome effect, but at some point you’re probably going to want that rotation to stop. Specifically, you don’t want your tabs switching when your users are interacting with them.

I tested several scenarios on when and how to stop the tabs from rotating before deciding on how I’m doing it here. It only requires editing a couple of lines from our document ready function:

$(document).ready(function() {
	$(".tabbed-content").equalHeights();
	numTabs = $(".tabbed-box .tabs li a").length;
	$(".tabbed-box .tabs li a").click(function() {
		openTab($(this)); return false;
	});
	$(".tabbed-box").mouseover(function(){clearInterval(autoRotate)})
	.mouseout(function(){autoRotate = setInterval("rotateTabs()", rotateSpeed)});

	$(".tabbed-box .tabs li a:eq("+currentTab+")").click()
	$(".tabbed-box").mouseout();

});

Here we’ve replaced our setInterval function with something a little more complex. We’re now using both setInterval and clearInterval (which stops setInterval), and we’re applying them when the user’s mouse interacts with our tabbed box.

Specifically, we’re letting the box auto-rotate whenever the mouse is nowhere near the box, and stopping the box from rotating whenever the mouse is over the box. This means that as long as the user has the mouse over the box, as if they were reading, or clicking through the tabs, or clicking on something inside one of our tabs, the tabs wouldn’t switch on them. But as soon as they’re done interacting with the box, it’ll switch back to its regular rotation.

This does require one extra line at the end of the script, to force a “mouseout” event on the tabbed box, which gets things rotating by default.

You can see our fully functional tabbed interface here. Give it a try: watch it rotate through, and then try interacting with the box a bit. You’ll see that the tabs don’t automatically move, as long as you’re actively engaged with the box.

And that’s that! I hope you’ve found this mini-series helpful, and I’d love to see how you’ve implemented this idea on your own websites. Drop me a line in the comments below if you do.

Postscript

Many thanks to the terrific Amber Rhea for her work on CSS Insider. You can continue to find Amber on our Download Squad blog. And this site will remain available for reference and searching. Thanks to the readers who commented on the retirement of CSS Insider, and thanks to everyone who visited this blog over the last couple of years!

Permalink | Email this | Linking Blogs | Comments

Reader Response: A Simple, Streamlined E-Commerce Solution

Today, dear readers, I come to you with my arms wide open — and my shoulders caught somewhere between a slump and a shrug. I’ve been tearing my hair out over the last couple of months looking for the perfect ecommerce solution for my specific needs and wants. I’ve come up short.

But it occurs to me that I have a lot of smart, savvy readers here on CSS Newbie — and maybe, just maybe, you’ll be able to help me find the perfect shopping cart. Below, I’ll explain specifically what I’m looking for (and a bit about what I’m not looking for, too). If you know of a cart that meets my needs — or even just some of them — please do not hesitate to let me know! I’m hoping that the comments on this article will prove as plentiful as Starbucks on the open prairie. And twice as useful.

I Want a Simple, User-Friendly Cart that Stays Out of My Way.

That about sums it up, really. But for more detail, here’s what I want/need in a cart:

A self-hosted solution. If it weren’t for this requirement, I think Foxycart would be my #1 contender. Consider that a hint — if you know of something Foxycart-eque, but is self-hosted instead, please let me know!
Supports everything PayPal has to offer. Specifically, I want something that can support Website Payments Pro and the Payflow Pro gateway. This way I can handle payments on my site, but still take advantage of PayPal’s expertise, PCI compliance, and competitive pricing.
Flexible, straightforward templating. I am a front-end developer. Any cart solution that tries to stand between me and my code or that makes templating a holy hell isn’t a good solution. I want simple, straightforward flexibility. For example, I’ve been working with Magento a lot recently, and while it has a lot of great features, it’s a huge pain to deviate too far from the standard build. Every small change requires updates in multiple disparate files and hours of time for a five-minute job. My ideal solution would let me build my pages however I wanted, and just drop in the “cart” functionality wherever I cared to do so.
Good support of downloadable products. The stores I’m building will have both hard and soft goods, so I need the cart to work equally smoothly with both.
Built for LAMP servers. The ideal solution would run on PHP/MySQL, but I would consider other LAMP-friendly options. Sorry, but ASP/.NET solutions aren’t a possibility for me.
A single product database. This solution will be running multiple stores, but several of the stores will share some products. In the interest of avoiding redundant data, I’d like to have a single product database that all my stores can draw from.
Access to the source. I don’t want to have to wait for a team halfway around the world or a community of volunteer developers to get around to building the functionality I need if I think I could tackle the project myself. If I can’t have access to the source itself, an exceptional plugin system would be a good alternative.
A flexible discounting system. I want to be able to offer (as a fake example) 20% off orders of $50 or more on certain products. I want to discount items if people buy two or more of the same product. I want sales that run for three weeks, and expire automatically. Or at least some of those things.

That’s the basics of what I need, folks. That isn’t too much to ask, is it?

To summarize, I’m looking for a simple, straightforward shopping cart that makes templating a breeze, runs on PHP/MySQL, supports PayPal gateways, allows virtual goods and discounts, and is something I can install locally and modify. I do not need a solution that tries to be everything at once — it doesn’t have to contain a CMS, a catalog, or an inventory system. It doesn’t have to provide a newsletter, it needn’t compare items, and it shouldn’t try to walk my dog on Thursdays. I don’t want a jack-of-all-trades: I want a master of one (or two).

I also want to clarify: this does not have to be a free solution. If you know of a commercial option that does all this, I would be very excited to hear about it.

So! Let me know what you know in the comments below. Even if you know of a cart that fulfills some of these needs, I would be excited to hear about it — there’s always the chance I can customize it to do what I need from there.