///Stylize Your Digg Count

Stylize Your Digg Count

What’s a Digg count?

A digg count normally comes in badge form – I’m sure you’ve seen it. It shows how many diggs a web page has, and provides a link for you to digg it. Digg have gone out of their way to make showing one easy; displaying a single digg count is as simple as dropping in a single piece of JavaScript on your page.

<script src=”http://digg.com/tools/diggthis.js” type=”text/javascript”>
</script>

Of course, it makes sense that they would – it’s beneficial to them that you send visitors through to their site, and beneficial to you that those visitors end up digging your article. But what if you want to go one step further and display a digg count for a whole range of articles?

The Example

Click the graphic below for live example of use in list of articles with digg count and inside paragraph itself with small stylish digg icon

The Digg API

So, how do we go about creating our digg count? The first step is to get familiar with the Digg API. What’s an API? Basically, it’s a website that returns data depending on the query that you give it – like Google returning answers to your search query. The difference is that the data comes back in a format that makes it easy for you to use in other applications. Here’s an example.

http://services.digg.com/stories/?link=http://stylizedweb.com/2008/02/14/10-best-css-hacks/[..]

If you click that link it should open up in your browser and you will see the data that digg has on the stylizedweb article about CSS hacks. The data there is in XML format. Digg can also return data in PHP serialized object and JSON format.

A PHP Example

Over at http://purrl.net I didn’t just want to display the digg count for a few links like in the examples above – I wanted to display it for up to 200 links on one page. If this is the case for you, you will need to store the digg count, most usefully in a database. Personally, I set up a database table for my link info. Two of the fields assocated with the link were “digg_count” and “digg_story_id”. I then periodically query the digg API to update the count.

A class to query the API

There is a PEAR package available, but for the purpose of this tutorial I’m going to show to how to create a class yourself. We’ll keep everything as basic as possible, and make the code PHP4 compatible.

The first thing we’re going to need is a way to download the data from the API urls that we’ll be accessing. A great class you can use to do this is Snoopy. If you have WordPress, the class is included in the wp-includes directory. If not, it’s a small download. So, the first thing we need to do is include the Snoopy class, and create a new Snoopy object.Make sure you include the correct path when you include Snoopy.

require(”class-snoopy.php”);
$snoopy = new Snoopy();

Ok, now let’s see how we’ll be getting the data from Digg. All we need to do is instantiate the class we’ll be making, and include some options as a parameter. Like this:

$proxy = new digg_proxy(array(’snoopy’=>$snoopy,
‘func’=>’return_php_object’,
‘url’=>’http://stylizedweb.com’,
‘type’=>’php’
)
);

The first option we already know about, it’s snoopy. The second (func) is the function inside the class we want to run. Url is the URL we want to query Digg about, and type is the format we want Digg to return the data in.

OK, so let’s see the full code:

require(”class-snoopy.php”);
$snoopy = new Snoopy();$proxy = new digg_proxy(array(’snoopy’=>$snoopy,
‘func’=>’return_php_object’,
‘url’=>’http://stylizedweb.com’,
‘type’=>’php’
)
);

/**
* Connects to DIGG API and returns data
**/
class digg_proxy {

/**
* Constructor, sets up default vars
**/
function digg_proxy($array=null) {

if(is_array($array)) {
foreach($array AS $key=>$value) {
$this->$key = $value;
}
}

//Default vars. $_GET overrides defaults
$input = array(’url’=>”,’ids’=>”,’type’=>’php’,’func’=>false);
foreach($input AS $name=>$default) {
if(empty($this->$name)) {
if(!empty($_GET[$name])) {
$this->$name = $_GET[$name];
} else {
$this->$name = $default;
}
}
}

$func = $this->func;
if(method_exists($this,$func)) {
$this->$func();
}

}

/**
* Gets DIGG info on a story URL
**/
function get_story_info() {

if(empty($this->url)) {
return false;
}

$this->url = ‘http://services.digg.com/stories/?link=’ . urlencode($this->url) . ‘&appkey=http%3A%2F%2Fexample.com%2Fapplication&type=’.$this->type;
$this->snoopy->fetch($this->url);
return $this->snoopy->results;

}

/**
* Gets DIGG info on multiple story IDs
**/
function get_multiple_stories_info() {

$ids = $this->ids;
if(empty($this->ids)) {
return false;
}

$this->url = ‘http://services.digg.com/stories/’ . $ids . ‘/’ . ‘?appkey=http%3A%2F%2Fexample.com%2Fapplication&type=’.$this->type;
$this->snoopy->fetch($this->url);
return $this->snoopy->results;

}

/**
* Echos json for use with Ajax
**/
function echo_story_json() {

$this->type = “json”;
echo $this->get_story_info();

}

/**
* Returns PHP object
**/
function return_php_object() {

$this->type = “php”;
$this->data = unserialize($this->get_story_info());

}

}

I’ve tried to keep it as simple as possible, but there may be a few little bits you don’t understand. If you’re interested in getting and storing digg counts for your site, I suggest you download the full class here and run it yourself. The data will come back as an object, ready for use in PHP. Also included in the download is an example of how to retrieve the digg data on a group of URLs at the same time. For this you have to know the digg_story_id which I mentioned earlier. Once you know the digg_story_id you can get info on up to 100 urls with one query.

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:

<link href=”/correct_path/digg_query/digg_count_style.css” rel=”stylesheet” type=”text/css” />

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.

<script src=”/path_to_prototype/prototype.js” type=”text/javascript”></script>

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:

<script src=”/path/digg_query/diggQuery.js” type=”text/javascript”></script>

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:

new diggQuery({proxy:’/digg_proxy/proxy.php’,opacity:50,link_css:’ul.top_articles’});

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?

Which links get a digg count?

We don’t want to give every link on the page a digg count, so the script has a few options that decide which links should be digg-count-ified. Here are the options:

  • link_css: The script will only apply counts for links targeted by a CSS selector. So if you wanted all links in bulletted lists you could add the option link_css:’ul’. Or if you wanted all links in a div with the ID ‘digg’ you could supply the option link_css:’div#digg’.
  • link_scope: This can be set to internal if you only want the count applied to links from your own domain.
  • link_rel: If set, this will mean the digg count is applied only to links with a certain rel type. So for example you could add rel=”digg” to all links that you would like to have a digg count.

What about style options ?

Style hasn’t been forgotten, there are a few options here too:

  • opacity: The initial transparency of the count box (default:60)
  • pad_links: The count box can create a space for itself after the link, or it can appear ontop of the text arround it. (default:false)
  • box_type: This can be set to image_only if you would like just the thumbs up box. (default:image and text)

So to create the second example above the following JavaScript is used:

new diggQuery({opacity:50,link_css:’p.digg_para’,box_type:’image_only’,pad_links:true});

Starting the digg count

Finally, we have to decide when run the diggQuery JavaScript. For the examples on this page, I just added the code to the onlick attribute of the link. You probably won’t want the count to display after a click though, you’ll want it to display after the page loads. As we’re using Prototype, we can use this technique:

<script type=”text/javascript”>
document.observe(”dom:loaded”, function() {
new diggQuery({opacity:50,link_css:’p.digg_para’,box_type:’image_only’,pad_links:true})
});
</script>

Just add this code between your page HEAD tags and once the document is loaded, the digg counts will appear. Of course, you will have to change the options as explained in ‘Which links get a digg count?’ so that only your desired links get a count.

Downloads

You can download the PHP for the digg proxy here: here You can download the JavaScript for the dynamic AJAX digg counts here.

Problems?

Having problems getting this to work? I’ve made a post about the scripts here on the aciddrop.com blog. Please head over there if you have questions.

2010-05-25T22:08:30+00:00 April 22nd, 2008|Internet Marketing|0 Comments

About the Author:

Leon is a full-time freelance web designer and developer and author of the popular PHP Speedy asset compressor and Wordpress plugin. He has also setup a link aggregator over at http://purrl.net, which does things a bit differently.

Leave A Comment