Hack to remove numbers from Jetpack sharing (sharedaddy) buttons

Posted on July 22, 2014

In June 2014, the whole 9seeds crew assembled at WordCamp Orange County 2014. While this has nothing to do with sharing buttons, I wanted to point it out since our remote work environments prevent us from getting together more than once a year. Thanks Orange County, the weather couldn’t have been nicer!

At the conference, one compelling talk was about Social Media Strategies by Sarah Wefald. She has great real-world social media experience, working with bands – arguably the best use of social media. She’s also a punk-rock karaoke star.

While I understood the reasons why we should all use social media to direct traffic back to our WordPress website – the one thing we truly own out there on the internet – there was other news. The thing that surprised me was about human tendencies for sharing, especially when numbers are involved.

Let’s say you installed Jetpack on your WordPress site and enabled sharing, and now you have a few nifty buttons beneath your posts to make it easy to share your content on Facebook, Twitter, Google+ etc. Once something gets shared, a counter ticks up on the button showing how many times it has been shared on a particular social outlet.

What if there are only a few shares? Turns out people may be reluctant to share it because it’s not popular. What if something has 200k shares? Turns out they may also be reluctant to share it because it’s already been shared by everybody.

Sarah actually recommends using a plugin called Sharaholic which let’s you turn those numbers on/off. But if you want to continue using Jetpack, here’s how to hide those pesky numbers.

First Try (fail)

After some code sleuthing it looked like it was just a simple matter of adding this filter to functions.php:

//turn off numbers in sharedaddy (jetpack sharing) social buttons
add_filter( 'sharing_js', '__return_false' );

This introduced problems. While it hid the counts, it also prevented the Email and Print buttons from functioning which were relying on the same javascript that injected the numbers 🙁

Second try (better, but a hack)

The solution it seems, is to simply hide the numbers via CSS. This is not optimal as the javascript is still doing calculations to get those numbers, and we’re adding an extra stylesheet to load. Don’t tell me I didn’t warn you. Here’s how to do it.

Add a small stylesheet to your theme to override the sharing CSS. I named mine sharing-override.css:

/* Hide sharedaddy social button count */
.share-count {
	display: none;
}

In your theme’s functions.php, add an action that will load after the sharedaddy stylesheet is loaded. There’s a “if” check included so our stylesheet will only get loaded if Jetpack sharing is enabled. We’ll add the ‘sharedaddy’ style as a dependency so our overriding stylesheet is sure to be loaded after theirs:

//hide numbers in sharedaddy (jetpack sharing) social buttons
function sharing_count_hide() {
	if ( defined( 'WP_SHARING_PLUGIN_VERSION' ) )
		wp_enqueue_style( 'sharedaddy-override', get_stylesheet_directory_uri() . '/sharing-override.css', array( 'sharedaddy' ), WP_SHARING_PLUGIN_VERSION );
}
add_action( 'wp_head', 'sharing_count_hide', 2 ); //load after jetpack sharing

Have a better/more efficient way of getting this done? Let us know in the comments!