A while ago, I took a stab at writing a Wordpress Plugin - the Conditional Digg This Badge.

The plugin allows you to insert a Digg This badge in  your posts, but only have it appear if your post has a certain number of Diggs.  The idea is that you don’t want to promote the fact that your article only has one Digg - you only want to brag when it has 10, 20, or 100s.

The plugin ran into some problems, and I ran out of time to fix them.  As a result it’s dead.  However, I’ve recently had a few ideas on how to revive it and make it much more efficient.

The Old Plugin Method

The old plugin worked, but it was plagued with problems.  Most notably, it had a delayed effect and the badge wouldn’t show up for 10 or 15 seconds.  If it was used on an index page, it would slow down the loading of the page terribly.  It also broke when Wordpress moved to version 2.5.

Most of the problems, I think, come from the way I designed the plugin.  I had just begun tinkering with the Digg API to grab information from the Digg database, so I thought this plug-in would be a useful way to fetch information about an article and have it dynamically update the way the article is displayed.

The plug-in relied on a bit of Javascript to insert or remove the Digg Badge.  The JS used AJAX to contact the Digg API via a tiny php script.  If there was a sufficient number of diggs, the Digg Badge would be inserted.  Otherwise, the container div would just remain empty.

A Better Method - No More AJAX

Recently, I had an idea on how the plugin could be improved and re-implemented.  The loading problems seemed to derive from the Digg API - it sometimes lagging in response time, which prevented the Digg This Badge from appearing in a timely fashion.

A more streamlined method would be to use CSS to toggle the display of Badge on and off and use JS to find out how many Diggs the article has.

The Digg This Badge is contained in an iframe, which contains in its source the number of Diggs the post currently has.  If you look in the source of your page, you’ll see the src of the iframe.  Load that page and view its source.  You’ll see a line like…

<strong>1767</strong> diggs

It should be possible to use Javascript (and possibly jQuery for convenience) to access the iframe’s source, dig up the number of diggs, and then toggle the display attribute of the iframe on and off.

I tried testing this out last night, but I ran into some browser compatibility issues.  In Firefox, I was able to access the contents of the iframe.  However, both Google Chrome (my browser of choice) and Internet Explorer balked at the code.  It generated an error somewhere inside the jquery file itself, and any time I tried to access the contents of the iframe the script aborted.

The concept seems sound.  I just need to find a way to make the javascript work in Explorer.  Regardless, I’ll work up some code examples later on how to use jQuery to access an iframe.

The advantage of this method is that there should be no lag time at all.  As soon as the Badge would normally load, it should be a fraction of a second before the Javascript function to evaluate its logic and turn on the display attribute of the iframe.