So I went in and found a few options. It looks like people made a few scripts that will collect the counters via AJAX (on user browser) and render the buttons with images. Some use data URI to avoid triggering more requests, brilliant! Since I wanted to make something super simple and fast to use, I decided to have one script that does all of those. The server will keep track of the counters and put them in the script so everything needed is one and only one request.
I needed 3 social networks and each of them has different ways to retrieve the counters so I figured the server has to make the requests asynchronously, cache the values for sometime and return the bundled js. My goal is to have it at maximum 50KB and delivered within 500ms. According to my measurement, current scripts from the social networks are way more than that:
- Facebook sdk.js is the worst contender at about 164KB
- Twitter's widgets.js is 107KB
- Google is the winner here, their platform.js is only 37KB
- https://socialcounters.daohoangson.com: GAE, only allows url from my sites
- https://looming-journey-9643.herokuapp.com/: Heroku, open for all url
The code is pushed to GitHub too, with a simple demo site which makes use of the Heroku instance: http://hoangson.vn/go-socialcounters/. The all.js script is only 14KB (8KB gzip) and normally finished loading in less than a second. I also added a jQuery Plugin script for advanced usage (it fetches a heavily cached jsonp file). The project uses data URI as the other scripts that I found but those images do not look good in high resolution screens so I try to detect SVG support and use SVG whenever possible.
I hope this project is useful for someone.