SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
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.
Design considerations aside, the widgets’ biggest affliction is their file size. Even though current implementations of sharing widgets from the ‘Big 3’ social networks unanimously recommend the use of non-blocking JavaScript (despite widespread use of older blocking versions), they still include a ~200KB mass of JavaScript and CSS (transfer size is after minification and GZip). Initializing all of these widgets simultaneously on page load causes multiple DOM modifications often resulting in pages that feel unresponsive and resistant to scrolling (read: janky).
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.
- Progressively enhanced from simple sharing links: share without JavaScript or before JavaScript has loaded (touchscreen experience).
- Lazily load individual native widgets when the user expresses intent to share, allowing embedded Like/+1 without leaving the current page (non-touchscreen experience).
- Small and concise, only 3KB for the JavaScript and CSS (after minification and gzip).
See it in action
Permalink to 'See it in action'SocialCount’s live demo will show you a variety of sizes and orientations.
How to use it
Permalink to 'How to use it'Add socialcount.js and socialcount.css to your page, ideally
the CSS in the <head> and JS at the end of the <body>.
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>
That’s it!
View the code on GitHub
Permalink to 'View the code on GitHub'Special thanks to Eric Matthys for his base inline loading widget and to John Dyer for his post on retrieving counts from various Social Networks.