Custom Social Media Buttons for Wordpress with Share Count

Update (23.01.16): Social Networks made it harder and harder to get to the share count so I’ll stop trying. I’ll leave this post up and running but be warned: This code won’t work anymore.

Update (24.11.15): After twitter announced that the share count JSON API won’t work anymore after the 20.11.15 the twitter button broke. To fix this I implemented the solution from http://opensharecount.com/. To get it to work you have to sign up for an account and authorize with a twitter account. (I’ve created a new twitter account for that because they’re asking for a few too many rights, namely to tweet on your behalf.)

If you want to try this solution it’s actually quite easy. Head over to http://opensharecount.com/ and follow the instructions to get the account up and running. After that you only have to exchange http://cdn.api.twitter.com/1/urls/count.json?url= with http://opensharecount.com/count.json?url= in the jquery.sharrre.js / jquery.sharrre.min.js file. That should do the trick.

They are also saying that the tweet counts might take a while to come back, so give it a few hours. Another hint: Opensharecount can only look for tweets a week into the past. So unfortunately older tweet-counts are gone. But at least all future tweets will show up as Opensharecount will save them going forward.

Update (15.11.14): I’ve updated the script to make the buttons work even if you display them above and below your content, this works even when used in the loop with multiple blog-posts.

So, the other day I wrote a big tutorial on how to create custom social media buttons with share count. The goal is to get rid of external javascript dependencies and make the page speed faster. Turns out, that my method wasn’t the fastest; the counts could not be loaded asynchronously and sometimes blocked the fronted from loading. Doing some research I stumbled across sharrre.com, the jQuery Script enables just what I was looking for – asynchronous loading and a custom style without the javascript code from the social networks.

This is the button-bar, that you’ll get for your wordpress-based blog:

You can, of course, completely change the style by digging into the CSS.

How to implement sharrre Buttons with WordPress

In this short tutorial I’ll show you how I implemented the sharrre plugin with wordpress. Hopefully it works for you as well. There are a few problems I came along but more on that later …

1. The Dependencies: The Sharrre Plugin, jQuery, Styling and the Icon-Font.

I prepackaged everything you need in one little .zip file. You can download it right here: Download WordPress-Share-Buttons. Unzip the content and upload the folder to your theme directory.

Buy me a beer: If you’ll use this download, I’d appreciate a small token of appreciation to keep this blog up and running (and keep it clean of ads).

In the zip you’ll find:

The two essential files from the sharrre.com code. (jquery.sharrre.min.js, sharrre.php)
The css-styling of the buttons (share.css)
The html-markup and settings for your custom sharrre buttons (share.php)

2. Adjust the markup and settings.

The share.php file needs one essential line of code adjusted (twice). Find the following line and adjust it to the location of your uploaded files, once in the googlePlus part of the script and another time in the stumbleupon part.

urlCurl: '/wp-content/themes/your-themes-name/share/sharrre.php', /* Edit this line to the correct location on your server */

The same file also contains the markup for the custom wordpress buttons, so this is where you go if you want to adjust something.

3. Implement the code through the functions-file

Every theme has a function.php file which can be used to adjust pretty much everything your blog does. Just copy the following code to the end of your functions-file. Look carefully at those location-paths I used, you might need to adjust them to your files location..

/** Script Queue */
if (!is_admin()) add_action("wp_enqueue_scripts", "my_script_enqueue", 11);
function my_script_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('sharrre', get_stylesheet_directory_uri() . '/share/jquery.sharrre.min.js');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
   wp_enqueue_script('sharrre', get_stylesheet_directory_uri() . '/share/jquery.sharrre.min.js', array( 'jquery' ));
}

/** Share Button Stylesheet */
add_action( 'wp_enqueue_scripts', 'additional_styles' );
function additional_styles() {
	wp_register_style( 'share-css', get_stylesheet_directory_uri(). '/share/share.css' );
	wp_register_style( 'genericons', get_stylesheet_directory_uri(). '/share/genericons/genericons.css' );
	wp_enqueue_style( 'share-css' );
	wp_enqueue_style( 'genericons' );
}

/** Share Button Markup */
function ds_social_media_buttons() {
		ob_start(); // turn on output buffering
		include(get_stylesheet_directory() . '/share/share.php');
		$share_hook = ob_get_contents(); // get the contents of the output buffer
		ob_end_clean(); //  clean (erase) the output buffer and turn off output buffering
		echo $share_hook;
}

4. Display the share buttons wherever you need them

You need to call the last function from your functions.php to display the share buttons. You can use this code either on your post page or also on your homepage (the loop), just put it into your themes post/loop-template wherever you want to display the buttons:

Troubleshooting:

I’ve had some weird problems with the jQuery Version. Try to use 1.7.0 in the code I supplied above if the buttons don’t show at all
If stumbleupon and google-plus don’t show up the location of the sharrre.php file is probably wrong, check there
If they still don’t show up it might be because of this bug: Github-Sharrre-Issue-35. The discussion suggests, that one could talk to the hoster to get the curl-stuff working. If anyone comes across a solution for this, let me know.
- Update: Norman pointed out in the comments, that changing the „CURLOPT_FOLLOWLOCATION => true“ from true to false (in the sharrre.php) did the trick for him. Hope this helps others as well!

This is of course a very specific setup that might only be useful for my blog but hopefully it gets you closer to your perfect setup for custom wordpress share buttons with counts. Drop me a line if you run into problems or, even better, everything works for you!

Bear in mind, I’m by no means a coding person, this is pretty much all copy-paste coding, so I might not be able to help with every problem.

Daniel Setzermann