StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Stylize your digg count

This is a guest post from Leon Chevalier from http://aciddrop.com. Leon is the author the popular PHP Speedy asset compressor and WordPress plugin. He has also setup a link agregator over at http://purrl.net, which does things a bit differently. I was interested to know how he did the digg count for each link, and he agreed to do a guest post on the subject.

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:

  1. <script src="http://digg.com/tools/diggthis.js" type="text/javascript"><!--mce:0--></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 here 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. If this doesn't sound like something you'd be comfortable with, then you can skip to the next section.

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.

  1. equire("class-snoopy.php");
  2. $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:

  1. $proxy = new digg_proxy(array('snoopy'=>$snoopy,
  2. 'func'=>'return_php_object',
  3. 'url'=>'http://stylizedweb.com',
  4. 'type'=>'php'
  5. )
  6. );

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:

  1. equire("class-snoopy.php");
  2. $snoopy = new Snoopy();
  3.  
  4. $proxy = new digg_proxy(array('snoopy'=>$snoopy,
  5. 'func'=>'return_php_object',
  6. 'url'=>'http://stylizedweb.com',
  7. 'type'=>'php'
  8. )
  9. );
  10.  
  11. /**
  12. * Connects to DIGG API and returns data
  13. **/
  14. class digg_proxy {
  15.  
  16. /**
  17. * Constructor, sets up default vars
  18. **/
  19. function digg_proxy($array=null) {
  20.  
  21. if(is_array($array)) {
  22. foreach($array AS $key=>$value) {
  23. $this->$key = $value;
  24. }
  25. }
  26.  
  27. //Default vars. $_GET overrides defaults
  28. $input = array('url'=>'','ids'=>'','type'=>'php','func'=>false);
  29. foreach($input AS $name=>$default) {
  30. if(empty($this->$name)) {
  31. if(!empty($_GET[$name])) {
  32. $this->$name = $_GET[$name];
  33. } else {
  34. $this->$name = $default;
  35. }
  36. }
  37. }
  38.  
  39. $func = $this->func;
  40. if(method_exists($this,$func)) {
  41. $this->$func();
  42. }
  43.  
  44. }
  45.  
  46. /**
  47. * Gets DIGG info on a story URL
  48. **/
  49. function get_story_info() {
  50.  
  51. if(empty($this->url)) {
  52. return false;
  53. }
  54.  
  55. $this->url = 'http://services.digg.com/stories/?link=' . urlencode($this->url) . '&appkey=http%3A%2F%2Fexample.com%2Fapplication&type='.$this->type;
  56. $this->snoopy->fetch($this->url);
  57. return $this->snoopy->results;
  58.  
  59. }
  60.  
  61. /**
  62. * Gets DIGG info on multiple story IDs
  63. **/
  64. function get_multiple_stories_info() {
  65.  
  66. $ids = $this->ids;
  67. if(empty($this->ids)) {
  68. return false;
  69. }
  70.  
  71. $this->url = 'http://services.digg.com/stories/' . $ids . '/' . '?appkey=http%3A%2F%2Fexample.com%2Fapplication&type='.$this->type;
  72. $this->snoopy->fetch($this->url);
  73. return $this->snoopy->results;
  74.  
  75. }
  76.  
  77. /**
  78. * Echos json for use with Ajax
  79. **/
  80. function echo_story_json() {
  81.  
  82. $this->type = "json";
  83. echo $this->get_story_info();
  84.  
  85. }
  86.  
  87. /**
  88. * Returns PHP object
  89. **/
  90. function return_php_object() {
  91.  
  92. $this->type = "php";
  93. $this->data = unserialize($this->get_story_info());
  94.  
  95. }
  96.  
  97. }

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:

  1.  

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.

  1. <script src="http://stylizedweb.com/path_to_prototype/prototype.js" type="text/javascript"><!--mce:1--></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:

  1. <script src="http://stylizedweb.com/path/digg_query/diggQuery.js" type="text/javascript"><!--mce:2--></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:

  1. ew 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:

  1. ew 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:

  1. <script type="text/javascript"><!--mce:3--></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.

Be sure you change "example.com" to your url in proxy.php (on line 93)

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.

Leave a comment on Stylized Web Have some feedback? Leave a comment

67 Comments So Far

  1. I’m extremely pleased to uncover this web site. I need to to thank you for your time for this fantastic read!! I definitely really liked every little bit of it and I have you book marked to see new stuff on your web site.

  2. I like the helpful information you supply for your articles.
    I’ll bookmark your blog and check again right here frequently. I’m moderately sure
    I’ll be informed many new stuff right right here! Good luck for the following!

  3. It’s enormous that you are getting thoughts from this piece of writing as well as from our argument made at this place.

    Feel free to surf to my webpage :: wedding photographer Sydney

  4. Howdy just wanted to give you a quick heads up. The text in your post seem to be running off the screen in
    Safari. I’m not sure if this is a format issue or something to do with browser compatibility but I figured I’d
    post to let you know. The design and style look great though!
    Hope you get the problem solved soon. Thanks

  5. The new items will begin with a long-term warranty and this will likely be an opportunity to install cheaper and simpler to utilize items.

  6. Before investing in a certain stock, be sure to check their
    rating. Many big-name companies actually have questionable ratings.
    Some have been found guilty in the public’s eye in the past of falsifying their earnings, while others are just unstable financially. Look into the credibility of a company before you choose to invest in them to keep yourself safe.
    __________________________________________________________________________

    I follow stock quotes

  7. bedava ligtv, canli mac izle, canli yayin mac, d-smart izle, justin tv, justin tv izle, lig tv 2, ligtv, ligtv canli, ligtv izle, mac izle, p2p, trt spor izle, freedocast, eurosport izle
    http://canlimacizlemek.blogspot.com/

  8. Just desire to say your article is as astonishing. The clearness
    in your publish is just excellent and i can suppose
    you’re a professional on this subject. Fine together
    with your permission allow me to grasp your RSS
    feed to stay updated with approaching post. Thank you 1,000,000 and please
    continue the enjoyable work.

    My webpage – bike repair brooklyn

  9. canlı maç izle, justin tv, lig tv izle, lig tv canlı izle, canlı lig tv izle, justin tv canlı maç izle, bedava lig tv izle, şifresiz maç izle, internetten maç izle
    http://justintvligtvcanli.blogspot.com.tr/

  10. I blog often and I truly appreciate your information. Your article has truly peaked my interest.
    I am going to book mark your blog and keep checking for new details about
    once a week. I subscribed to your Feed as well.

  11. I drop a comment when I especially enjoy a article on
    a website or I have something to add to the conversation.
    It is caused byy the passion displayed in the post I browsed.

    And after this article StylizedWeb.com

  12. Please let me know if you’re looking for a article author for your blog.
    You have some really great posts and I think I would be a good asset.

    If you ever want to take some of the load off, I’d really
    like to write some material for your blog in exchange
    for a link back to mine. Please shoot me an email if interested.

    Regards!

    Look at my blog post {film Drama Korea

  13. I love it when people come together and share views. Great website, keep it up!

    Hello, i think that i saw you visited my blog thus i came to “return
    the favor”.I’m attempting to find things to enhance my web
    site!I suppose its ok to use a few of your ideas!\

  14. Could I inquire if you’ll be all right with payed
    off blog posts? All I would require is for you to develop content material for me
    and just a web link or reference to my site. I can also pay you.

  15. For the site owner, may I ask just how do you tackle useless posts?
    We are able to compensate simply for advice on how to overcome it!

  16. Hello there, I discovered your web site by the use of
    Google while looking for a similar subject, your website got here up, it seems great.
    I have bookmarked it in my google bookmarks.
    Hi there, just turned into aware of your blog thru Google,
    and found that it’s really informative. I am going to watch out for brussels.
    I will appreciate if you happen to continue this in future.
    A lot of other people will probably be benefited
    from your writing. Cheers!

  17. Puis-je vous piquer 2 ou 3 phrases pour un site
    web ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>