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:

Custom Social Media Buttons for WordPress

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..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/** 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:

<?php ds_social_media_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.

78 Kommentare

Füge deinen hinzu →

  1. Hi Dan,

    I love these buttons you have developed, but I’m having some trouble implementing them on my site. I’ve followed your instruction, but the buttons seem to hide my featured pics and the buttons themselves don;t load but instead separate the bottom of my post and force my sidebar to move… CHECK OUT HERE

    I think this has something to do with where the buttons are more than anything – but could you advise if there’s anything I could do? Or help me out with rewording the position? Ideally, I’d like top and bottom of post…

    Many thanks and very best wishes,

  2. Great tutorial,!
    I’d like to download those files but the download link is outdated.

  3. CharfishCharlie

    13. November 2014 — 01:31

    Hey, Daniel!

    Loving this plugin and had a question about it’s integration. Is there any way to show the icons both above and below the content? I’ve had no trouble getting either/or to show, but not both.

    Cheers in advance, mate!

    • Took a while, but I got this working now. I’ve updated the article to reflect the changes. There is now a shiny new hook that you can place in multiple places. Be sure to also update the share.php file as I had to change a few lines there to make it work!

  4. Hi there… thanks for this info. I wonder if the color on the counters can be changed as well? If not, do you know where I could find a customizable social share counter where I could change the color to fit my theme colors?

    • You can easily change the colors to whatever you need from the CSS file, as for sharrre plugin that mentioned in this post, there are 3 colors to change in every button (Background, color, border and hover) for example in share.css file, at line #139 find the class:
      .share-filled .twitter .share { background: #09b0ed; }
      .share-filled .twitter .count,
      .share-filled .twitter .count:hover { color: #09b0ed; border: 1px solid #09b0ed; }

      Change the #09b0ed to anything you like. and do the same for facebook, google+ etc.

  5. First of all Thanks Daniel. Great and simple. but as for developers, sharrre has a some problems with „theme check plugin“ because it uses curl_init(); to handle google+ connection which will cause some Warnings.

  6. Thanks for your guide but when I’m implement it in wordpress, I dont see the icons of G+ or str for share stumbleupon, whats wrong? ;(

  7. Hey there, thanks so much, the buttons are really nice and I have added them to a floating bar on the left of my posts.

    Only problem I have is that I would like them to be on the homepage too, but it seems like instead of seeing the stats for the website, it is the stats of the latest post? It it not possible to have this for the main page?

    Like with the ‚floating social‘ plugin (which is ugly!)

    You can check out my buttons, I have them on the left and under the post content.

    I also added a comment could button to the left ones 😉

    http://www.paperkawaii.com just click on a post..

    • Ah, thats an interesting idea … not sure yet how it could be done. I might find some time to look into it this weekend. I’ll keep you posted. Checked out your website and implementation, really cool stuff!

  8. Nikolaos A. Ventouris

    5. Dezember 2014 — 10:58

    You are awesome !! This post shoud posted in official page of sharrre !! Great Job, Thanks a lot !!

  9. The pinterest button isn’t working either, not on mine or here.
    Please let me know if you fix it 🙂

  10. Great list of the best WordPress social media sharing plugins, all in one place. Im using on my site brightverge.com you can check… Thanks for sharing ….

  11. Wonderful blog & good post. It is really helpful for me, awaiting for more new post. Keep Blogging ! White Hat World

  12. Counters are not working with custom post types. Can anyone suggest about it?

  13. Wow Daniel! I’m so glad I stumbled across this post—been looking for a breakdown on how to best use Sharrre.

    One problem though, I’m hung up on step 1: downloading the files to my WP Theme Directory. Where do I find the theme directory in WP?

    Thanks!

    • Hi Simon, sorry, somehow I did not get a notification for this comment. Normally your theme directory is somewhere along the way of yourdomain.com/wp-content/themes/nameoftheme/. Hope that helps!

  14. I recently got this php error: Trying to get property of non-object on share.php file and on the line where I have Pinterest description: php echo the_title();
    Any ideas what might be causing it?

  15. Hi Daniel,

    Thanks for this. simple, and i got it work in minutes!

    Keep Rocking!

  16. Not working, i tried to share this post. the counter increment by one after clicking, but if you refresh the page, it’ll return to the original count.

  17. Was a great one, but giving some error in my cPanel.

    attached the error, do you have any idea on it? would be great if it get solved, really loved the buttons..

    thanks!

    • Sorry for the late reply … the notices should not be a problem as they are really not errors but notices. Did you get those messages while developing locally or on your live project?

  18. Lewis John Sherlock

    23. März 2015 — 00:49

    I have been looking for something like this for a while. Thanks very much for sharing.
    I am wondering if there would be a way to get a total of all shares for a WordPress website? – i.e. for the dashboard or homepage…

  19. Hi Daniel, big thank`s for that and for the big tutorial too. I’ve learned much.

  20. Hi Daniel,
    I really like these buttons. And I have used them on my site (socialmediawithpb.com). I have some questions and was wondering if you could help me with them.
    1. How can I disable the StumbleUpon button? There seems to be some sort of conflict with my right sidebar when I do that. If I comment the html code in the share.php file, my entire right sidebar disappears. Not sure why that is happening.
    2. Is there a way to include an email button which will enable the reader to email the post directly by clicking on the button?

    Thanks.

  21. Hi.

    It does not show tile G+ and share+
    can you help me!

    http://tabletopgasgrillreviews.com/#Chromo_Inc_Grill

  22. Unfortunately I couldn’t get them to work at all.
    I tried what you suggested and played around with the jquery version but NOTHING. Too bad.

  23. Hi, the first, i want to say thanks you :D.

    It work fine before, but i dont know why Google Button not count at this time, can you fix or update it? 🙁

    (Sorry my English is not well)

  24. Hey Daniel,

    first: big thanks!

    second: I have had the google+ issue. The given troubleshouting above didn’t solve it. So i contactet my hoster.

    It turned out that the curloption „CURLOPT_FOLLOWLOCATION => true“ within the sharrre.php caused a redirect from the given relative path to the absolute one. Because of open_basedir (which my hoster wasn’t able to change for me), this new absolute path was blocked. Switching this optin to false solved my problem.

    Google+ button is now shown correctly.

    Hope this helps!

  25. Hi,

    I saw that twitter is now stopping their support for the cdn.api.twitter.com so now the twitter button just trying to load but never does, even on your site so I see you didn’t find a solution yet either, keep us posted, thanks for the guide !

  26. I use this code but buttons don’t appear on the page. Can you help me?

    • The same here. I’ve been stuck on this for quite a while trying to find a solution. I’m using the buttons from the previous article as a fallback since then, but it doesn’t cover Pinterest.

  27. Hello. Please help me. I don’t know how eliminate color. You can see in this image print-screen.

  28. Suggestion to add function for email share and print in share.php for WordPress. (As I know many developers use these features, along with font-awesome capabilities, if you already have fa in place.)



    <a title="“ href=“mailto:?subject=Check this post – &body= &title=““ email“=““>


    <a title="“ href=“javascript:window.print()“ rel=“nofollow“>

  29. Suggestion to add function for email share and print for WordPress. (As I know many developers use these features, along with font-awesome capabilities, if you already have fa in place.)

    
    
    
    
    
    
    
    
               
    
               <a title="" href="mailto:?subject=Check this post -  &body= &title="" email"=""> 
    
            
    
            
    
               
    
               <a title="" href="javascript:window.print()" rel="nofollow"> 
    
             
    
        
    
    
  30. <!– Share Button Markup –><!– 'in share.php' –>

    <!– Place code below last after other div classes, this will add email share and print to share.php –>

    <div class="email sharrre email">

    <!–Email–>

    <a title="<?php _e('Share by email','[Your Custom Text Goes Here]') ?>" href="mailto:?subject=Check this post – <?php the_title();?> &amp;body= <?php the_permalink()?>&amp;title="<?php the_title()?>" email"=""><i class="fa fa-lg fa-envelope"></i> <span><?php _e('Share by email', '[Your Custom Text Goes Here]')?></span></a>

    </div>

    <div class="print sharrre print">

    <!–Print–>

    <a title="<?php _e('Print','[Your Custom Text Goes Here]') ?>" href="javascript:window.print()" rel="nofollow"><i class="fa fa-lg fa-print"></i> <span><?php _e('Print', '[Your Custom Text Goes Here]')?></span></a>

    </div>

    </div><!– End Share Button Markup –>

  31. Suggestion to add function for email share and print for WordPress. (As I know many developers use these features, along with font-awesome capabilities, if you already have fa in place.)

    <!– Share Button Markup –><!– 'in share.php' –>

    <!– Place code below last after other div classes, this will add email share and print to share.php –>

    <div class="email sharrre email">

    <!–Email–>

    <a title="<?php _e('Share by email','[Your Custom Text Goes Here]') ?>" href="mailto:?subject=Check this post – <?php the_title();?> &amp;body= <?php the_permalink()?>&amp;title="<?php the_title()?>" email"=""><i class="fa fa-lg fa-envelope"></i> <span><?php _e('Share by email', '[Your Custom Text Goes Here]')?></span></a>

    </div>

    <div class="print sharrre print">

    <!–Print–>

    <a title="<?php _e('Print','[Your Custom Text Goes Here]') ?>" href="javascript:window.print()" rel="nofollow"><i class="fa fa-lg fa-print"></i> <span><?php _e('Print', '[Your Custom Text Goes Here]')?></span></a>

    </div>

    </div><!– End Share Button Markup –>

  32. Hi Dan, this is great but I am still having issues w/Twitter. I swapped out the Open Share Count code but…to no avail. However, if i insert their „OpenShareCount with a standard Twitter button“ code, I am pulling in Tweet counts. Here’s an example where I dropped the OSC code next to your button for comparison: http://www.northeastern.edu/news/2015/11/northeastern-toy-clothing-drives-spread-holiday-cheer-to-boston-community/
    Any ideas? Thanks and I owe you a beer or 2!

Schreibe einen Kommentar