Style Your Subscriber Number
Thursday, February 14th, 2008 at 2:29 am
You know that ugly little semi-3d Feedburner box that displays the number of people who subscribe to your blog? Well, you can totally pimp it! This is something I have been meaning to do for ages, but days became weeks, weeks became months and… you get the picture. I finally knuckled down to the task tonight and it took me less than an hour to complete. North x East published an article explaining how to do this on June 12th last year, but unfortunately it had a misleading title, so I overlooked it until now. Here’s my version:
This is an example of the default feedburner “chicklet” for Blogsolid.
Here are a couple of examples from other blogs where some style has been applied to the subscriber number:
Georgia Bold featuring a bright background image - Lesley G
Stylish Georgia - North x East
Plain and subtle Verdana - Posh CSS
Large Arial with a yummy RSS icon - Freelance Switch
If you blog in Wordpress, use Feedburner to host your feed and have some basic knowledge of CSS, you are in luck, because a clever Italian guy by the name of Francesco Mapelli created a WP-plugin for this purpose - Feed Count.
Download the plugin and upload it to the wp-content/plugins folder on your server. Then log into your Wordpress control panel in a browser and activate the Feed Count plugin. Now go to Options> Feed Count and you should find a screen that looks like this:
Once you have filled in the details required, you need to stick the following bit of PHP code into your blog template wherever you wish for the subscriber number to appear (probably the sidebar):
<?php if (function_exists('fc_feedcount')) fc_feedcount(); ?>
The resulting HTML looks like this:
<div class='feedcountdiv'>
<p><a href='http://feeds.feedburner.com/Blogsolid'>
<span class='feedcount'>
<span class='before'>±</span>
<span class='subscribers'>465</span>
<span class='after'>so far...</span>
</span>
</a></p>
</div>
I threw in the little “plus-minus” sign just to be fancy, you are free to fill in whatever you want.
At this point it would be a good idea to log into Feedburner and check that the “Awareness API” for your feed, found under “Publicize” is activated. This is important because it makes the whole thing work!
Now that everything is in place, you should see your subscriber number appear on the page when you view your blog in a browser. It might not be pretty yet, but that’s where your creativity and CSS skills come into play!
The result of my efforts is visible in Blogsolid’s sidebar:
Why not give it a try, then post a comment so we can click on your name and check out the work you’ve done to the subscriber number on your blog!
Brian Purkiss Says:
February 14th, 2008 at 4:22 am
Very nice.
Yeah, I did that a bit ago.
It took a lot less time than I thought.
:-)
Amanda Says:
February 14th, 2008 at 12:43 pm
Thanks for posting this! I’ve been wondering how others have styled their feed subscriber count before but had never been able to discover how.
My main blog is hosted by Blogger, so I’ll look into how this can be adapted for Blogger users and will let you know about this.
Best wishes,
Amanda
Bernat Says:
February 14th, 2008 at 5:49 pm
Thanks! That’s useful.
Imar at Blogsolid Says:
February 14th, 2008 at 7:45 pm
Looking forward to your solution for Blogger, Amanda!
Kosta Kontos Says:
February 14th, 2008 at 8:18 pm
Excellent tutorial. Thanks for the effort. Up until now I was oblivious to the benefits of displaying one’s subscriber count. This easy-to-follow walkthrough prevents me from procrastinating about implementing this cool feature. I best get to it.
Keep up the good work Imar.
15 de febrero de 2008 Says:
February 15th, 2008 at 5:06 pm
[…] Estilizando tu número de suscriptores […]
redwall_hp Says:
February 17th, 2008 at 5:43 pm
Great tutorial! I may end-up doing something like this in the future, if I do some major theme tweaking on Webmaster-Source. Though I’m still not quite to the point where I want to advertise my subscriber count (I only have 130+ currently).
stesma Says:
February 19th, 2008 at 5:53 pm
thanks for sharing n ur guide.. :)
nicolas Says:
February 21st, 2008 at 10:10 am
This has nothing to do with the post (though its really helpful) but I was wondering if there is such a thing as a ” thumbnail cropper” as opposed to a thumbnail size for wordpress. I am using cropped image on my blog but I have to go in photoshop and cropped 600X100 images everytime and it’s kind of annoying.
adelle Says:
June 26th, 2008 at 5:48 pm
Great blog you have here, would like to see it updated more often!