SocialCount

The problems with social networking widgets are well documented. They're heavy and slow to load especially on high-latency mobile connections.

SocialCount is a small mobile-friendly jQuery plugin to show share counts from various social networks.

• Currently supports Facebook, Twitter, and Google Plus.
• 2.84KB (after Min+GZip) or 4.09KB/4.63KB with SD/HD icons (compared to 309KB up front empty-cache pageload cost for Facebook, Twitter, and Google Plus widgets)
• 1 JS request, 1 CSS request, 1 optional request for icons, 1 optional AJAX request for counts (compared to 25 total requests for Facebook, Twitter, and Google Plus widgets)
• Easier to fit in with page designs
• Ability to share works without dependency on JavaScript.
• Works with mouse, touchscreen, or keyboard.
  • Mouse: On hover, loads a social network's native widget so that the user can Like/Recommend/+1 without leaving the current page.
  • Touch screen: simple redirects to dedicated network share pages.
  • Keyboard: Concise tab order.
• Option to conditionally display count if it's above a minimum threshold. Avoid goose egg ghost-town.
• Intelligent client-side caching so that two or more widgets with the same share URL only make one AJAX request.

SocialCount Demo

Getting Started

Download the unminified ( JS + CSS ) or minified ( JS + CSS ) version and add the appropriate link and script tags into your HTML.

If you want the social icons included, download the unminified ( CSS ) or minified ( CSS ) and SD / HD icon sprites.

Markup with icons:

<!-- Replace YOUR_CUSTOM_URL with the URL you're sharing -->

<ul class="socialcount" data-url="YOUR_CUSTOM_URL">

  <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_CUSTOM_URL" title="Share on Facebook"><span class="icon icon-facebook"></span><span class="count">Like</span></a></li>

  <li class="twitter"><a href="https://twitter.com/intent/tweet?text=YOUR_CUSTOM_URL" title="Share on Twitter"><span class="icon icon-twitter"></span><span class="count">Tweet</span></a></li>

  <li class="googleplus"><a href="https://plusone.google.com/_/+1/confirm?url=YOUR_CUSTOM_URL" title="Share on Google Plus"><span class="icon icon-googleplus"></span><span class="count">+1</span></a></li>

</ul>

Tested with

• Chrome Desktop 23
• Firefox 16
• Opera 12
• Safari 6
• Internet Explorer 7 (Links Only)
• Internet Explorer 8
• Internet Explorer 9

Touchscreens (Links Only)

• BlackBerry 5
• BlackBerry 6.1
• BlackBerry 7
• iOS 6
• Chrome for iOS 21
• Android 2.3
• Windows Phone 7.5

Service Requirements

• PHP 5 supporting curl

Contributing

Add unit tests for any new or changed functionality. Lint and test your JavaScript code using grunt and the grunt qunit command.

To test the PHP code, navigate to the service directory and run phpunit socialcount_service_test.php

Release History

• v0.1.0 Initial release
• v0.1.1 Fix for IE (tested up to 9) issue with iframes and :hover rules

License

Copyright (c) 2012 Filament Group Licensed under the MIT license.