SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets

Posted by Zach on 11/27/2012

Topics:

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

SocialCount comes in a variety of sizes and orientations.

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

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.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

I think you should make it clear on this post that this ‘jquery plugin’ requires a php script for the ‘count’ part of the plugin to work.

I was wondering what voodoo magic you used to get the count for each of the social networks, and digging through the source i noticed you were using a server side script to do it.

Comment by Clark Pan on 11/28  at  05:31 AM

I’m reading this from the iphone, and all I see are those three gray buttons. No count available, and clicking them does noyhing, except a larger white space below them.

Comment by Andrea Doimo on 11/28  at  10:13 AM

Hello, the plugin doesn’t work in IE 10 on Windows RT, same behavior as reported by Andrea Doimo on iPhone.

Comment by Stefan Prodan on 11/28  at  11:05 AM

The facebook like button is truncated in its french version: “j’aime” is longer than “like” :)

Comment by Olivier on 11/28  at  01:21 PM

Why not http://socialitejs.com/?
No php side needed.

Comment by Alan on 11/28  at  03:30 PM

Remember that the counts functionality is optional and independent of the native widgets. So, you can still show the counts without loading the hefty native widgets. Socialite is a great plugin, but it doesn’t require PHP because it doesn’t show share counts without the native widgets. Again, the SocialCount PHP is optional.

If you’d rather use an existing service to retrieve the counts so that you don’t have to host the PHP, XYU has a fork of SocialCount that makes use of a service called SharedCount.
https://github.com/xyu/SocialCount/blob/master/dist/socialcount.js

Personally, I’d rather be in control of the dependencies, which is why the project includes a PHP file.

The demo shown above is embedded in an iframe, and it appears to have an issue in iOS because of the iframe (not because of SocialCount). Click through to the example page to view non-iframe embedded examples that function as expected: http://fgte.st/SocialCount/examples/index.html

Comment by Zach (Filament) on 11/28  at  06:53 PM

Hi there, author of Socialite.js here :)

The reason I made Socialite was to allow easy management of multiple asynchronous/delayed/lazy loading of widgets. And for good reason (as you’ve highlighted above). Socialite’s biggest feature is that it mimics the native implementation of each widget. This is to ensure integrity with the documented and public implementation advised by each social network. The theory being they should never break (in practice it isn’t that easy!) This doesn’t allow custom designs which obviously would be nice.

My concern with the SocialCount approach has always been the reliability of accessing count data. From what I understand (haven’t looked into it in a while), many networks don’t make or allow public API endpoints. Doing so is probably against Terms of Service. Either way this is a big point of failure and could be disabled or changed at any time. The advised implementation for native buttons is less likely to change since it would break millions of existing widgets.

I’m not against this by any means, I’d much prefer to control the whole experience, but for client websites I can’t take that risk!

Or maybe I can. Life’s too short for peppering a website with these hideous unworkable 200mb iframes!

Comment by David Bushell on 11/29  at  04:17 PM

Hey David,—great work on Socialite!

The Google Plus count is the only network in SocialCount right now that doesn’t use a Public API endpoint. I’ve dropped a line to one of their programmers and hopefully I’ll hear back and in a perfect world they’ll get it on their roadmap. If this call fails, it should still return counts for the other services and all normal share options will operate just fine.

If I had to choose between widgets weighing 200MB and 200KB I’d take the KB any day :)

Comment by Zach (Filament) on 11/29  at  09:33 PM

Legit social networks like facebook and myspace or even stuff like formspring?

Comment by kerry on 12/04  at  11:24 AM

Olivier: Filed at https://github.com/filamentgroup/SocialCount/issues/12

kerry: Just Facebook, Twitter, and Google Plus right now.

Comment by Zach (Filament) on 12/04  at  11:53 PM

I think the plugin isn’t working as expected, at least on Chrome 23 for Mac. On hovering over the buttons, the content slides down, but there’s only whitespace below.

Comment by Luca on 12/06  at  12:57 PM

I would like a Facebook Share option, but useful anyway…

Comment by Deniz Acay on 12/06  at  09:39 PM

Thanks for that.. :D

Comment by Hafis on 12/07  at  01:40 PM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site