Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development

The Blog

Building A Custom Subscriber Panel With Stats In WordPress

Posted on 03/23/10 in blog, development about , , , ,

RSS Feed - Build a custom subscriber panel

I’ve had several people ask me how I created the subscriber panel with stats on the top of my sidebar and how I have them separated out. It’s a great way to track which subscribing method people prefer and I’ve noticed that a lot of people no longer prefer to subscribe via RSS but through Twitter (I wonder how this skews stats for BuySellAds).

Anyways, the way to do this is simple. All you need is 1 plugin, some simple  HTML and PHP and a way to separate your email subscribers from your feeds subscribers.

Tracking the Subscribers Differently

First you’ll need a way to track your RSS feed subscribers. I don’t like to use Feedburner for the main feed, because it often goes down and the stats get erased (this has happened more than once!).

I use a plugin called Feed Statistics. Not only does it track how many subscribers you have, but it also tracks what reader they use, what feeds they use (it tracks all of your feeds) and can also track click throughs.

To track my email subscribers, I do use Feedburner, since it comes with a subscribe by email option (Don’t think WordPress does natively).

Twitter, of course, tracks itself. So how do we display these?

Showing RSS Feeds

Of course we’ll start off by giving our readers a link to subscribe to the feed. In WordPress, we can customize this easily and only offer them some of the feeds or all of the feeds. In my case, my portfolio and testimonial sections are also posts and built off categories. I don’t want those posts junking up the actual blog feed, so I only offer a subscription to posts under the blog category:

<!--Replace the link and icon paths to your info-->
<a title="Subscribe to my feed" rel="alternate" type="application/rss+xml" href="/feed?category_name=blog"><img class="widgetRSS" src="iconRSS.png" alt="Subscribe via RSS" /></a>
<a title="Subscribe to my feed" rel="alternate" type="application/rss+xml" href="/feed?category_name=blog">Subscribe via RSS</a>

Showing the actual feed count for your RSS subscribers is the easiest part to the panel. Simply call the plugin:

Photo by kk+

Showing Your Feedburner Email Subscription Feeds

Of course, make sure you give your readers an option to subscribe by email:

<!--Replace the link and icon paths to your info-->
<a title="Subscribe to my feed" rel="alternate" type="application/rss+xml" href="http://feedburner.google.com/fb/a/mailverify?uri=PortfolioOfAmberWeinbergDesignWebDevelopmentAndFreelanceBlog"><img class="widgetRSS" src="/wp-content/themes/Lumin/images/iconMail.png" alt="Subscribe via Mail" /></a>
<a title="Subscribe by email" href="http://feedburner.google.com/fb/a/mailverify?uri=PortfolioOfAmberWeinbergDesignWebDevelopmentAndFreelanceBlog">Subscribe via Email</a>

Showing your Feedburner stats is a bit more complicated than calling our plugin above. We’ll need to tap into Feedburner’s API to do this. We’ll also need to make sure, if Feedburner goes down (it does), that it doesn’t break our layout with a PHP error:

Of course, you can change the down message and the regular print message (I’ve commented it for you above) to whatever you want.

Showing Twitter Subscribers

First a link and icon to your profile.

<!--Replace the link and icon paths to your info-->
<a title="Subscribe via twitter" rel="alternate" type="application/rss+xml" href="http://www.twitter.com/amberweinberg"><img class="widgetRSS" src="/wp-content/themes/Lumin/images/iconTW.png" alt="Subscribe via Twitter" /></a>
<a title="Subscribe to blog posts by Twitter" href="http://www.twitter.com/amberweinberg">Subscribe via Twitter</a>

Showing Twitter subscribers works in a similar way to showing Feedburner subscribers. It’s also more important to hide the error and show a message, because Twitter’s API goes down A LOT. If you fail to do that, it will constantly break your site with a PHP error.

Check your results and voila!

For a working demo, simply glance to the top of the page and to the right! Have any questions?

Amber Weinberg specializes in clean and semantic HTML5, CSS3, responsive and WordPress development. She has over 15 years of coding experience and is super cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Chat with me about this on Twitter