Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

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

Plain count

Now when we have learned how to customize your count for RSS and Digg it's time to learn how to do it for like I'm using on my themes page for example. As is in top 3 you just have to have it for bookmarking services because it usually gives most of the traffic right after StumbleUpon.

Plain count

To make your count into plain text (for now and then you can do with it what ever you want) we'll use small JavaScript and JSON feeds (read more about it here). You can see all kind of other services in your setting account (for example network badges etc). So, let's start with the code.

Since you are probably going to use this with WordPress i'll be using it for example too. So to bookmark something to you are using code similar to this:

  2. <a href="<?php echo get_permalink() ?>&title=<?php the_title(); ?> "> save to </a>

Now where you want to have the count add this line (i have added it in span next to link) and just past this JavaScript under it and you're done ;)

  2. <span id='<?php echo md5("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);?> '>0</span>
  2. <script type='text/javascript'>
  3. function displayURL(data) {
  4. var urlinfo = data[0];
  5. if (!urlinfo.total_posts) return;
  6. document.getElementById("<?php echo md5("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);?>").innerHTML = urlinfo.total_posts;
  7. }
  8. </script>
  10. <script src='<?php the_permalink() ?>&callback=displayURL'></script>

Questions, problems? Post them here in comments

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

17 Comments So Far

  1. oh, really cool, thank you!

  2. By Marko posted on May 10, 2008 at 4:58 pm

    nice and easy :)

  3. Great little tip, I loved it. The only problem I had was the quotes ‘ and double quotes ” got a bit mixed up as I copied and pasted. I just had to go through an change that bit of code.

  4. Nice quick and easy tutorial. but how to implement the correct number count on an index.php template with different posts on one page? in such a case the REQUEST_URI function will use the blog url and not the post url. is there a way to replace it with something like to get it to work on pages with more than one article?

  5. just to add: firebug and Safari’s Web Inspector display an error with this line:
    if (!urlinfo.total_posts) return;

  6. By Dejan posted on May 10, 2008 at 9:23 pm

    @ James
    Yes, sorry about that WordPress does it ;)

    @ kremalicious
    Well, it can work on index page but it doesn’t display count correctly, as you mentioned (starts from number two or something like that as i remember) and i don’t think i have a solution for it…

  7. Very nice…
    I’ll probably end up using that for my next design…

  8. People need to be more aware that they *need* a syntax highlighting plugin, that will fix the curly quotes & stuff that WP puts everywhere.

    I’ve been using iG Syntax Hilite for about 3 years now and it’s great.

  9. No doubt, this is really great. Thanks for sharing

  10. It would be nice to get a “fool-proof” version of this counter, because I spent almost two hours on this without getting it to work…

    I’m trying to show counts on my index page though, I don’t mind if it shows two or more numbers instead of the absolutely correct one.

    It just won’t work…

  11. By Dejan Cancarevic posted on July 27, 2008 at 8:31 pm

    I use it on top of my page…

  12. Pingback: 5 Trends of Popular WordPress Blogs- Part1

  13. Mirc , Mirc İndir , Sohbet

  14. Pingback: 5 Trends of Popular WordPress Blogs | Evanny

  15. Very nice…
    I’ll probably end up using that for my next design…

  16. perfect
    thanks admin

  17. It just won’t work…

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>