SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets
Posted by Zach on 11/26/2012
You’re minding your own business, casually browsing around on the World Wide Web. You navigate to a page that begins to load and render, but suddenly it stalls. For a few seconds you stare at a partial white screen, appalled at the hiatus your device has placed on your browsing flow. Finally, the page yields and loads the remainder of the content. What just happened? It’s likely that you’ve fallen prey to a poorly implemented Facebook, Twitter, or Google Plus share button.
Social Networking widgets are a digital blot on the beautiful canvas we call the web. They often do not (with intent) blend with a site’s design or with each other.
A discerning developer might begin to wonder if it is possible to use these sharing tools without adversely affecting page performance and accessibility.
To solve these problems, we built SocialCount. It’s a jQuery plugin to add sharing widgets in a responsible way. The project has the following goals:
- Easily customize to your site’s design.
- Works with mouse, touchscreen, or keyboard.
- Lazily load individual native widgets when the user expresses intent to share, allowing embedded Like/+1 without leaving the current page (non-touchscreen experience).
See it in action
SocialCount’s live demo will show you a variety of sizes and orientations.
How to use it
Use the included Markup Generator to create your baseline HTML.
<ul class="socialcount" data-url="http://www.filamentgroup.com/" data-counts="true"> <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=http://www.filamentgroup.com/" title="Share on Facebook"><span class="count">Like</span></a></li> <li class="twitter"><a href="https://twitter.com/intent/tweet?text=http://www.filamentgroup.com/" title="Share on Twitter"><span class="count">Tweet</span></a></li> <li class="googleplus"><a href="https://plus.google.com/share?url=http://www.filamentgroup.com/" title="Share on Google Plus"><span class="count">+1</span></a></li> </ul>