VoteCounts: bookmarklet to display up/down votes even for rep less than 1000

Question

Screenshot / Code Snippet

About

This small bookmarklet will allow anyone to use the "vulnerability" of the API that it allows you to check the up/down vote count - a feat you could normally achieve by being a 1k+rep user. Mainly useful for sites where you don't have this amount of reputation points, but want to check the stats of the more controversial questions (usually on Meta Stack Overflow).

No API key is actually used here, but it's trivial to add one.

License

I don't think a code like this deserves anything other than WTFPL.

Download

It's the following line (JavaScript - 456 bytes).

javascript:(function(){a='jsonp';c=' .vote-count-post';d='up_vote_count';e='down_vote_count';$.ajax({url:document.location.href.replace(/(http:\/\/)(.*)(\/questions\/.*)\/.*/,'$1api.stackexchange.com/2.1$3?filter=!*1Kh6Cl014HkvD72tuSfJO9y3iR3BWcrbu)tZ20Hd&site=$2&pagesize=100'),dataType:a,jsonp:a,success:function(x){b=x.items[0];$('#question'+c).html(b[d]+"-"+b[e]);$.each(b.answers,function(z,y){$('#answer-'+y.answer_id+c).html(y[d]+"-"+y[e])})}})})()

EDIT: This is longer, but it will make the result look exactly like on Stack Overflow. 589 characters, so it might not work with Internet Explorer (that has a limit of 508 chars).

javascript:(function(){w=function(t,q){l='_vote_count';h='up'+l;j='down'+l;k='</div>';s='<div style="color:';$(t).html(s+'green">'+(q[h]?'+':'')+q[h]+k+'<div class="vote-count-separator">'+k+s+'maroon">'+(q[j]==0?'':'-')+q[j]+k)};a='jsonp';c=' .vote-count-post';$.ajax({url:document.location.href.replace(/(http:\/\/)(.*)(\/questions\/.*)\/.*/,'$1api.stackexchange.com/2.1$3?filter=!*1Kh6Cl014HkvD72tuSfJO9y3iR3BWcrbu)tZ20Hd&site=$2&pagesize=100'),dataType:a,jsonp:a,success:function(x){b=x.items[0];w('#question'+c,b);$.each(b.answers,function(z,y){w('#answer-'+y.answer_id+c,y)})}})})()

Here is another one you can use on the front or similar pages to quickly identify controversial topics:

javascript:(function(){w=function(t,q){l='_vote_count';h='up'+l;j='down'+l;k='</div>';s='<div style="color:';$(t).html('<div class=".mini-counts">'+s+'green">'+(q[h]?'+':'')+q[h]+k+s+'maroon">'+(q[j]==0?'':'-')+q[j]+k+k)};a='jsonp';c=' .votes';v=$(".question-summary").map(function(){return this.id.replace(/question-summary-/,'');}).get().join(";");$.ajax({url:document.location.href.replace(/(http:\/\/)([^/]*).*/,'$1api.stackexchange.com/2.1/questions/'+v+'?filter=!*1Kh6Cl014HkvD72tuSfJO9y3iR3BWcrbu)tZ20Hd&site=$2&pagesize=100'),dataType:a,jsonp:a,success:function(x){$.each(x.items,function(z,b){w('#question-summary-'+b.question_id+c,b);})}})})()

Platform

For any jQuery/bookmarklets compatible browser. Tested with Chrome, Firefox 3.6 and Internet Explorer 8 for Super User, Stack Overflow, and Meta Stack Overflow.

Contact

sztupy.hu

Code

It was written in Notepad already in minified form, and I used Firebug to debug. (API 2.1 version was tested in Chrome's console) Code is above. Contribute (=decrease code size or make the output nicer) any way you want.

Known bugs

• If a question has more than 100 answers then some of the answers won't be resolved. For questions with more than 100 answers resolving this is more difficult (= longer script)

EDIT: updated to API version 2.1.

Answer 1

Very cool stuff! I'm going to be using it personally. Thanks for the hack!

If there will be another version, here's what I hope will be in there (minor things, not really necessary):

• Layout of + and - votes looks more like the layout of what's shown to 1000+ rep members (slight css change)
• Making this into a Firefox plugin or a Chrome extension so it does it automatically (not sure about Firefox plugins, but with Chrome extensions, it's a piece of cake.)
• As this uses jQuery anyway, once the function is executed, the up/down vote counts are loaded into the background and click handlers are added to the total vote counts, so that it really resembles the experience that 1000+ rep users have.

As it's under WTFPL, I'll try to implement those features myself and post my results.

Thanks again!

UPDATE: I started making a Greasemonkey version of this; here's what I have so far (I don't have too much experience with GM, so I'm not sure whether this code will work):

// ==UserScript==
// @name           SOUpDownVoteDisplay
// @namespace      stackoverflow
// @description    Uses API functions to display up and down vote tallies for questions and answers even when users have less than 1000 reputation.
// @include        http://*.stackoverflow.com/questions/*
// @include        http://*.serverfault.com/questions/*
// @include        http://*.superuser.com/questions/*
// @include        http://*.meta.stackoverflow.com/questions/*
// @include        http://*.stackapps.com/questions/*
// ==/UserScript==

addEventListener("load",function()
{
(function(){w=function(t,q){l='_vote_count';h='up'+l;j='down'+l;k='</div>';s='<div style="color:';$(t).html(s+'green">'+(q[h]?'+':'')+q[h]+k+'<div class="vote-count-separator">'+k+s+'maroon">'+(q[j]==0?'':'-')+q[j]+k)};a='jsonp';c=' .vote-count-post';$.ajax({url:document.location.href.replace(/(http:\/\/)(.*)(\/questions\/.*)\/.*/,'$1api.$2/0.8$3'),dataType:a,jsonp:a,success:function(x){b=x.questions[0];w('#question'+c,b);$.each(b.answers,function(z,y){w('#answer-'+y.answer_id+c,y)})}})})()
},false);

if(navigator.userAgent.indexOf("Chrome")!=-1)
{
    var e=document.createEvent("Event");
    e.initEvent("load",false,false);
    dispatchEvent(e);
} 

Answer 2

Updated the above codes to support API version 2.1. It does use some of the features of the new API (like the filters function, to decrease load on the servers). You can get the older, shorter API 1.0 version by checking the old revision.

The upgrade made the codes longer, but the first one is still within IE's 508 char security limit. Also added a new script that will let you quickly check the up/down vote counts on the frontpage and similar (Hot, Featured, etc.) pages, to quickly check which posts are "controversial".