Graphing Blog Comments Over Time
-
One of my other blocks, CSS-Tricks, has been around a number of years now. There are nearly 1,400 unique pages of content almost all of which have a comment thread. I had a feeling that in the last four years, despite fairly steady growth in traffic and subscribers, that the number of comments per post has dropped. But how to prove it? I don’t know of a way to easily see that data.
So I built a way to visualize the number of comments per post! I’m sure all you WordPress smarties have some better fancier way to do this, but this is how I did it.
In a nutshell: write a custom query to loop through all your posts and get the number of comments. So combining those two things, I thought I’d just make a 1px wide element with a height relative to how many comments that post has.
Step 1: Figure out the maximum number of comments
This will help us set the scale. The post with the maximum number of with have a line with 100% height, and it scales down from there. It’s easy to figure out the maximum number of comments after you looped through all the posts, but we actually need that information before we even start the loop so we can set the height during the loop.
Fortunately WordPress keeps the “comment_count” for each post in the the database. So we can write a query that will return the post with the most comments and then extract that number into a variable.
$query = "SELECT comment_count FROM " . $wpdb->posts . " WHERE post_type = 'post' && post_status = 'publish' ORDER BY comment_count DESC LIMIT 1"; $results = $wpdb->get_results($query); $maxComments = $results[0]->comment_count;Step 2: Loop through every single post
All posts, from the first published to the latest published.
query_posts('posts_per_page=-1&order=ASC'); while (have_posts() ) : the_post(); // output one line of graph endwhile;Step 3: Output a line for the graph
Each line of the graph is going to be an anchor link, just so you can click it to go to that post should you wish. We’ll make those linksinline-block, so we can set aheightandwidth. This is the basics of the CSS:
Now within the loop, we’ll output those links (lines of the graph):#chart { padding: 100px 0; height: 400px; text-align: center; } #chart > a { width: 1px; background: red; vertical-align: bottom; text-decoration: none; } #chart > a:hover { background: black; }
$numComments = get_comments_number(); $heightPercentage = (($numComments / $maxComments) * 100); echo ""; echo "$numComments"; echo "";Step 4: A little more…
There are a couple more parts to this, like listing out the first and last year at the start and end of the chart (for context) and positioning the span with the number of comments at the top of the graph so you can view numbers on rollover.
I’m going to embed the code as a GitHub Gist here, so it’s easy to keep updated once all you smarties tell me all the stuff I’m doing wrong. This is built as a page template:
The Graphs!
Here’s the Google Analytics chart of CSS-Tricks since launch:

And here’s the comment graph we just built:

Kinda interesting. The charts definitely don’t follow each other like I would think they might. This isn’t enough data to infer why that is. You could say social media sites like Twitter have swallowed up some of comment activity. You could also say maybe the quality of the posts have gone down and inspire less comments. Who knows.
Here is Digging Into WordPress’s graph:

Share! Share!
I’d love it, especially if you have a blog that’s been around a year or more, if you snagged this page template and linked up your own graph (or screenshot it) and posted it in the comments.
Maybe with a bunch of blogs graphs we could identify some trends.
View Making Money Adsense's Profile
Subscribe via RSS
There are no related articles.
Digg itStumble del.icio.usredditYahooGoogle
Tags
News & Update
Register Your email to receive news Posts !
Blog Archive
-
▼
2011
(24)
-
►
April
(15)
- Earn More with Adsense: Tips & Layout Optimization...
- Google Chrome 11.0.696.57 Stable Released - Direct...
- Thesis Tutorial – Custom Post Dates
- 5 Google Adsense Secrets, Tips and Tricks
- Google Adsense Tips, Tricks, and Secrets
- How to Get More Subscribers for Your Email List
- Is Commenting on Blogs a Smart Traffic Strategy?
- 101 Ways to Build Link Popularity
- 5 Tips To Increase Your Adsense Revenue
- Basic Adsense Tips
- Greatest Blog Design Inspiration of 2010
- 101 Web Marketing Ideas and Tips
- How to Attract Links and Increase Web Traffic – Th...
- How to Increase Website Traffic
- How To Make Money With Google Adsense
-
►
April
(15)
-
►
2010
(9)
-
►
May
(9)
- 9 Tricks I Used To Triple My AdSense Earnings In 3...
- New Adsense Tips
- Top 15 AdSense tips
- 100% Google AdSense: Tools, Tips and Resources
- Earn More with Adsense: Tips & Layout Optimization...
- Google Adsense Tips, Tricks, and Secrets
- Google AdSense Tips
- How to Increase Website Traffic
- Top Paying Google Adsense Keywords List
-
►
May
(9)


