Stylize Your Digg Count
By Leon Chevalier2008-04-22
An AJAX Example
This is for those of you who don’t want to mess around with PHP Classes and databases. I’ll show you how to create the digg counts from the examples at the start of the article. Please bear in mind this should be for a small amount of links, as we’ll be querying digg for every link. You will also need PHP for this to work on your site.
The PHP
We are going to use the PHP class that I have gone through above. Don’t worry - you don’t have to understand it. All you have to do is download it, and then upload it to your server. Let’s pretend you’ve put it in off the root of your server, so you should now have a folder there called digg_proxy with two files in it.
The CSS
The digg count boxes are styled with CSS. So download the digg query ZIP from here and extract onto your server. It should be in its own folder called digg_query. Then just include the CSS in your document:
The JavaScript
Our digg count generator will use JavaScript to query a PHP script, retrieve information about the link, and then display it.
The JavaSscript is dependent on the Prototype library, so the first thing you need to do is include the latest version of Prototype. If you have Wordpress 2.5 then you already have it. Prototype can be quite large (122K uncompressed, unminified) so I suggest you minify it and gzip it (Plug: PHP Speedy can do this for you automatically). So, in the HTML of the document add this link between the <head></head> tags. You will have to make sure path_to_prototype is correct for you.
Now we include the JavaScript that will retrieve the digg information and display the counts. The file is in the same folder as the CSS style sheet so you can include it with the same path. Just make sure you include the JavaScript below the Prototype include above:
Feel free to have a look through the JavaScript if you’re curious. Otherwise, we’re just about read to go. All we need to do now is run the diggQuery JavaScript. Let’s jump straight into an example. This is how I get the digg count to appear next to the bulleted list at the start of the article:
So, you’ll see that we start a new instance of the diggQuery object and pass it some options. The options are in JavaScript object format: {key1:value1,key2:value2}. So the options I passed told the script to send its requests to our script located at /digg_proxy/proxy.php (proxy), to make the digg count 50% transparent (opacity) and to only apply the counts to links contained in the ul.top_articles part of the document (link_css). The first two options should be clear, but what about the link_css part?
Tutorial Pages:
» What’s a digg count?
» The Example
» The Digg API
» A PHP Example
» A class to query the API
» An AJAX Example
» Which links get a digg count?
» Starting the digg count
» Downloads
