Creating a counter for your DIA supporter list

A number of our clients use DemocracyInAction.org for their CRM and online advocacy needs. One of the more frequent requests we receive is the simple ability to display a counter on a website indicating the number of members in a particular supporter list.

Recently, a client asked us to do just that -- and using a combination of Salsa's new API and some GD trickery provided by the excellent folks at Energy Action, we came up with the following solution:

Here's how we did it:

First, we created a custom report in DIA to return a counter of the supporters for the particular group we were interested in. Then, using Salsa's API, we pulled that number using PHP:

$data=load("https://salsa.democracyinaction.org/dia/rest/report.jsp?report_KEY=1&username=[dia_username]&password=[dia_password]");

This returns an XML file of the supporter list that looks something like this:

<data organization_KEY=\"ORG_ID\">
	<item>
		<Count-supporter_groups.supporter_KEY>1771</Count-supporter_groups.supporter_KEY>
	</item>
</data>

Then, using a few simple XML functions (attached) we parsed that XML into a variable:

$number = GetElementByName($data, \"<Count-supporter_groups.supporter_KEY>\", \"</C
ount-supporter_groups.supporter_KEY>\");

Theoretically, you could stop here and just echo this out -- but in our case, we wanted an embeddable solution that anyone could post on their blog or website. The natural answer was to create an image on-demand that people could simply include in a sidebar or post.

To do this, we used the excellent GD library for PHP. Using a background image we quickly threw together in Photoshop, we used GD to render a PNG with the value of the variable rendered over top:

header("Content-type: image/x-png");
$pImage=imagecreatefrompng("img/counter_src.png"); 
$font = realpath("fonts/ARIAL.TTF"); 
$black = imagecolorallocate($pImage, 0, 0, 0); 
imagettftext ( $pImage, 17, 0, 42, 29, $black,
realpath($font), $number ); 
imagepng($pImage); //send image to browser 
end();

Note that using this method you can use any TrueType font you like (provided you have license to use it!)

This is where the real trickery begins. Now, all you have to do is save this PHP script as a .png file and add the following line to your .htaccess:

# Make PHP code look like unknown types
AddType application/x-httpd-php .png

Your Web server will now read any .png file in the current directory and parse it using PHP -- thus rendering the PNG with the embedded counter.

Now, anyone can easily embed this counter using an basic tag:

<img src=\"http://clients.echoditto.com/powershift/counter/counter.png\">

It's that easy!