Constructive Activism Badges

In the previous article, I illustrated how a portal could be specially designed for activist efforts. Now I want to turn my attention towards enhancing activism badges, in order to address some of the needs that have come up among the Free Alaa supporters.


Badges are graphics that bloggers and website publishers representing generally affiliations. Traditionally, they are image references which point to graphic files, such as GIFs.

Let’s say we want to have the graphic update each day to show the number of days that our dissident has been in jail. It’s possible to re-create the GIF each day. But that’s as much as you can do with GIF’s.

It’s much more flexible to use Javascript. We wouldn’t be locked into a single graphic; we can render whatever graphics, text, audio, video we want. I thought I’d just start with a simple dynamic HTML animation. In the examples below, hovering over the graphic unrolls a “ribbon” which provides more details about the activist. In addition, one javascript can manage multiple badges.


Here’s all the code you’d need to include. I’ve given it the name "Ajactivism&quot–; I just mixed up Ajax and activism. [Months back, Rod Boothby had credited WiredBlue with coining the word the term AJAX Badges.] I’ve tested them in IE6/Win and Firefox 1.5. If it doesn’t give the desired effects, try try here.

<script>var ajactivism_Isupport= “alaa yangjianli”;</script>
<script src=""></script>




These are samples, since I cannot guarantee any uptime or throughput from my server. I am making this code available that someone else can do so. I even dummied up a Free Yang Jianli badge– I will check with his wife if it’s okay.

The script code is actually comparatively simple: 200 lines. The difficult part is governance. With a swatch of HTML that is susceptible to changing over time, the blogger/publisher need to be assured that the message will be reliably updated, continually available, and not hacked.

Here are some other considerations for badges:

  • It would be sensible to serve the Activist information from a database; this can be regenerated into a static javascript file as needed.

  • It’s a good idea to enforce a standard width, and register standard backgrounds.

  • Note that for Alaa I included “XX people have signed the petition.” Well, I don’t know the number XX, since the petitions have been set up on different servers. See Mashup Petitions to see how they could be better integrated.

  • Certain RSS headlines could appear on the ribbon as well.

  • Looking ahead: should the campaign achieve its goal (e.g., the dissident is freed), what is the message that shows up? Is it responsible to morph it into a different campaign?