Social Counters with SVG logos!
This golang app provides consistent and faster social counters for popular social networks. Traditionally, website owners have to include scripts from social networks to display their buttons and share counters (see Facebook, Twitter and Google documents). Unfortunately, those buttons do not align well together (different style, inflexible width, etc.) and more importantly, they often make a lot of extra requests in order to render correctly, generally make it a bad user experience.
This app implement counters fetcher for Facebook, Twitter and Google+ and return everything in one single request of about 8KB (gzip) or 15KB (original). With the only script inclusion, it can display all the signature logos of those networks and their counters for the specified url.
all.js (requires jQuery)
After deploying the app to your server, simply include the script in your website to start rendering the counters.
all.js script detect svg support in user browser by itself and switch to use svg logo whenever possible;
for older browsers, data uri will be used.
shorten(optional): determine whether the counters should be shortened to use "m" (million) or "k" (thousand) suffices. This feature is off by default.
ttl(optional): specify the cache max-age value. Useful if you put your server behind a some caching service or CDN. This should help you to control the actual load on the app server.
target(optional): by default,
.socialcounters-containerin the DOM and insert its buttons into that element. You can use
targetparam to change the selector which is used to find the container element. When no container is found,
all.jswill append into
jQuery Plugin is the advanced option if you want to customize the buttons look and feel to match your website design.
You will need to include the plugin script and layout the elements on the page yourself (see demo for pointers).
socialcounters() on the jQuery object to get counters data from the server and populate them.
<script src="//socialcounters.domain.com/js/jquery.plugin.js"></script> <link rel="stylesheet" href="//socialcounters.domain.com/css/main.css"> ... <div id="target" class="socialcounters"> <span class="sc-total-count" rel="total-count">0</span> <a class="sc-service sc-facebook" rel="facebook-link"> <span class="sc-logo">Facebook</span><span class="sc-count" rel="facebook-count">0</span> </a> <a class="sc-service sc-twitter" rel="twitter-link"> <span class="sc-logo">Twitter</span><span class="sc-count" rel="twitter-count">0</span> </a> <a class="sc-service sc-google" rel="google-link"> <span class="sc-logo">Google</span><span class="sc-count" rel="google-count">0</span> </a> </div> ... <script> $('#target').socialcounters(); </script>
url: specify an url to fetch data. By default, it will use the current url.
callback: specify a function to run after data comes back from app server.
shorten: determine whether the counters should be shortened to use "m" (million) or "k" (thousand) suffices. This feature is off by default.
It is required to mark your elements with
rel="something" for the plugin to fill data correctly. The default mappings include:
- Total (sum of all counts):
The app has been pre-configured for simple pushing to Google App Engine and Heroku.
Google App Engine
And you are done!
- Depending on your need, you may want to enable dedicated memcache for improved performance.
app.yamland change the
BLACKLISTenvironment variables to secure and prevent other people from abusing your app.
Create your account, setup the Heroku CLI and do a push from your forked repo:
git push heroku master
The app should be deployed without issue.
- To make use of memory caching, enable the Heroku MemCachier add-on for your application.
heroku addons:create memcachier
BLACKLISTin Heroku Config Vars page to secure and prevent other people from abusing your app.