Making A Custom Feedburner Subscriber Counter
Posted 2 months ago at 11:01 pm. 15 comments
So it’s fairly late here in the UK but I thought I’d do a quick tutorial on how to make a custom subscriber counter for you Feedburner feed. Usually you get one that looks something like this:
Not especially pretty but nice enough for most people. However what if you want to give a little bit of pazazz to it… Wow, did I just use the word pazazz! Damn.
So anyway here’s how to do it using PHP5 & GD. Please make sure you have GD installed on your server using phpinfo() before trying this. If you don’t have it either ask your system admin if they can install it for you, or if you run the server install it yourself.
Before we start here is what it can look like once it’s done. This is from my other blog, Celeb ‘O Rama:
You can make it look however you want but that one matches Celeb ‘O Rama in style. K, so here we go.
I’m going to use a PNG image but I would think it would work with jpegs too with a little bit of a switch around. Anyway first off, get the image you would like to use without any text on but use an image editor to line up some text in a font of your choosing to see how it looks.
Now we have the image let’s start the PHP script. Start off with a header to let the browser know we are giving it an image.
1 | header("Content-type: image/png"); |
Next we load in our background image:
2 | $img = imagecreatefrompng("subscribe.png"); |
If you are using a jpeg then change the last two lines to have jpeg, yes with the ‘e’, instead of png. Next we can allocate some colors for our text. I’m going to make two since I’m making a shadow as well.
3 4 | $color = imagecolorallocate($img, 255, 255, 255); $color2 = imagecolorallocate($img, 20, 20, 20); |
Now we load our Feedburner awarness API’s XML file using simpleXML. This requires that you have PHP5. There is a way to do it using PHP4 using the old XML parser but it’s very clunky and impractical for what we are doing. Change ‘celeb-o-rama’ for whatever is on the end of your Feedburner URL.
5 | $xml = simplexml_load_file('http://api.feedburner.com/awareness/1.0/GetFeedData?uri=celeb-o-rama') or die ('Couldn\'t load XML file!'); |
Next we get our feedcount.
6 | $feedCount = $xml->feed->entry['circulation']; |
Now you will need to get the font you decided on and copy it. Then upload this copy into the same directory as this PHP script. We will tell GD what it’s called now. I used impact, and it doesn’t matter it it’s a true type or open type font as long as the file extension is .ttf it should be fine.
7 | $font = 'impact.ttf'; |
Next set your lines of text. I’m going to use three.
8 9 10 | $line1 = "$feedCount readers"; $line2 = 'subscribed here.'; $line3 = 'Subscribe today!'; |
Now we use the imagettftext() function to place our text on the image. Using the function goes something like this, and yes all parts are required. imagettftext(image handle, font size, angle, x_pos, y_pos, color, font, text);.
11 12 13 14 15 16 | imagettftext($img, 16, 0, 69, 22, $color2, $font, $line1); imagettftext($img, 16, 0, 68, 22, $color, $font, $line1); imagettftext($img, 16, 0, 69, 43, $color2, $font, $line2); imagettftext($img, 16, 0, 68, 43, $color, $font, $line2); imagettftext($img, 16, 0, 73, 72, $color2, $font, $line3); imagettftext($img, 16, 0, 72, 72, $color, $font, $line3); |
The first one is the shadow, then the next is the white text. Finally we ‘make’ the image and then destroy the handle to stop memory waste, etc.
17 18 | imagepng($img); imagedestroy($img); |
Here is the whole script, with comments, in one text box for those who want to copy and paste.
header("Content-type: image/png"); // Load the PNG file $img = imagecreatefrompng("subscribe.png"); // Set 2 text colors, one for a shadow (Handle, RGB) $color = imagecolorallocate($img, 255, 255, 255); $color2 = imagecolorallocate($img, 20, 20, 20); // Load Feedburner Awareness API $xml = simplexml_load_file("http://api.feedburner.com/awareness/1.0/GetFeedData?uri=celeb-o-rama") or die ('Couldn\'t load XML file!'); // Load Feedcount $feedCount = $xml->feed->entry['circulation']; // Set our font (Use ttf only) $font = 'impact.ttf'; // Set our text $line1 = "$feedCount readers"; $line2 = 'subscribed here.'; $line3 = 'Subscribe today!'; // imagettftext(Img Handle, Text Size, Text Angle, X_pos, Y_pos, Color var, ttf Font var, Text var); imagettftext($img, 16, 0, 69, 22, $color2, $font, $line1); imagettftext($img, 16, 0, 68, 22, $color, $font, $line1); imagettftext($img, 16, 0, 69, 43, $color2, $font, $line2); imagettftext($img, 16, 0, 68, 43, $color, $font, $line2); imagettftext($img, 16, 0, 73, 72, $color2, $font, $line3); imagettftext($img, 16, 0, 72, 72, $color, $font, $line3); //'create' our image for the browser, then destroy the handle. imagepng($img); imagedestroy($img);
The background image, script and ttf font should all be uploaded into the same folder, although you can place the font and image in different folders I wouldn’t advise it. Oh and for those looking for accurate font sizes, the font size is in pixels or points depending on whether you are using GD1 or GD2 respectively. So that’s pixels for GD1 and points for GD2.
Well that’s it all you need to do is make an <img> tag with a src pointing to the script and it should load your image with your Feedburner count and message on it. 
So that it. If you have any questions or problems leave a comment and I’ll get back to you ASAIC.
This tutorial was inspired by a tutorial on Marcofolio.net. It is in most parts the same however I have modified it to work with .ttf font files and added the shadow effect. It is not intended to offend anyone, it is however intended to expand slightly on an already excellent tutorial. 
Loading ...
Hi there. I saw the same tutorial on Marcofolio.net and have tried the same thing using TTF files like you have suggested. But whichever way I try it, the image refuses to display.
Basically, the source code of my site header shows the img tag pointing to the php file…which is basically the same as yours with exception of the changes to the feedburner url and the font which I’ve uploaded and pointed to.
Any suggestions?
Something I forgot to mention in the tutorial was that you need the FreeType library along with your GD installation.
To see if you have FreeType just run
phpinfo()on a blank php file and look for FreeType.If it’s not there then sorry. You could ty to use the one on Marcofolio.net as I don’t think that one requires FreeType.
If you do have FreeType then I always find it helps to look at stupid things first. Like is the path to your PNG background image correct, so for instance does it load if you link directly to the image instead of the php file.
Is the file a valid PNG, I once had a problem with GD loading an image because it thought the file was corrupt?
Finally is the path to the ttf file correct. No way to check this one really just check it over again and again.
I hope one of those fixes your problem. I’d be suprised if you don’t have both GD & FreeType though as they have been relatively common on the servers I have used.
Good luck. Feel free to ask again if you’re still having the problem.
Thanks for getting back to me. Yeah, I’ve checked the php compatiblity using the Marcofolio php script and it returned this:
Array ( [GD Version] => bundled (2.0.28 compatible) [FreeType Support] => 1 [FreeType Linkage] => with freetype [T1Lib Support] => [GIF Read Support] => 1 [GIF Create Support] => 1 [JPG Support] => 1 [PNG Support] => 1 [WBMP Support] => 1 [XBM Support] => 1 [JIS-mapped Japanese Font Support] => )
So no problem with FreeType and PNG support. Just need to figure out what the hell is going wrong. It’s probably relative paths not being set correctly but I’ll have another look and get back to you.
Okay, linking directly to the image instead of the PHP file works fine…but linking to the PHP file itself does absolutely nothing.
Just out of curiosity, what constitutes as a valid PNG? Because most of the images I have hosted on the server are in PNG format and I’ve got no problem with those displaying properly.
Incidentally, the font I’ve uploaded is in .ttf format which I downloaded from dafont.com - I’ve included a direct link to this below. I’m thinking that perhaps it is an issue with this particular font. But surely that wouldn’t affect the php calling the png image? Or would it? I’m completely confused, lol.
Anyhow, that font:
Makisupa font
Hope this helps
Actually, scratch that - I’ve done it exactly like you and used the impact.tff font instead and still nothing. Argh!
Hmm. Very bizzare. By valid PNG I just mean make sure it displays correctly in a browser or photo viewer. Since it does it’s obviously valid.
If you get nothing at all I can only assume it is something in the script or relative paths like you said. You do indeed have Freetype and GD 2 so I’m unsure.
Could you post the entire script your using and explain where your files are relative to your script. When you post the php code please use these tags <pre lang=”php”> Code Here </pre> as I use a code color plugin and it will format the php code correctly.
No problem. This is the body of rss_count.php
The command I’m using to call the .php is basically the same as what you and Marcofolio are using:
That didn’t seem to display too well there, lol. Umm…this is what is going in the img src tag that calls rss_count.php:
http://www.cultofqelqoth.com/rss_count.php
Basically, the php file, font and png are uploaded to the top level directory on my domain. One thing which puzzled me was that I thought I was using php5 but in fact, I was on php4. So I backed up all the databases, upgraded to php5 and yup - still nothing. I’m at a total loss, lol.
I am unsure about this but I don’t think you can use a full url as a path to the ttf and the path to the png file unless you have fopen wrappers enabled. You could try a relative path, unless you have already tried that.
It’s also kind of odd that if I visit the rss_count file you have link to I can read it as text, unless of course you have written it as text and not as php.
Other than that I have absolutely no idea.
Ah. No tags for open and close php…I’m holding you responsible for that, lol. j/k
I’ll see if that sorts it out. Also, I have tried another approach by insertingan xml parser directly into the functions.php file of WordPress. Interestingly, this displays the background image for where the FeedCount display should go but bugger all else. Damnit. Nothing’s working here, lol.
Right - I’ll try changing that php file I uploaded. As for the path of the files (png and ttf), I guess I’ll need to include a ‘/’ before the actual filename. Thanks for getting back to me again. Hopefully, I will sort this out one way for another and let you enjoy your weekend without you having to experience anymore of my headache.
Okay, changed the php file and when I load that from the browser, it apparently contains errors:
http://www.cultofqelqoth.com/rss_count.php
All I’ve changed in rss_count.php is the relative path info and the open and close tags for php code. Nothing else. So I gues we are both kinda stuck, huh?
Found the problem. You had mixed my code with Marcofolios which is ok but you forgot to change the imagestring functions to imagettftext() instead.
Also the font path has to be local you cannot use a full URL. You can for the image path though.
Try this code and it should work ok.
I included php tag for you this time.
You are awesome. Thanks so much for helping out with this! All I’ve got to do now is modify the image so that it nests nicely on the sidebar but yeah, this does everything I want it to. Thanks again!
No problem.