Making A Custom Feedburner Subscriber Counter
Posted 1 week, 6 days ago at 11:01 pm. 2 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 ...