Update 3: I wrote a whole new tutorial for the custom sharing buttons. This new version loads asynchronously to speed up the page speed noticeably. Check it out: Custom Share Buttons with Sharrre
Update 2: As requested, the template now also includes a share button for LinkedIn with count.
Update: The Google+ Count is now cached as well and I added Flattr to the list of included buttons.
When you want share buttons for your website you are widely advised to use the “factory-default” versions supplied by Facebook, Twitter and Google+. These, in their most minimal version, look like this:
There are a few things, which led me to develop custom social share buttons for wordpress instead of these buttons:
- German Authorities actually kind of forbid the use of the like-button from Facebook, because it collects private data without the user accepting this behaviour.
- They impact the performance of your website. Although Facebook made theirs faster recently 0.5s load-time is still pretty bad for the page speed.
- I don’t really like the look of the buttons. They each have their own look and don’t integrate well into every webdesign.
- A lot of people have the same problem and search for a custom facebook share buttons or custom twitter share buttons
Enough pretext, here’s what I came up with:
Why do I like those?
- Custom Social Share buttons with Share Count.
- Unified unobtrusive look, easily stylable.
- Simple Share Links, no data is collected.
- They load much faster.
I’m no programmer so I made those work as usual by putting my copy & paste – programming – skills to work.
These 4 steps make the buttons work:
- The Code for your themes function.php to get the counter work.
- A little script that takes care of sizing an positioning the popups
- The Font Awesome Icon Set (for the Social Icons)
- The CSS Code to style those Buttons.
1. The Code for your function.php
I found this great post by webdev studios showing me how to grab the like count from facebook and twitter. Unfortunately I was out of luck for the Google+ Share Count. But after some research I found this blogpost on how to get the share count for Google Plus. I combined those, and it works. Update: I’ve seen some unsolved questions on how to customize the flattr button, so I added a custom flattr Button without javascript here as well. Just delete the corresponding parts in the code, if you don’t need it.
Put this code at the end of your functions.php
/** Get tweet count from Twitter API (v1.1) */
function ds_post_tweet_count( $post_id ) {
// Check for transient
if ( ! ( $count = get_transient( 'ds_post_tweet_count' . $post_id ) ) ) {
// Do API call
$response = wp_remote_retrieve_body( wp_remote_get( 'https://cdn.api.twitter.com/1/urls/count.json?url=' . urlencode( get_permalink( $post_id ) ) ) );
// If error in API call, stop and don't store transient
if ( is_wp_error( $response ) )
return 'error';
// Decode JSON
$json = json_decode( $response );
// Set total count
$count = absint( $json->count );
// Set transient to expire every 30 minutes
set_transient( 'ds_post_tweet_count' . $post_id, absint( $count ), 30 * MINUTE_IN_SECONDS );
}
return absint( $count );
} /** Twitter End */
/** Get like count from Facebook FQL */
function ds_post_like_count( $post_id ) {
// Check for transient
if ( ! ( $count = get_transient( 'ds_post_like_count' . $post_id ) ) ) {
// Setup query arguments based on post permalink
$fql = "SELECT url, ";
//$fql .= "share_count, "; // total shares
//$fql .= "like_count, "; // total likes
//$fql .= "comment_count, "; // total comments
$fql .= "total_count "; // summed total of shares, likes, and comments (fastest query)
$fql .= "FROM link_stat WHERE url = '" . get_permalink( $post_id ) . "'";
// Do API call
$response = wp_remote_retrieve_body( wp_remote_get( 'https://api.facebook.com/method/fql.query?format=json&query=' . urlencode( $fql ) ) );
// If error in API call, stop and don't store transient
if ( is_wp_error( $response ) )
return 'error';
// Decode JSON
$json = json_decode( $response );
// Set total count
$count = absint( $json[0]->total_count );
// Set transient to expire every 30 minutes
set_transient( 'ds_post_like_count' . $post_id, absint( $count ), 30 * MINUTE_IN_SECONDS );
}
return absint( $count );
} /** Facebook End */
/** Get share count from Google Plus */
function ds_post_plusone_count($post_id) {
// Check for transient
if ( ! ( $count = get_transient( 'ds_post_plus_count' . $post_id ) ) ) {
$args = array(
'method' => 'POST',
'headers' => array(
// setup content type to JSON
'Content-Type' => 'application/json'
),
// setup POST options to Google API
'body' => json_encode(array(
'method' => 'pos.plusones.get',
'id' => 'p',
'method' => 'pos.plusones.get',
'jsonrpc' => '2.0',
'key' => 'p',
'apiVersion' => 'v1',
'params' => array(
'nolog'=>true,
'id'=> get_permalink( $post_id ),
'source'=>'widget',
'userId'=>'@viewer',
'groupId'=>'@self'
)
)),
// disable checking SSL sertificates
'sslverify'=>false
);
// retrieves JSON with HTTP POST method for current URL
$json_string = wp_remote_post("https://clients6.google.com/rpc", $args);
if (is_wp_error($json_string)){
// return zero if response is error
return "0";
} else {
$json = json_decode($json_string['body'], true);
// return count of Google +1 for requsted URL
$count = intval( $json['result']['metadata']['globalCounts']['count'] );
}
// Set transient to expire every 30 minutes
set_transient( 'ds_post_plus_count' . $post_id, absint( $count ), 30 * MINUTE_IN_SECONDS );
}
return absint( $count );
} /** Google Plus End */
/** Get Flattr count */
function ds_post_flattr_count( $post_id ) {
// Check for transient
if ( ! ( $count = get_transient( 'ds_post_flattr_count' . $post_id ) ) ) {
// Check if URL exists
$response = wp_remote_retrieve_body( wp_remote_get( 'https://api.flattr.com/rest/v2/things/lookup/?url=' . urlencode( get_permalink( $post_id ) ) ) );
// Decode JSON
$json = json_decode( $response );
// Get URL ID
$message = $json->message;
if ($message == "not_found") {
return 0;
}
else {
$location = $json->location;
$flattrs = $json->flattrs;
$count = $flattrs;
}
// Set transient to expire every 30 minutes
set_transient( 'ds_post_flattr_count' . $post_id, absint( $count ), 30 * MINUTE_IN_SECONDS );
}
return absint( $count );
} /** Flattr End */
/** Get Count from LinkedIn */
function ds_post_linkedin_count( $post_id ) {
// Check for transient
if ( ! ( $count = get_transient( 'ds_post_linkedin_count' . $post_id ) ) ) {
// Do API call
$response = wp_remote_retrieve_body( wp_remote_get( 'https://www.linkedin.com/countserv/count/share?url=' . urlencode( get_permalink( $post_id ) ) . '&format=json' ) );
// If error in API call, stop and don't store transient
if ( is_wp_error( $response ) )
return 'error';
// Decode JSON
$json = json_decode( $response );
// Set total count
$count = absint( $json->count );
// Set transient to expire every 30 minutes
set_transient( 'ds_post_linkedin_count' . $post_id, absint( $count ), 30 * MINUTE_IN_SECONDS );
}
return absint( $count );
} /** LinkedIn End */
/** Markup for Social Media Icons */
function ds_social_media_icons() {
// Get the post ID
$post_id = get_the_ID(); ?>
At the end I marked some stuff with XXX, be sure to fill those in accordingly. You can generate your facebook app_ID over at the Dev Center for Facebook. (Apps ▸ Create new App). The via=XXX in the twitter section should obviously be filled with your twitter name. The Flattr User Id is pretty self-explanatory.
2. Centering the Popups
The following script takes care of positioning and sizing simple sharing popup dialogs.
var popupCenter = function(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 3) - (h / 3)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
};
Put this script somewhere above your first sharing buttons. Presumably you just put the script on your server as a .js file and call it like so:
3. Icons from Font Awesome (optional)
Quickly implement number 3 on our list. Font Awesome lets you use a wide range of social icons with simple markup. I use the service in my markup, so you might as well. Just implement this call in the Head-Area of your theme:
4. Styling the Buttons
The last step, number 4, is to style your Buttons accordingly. Here is the CSS-Code I use. Just put it in your style.css file. You can of course edit this code to reflect your blog/websites look.
/* General Social Button Styling */
.social-icons {
height: 25px;
}
.social-icons li {
list-style-type: none !important;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.social-icons li:last-child {
margin-right: 0 !important;
}
/* Facebook Button Styling */
li.social-icon.facebook a {
border-top: 1px solid #3b5998;
border-left: 1px solid #3b5998;
border-bottom: 1px solid #3b5998;
padding: 3px 5px 3px 15px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
color: #3b5998;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
text-decoration: none;
}
li.social-icon.facebook a:hover {
background-color: #3b5998;
color: white;
}
li.social-icon.facebook span.share-count {
border: 1px solid #3b5998;
padding: 3px 10px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
color: #3b5998;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
}
/* Twitter Button Styling */
li.social-icon.twitter a {
border-top: 1px solid #55acee;
border-left: 1px solid #55acee;
border-bottom: 1px solid #55acee;
padding: 3px 5px 3px 15px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
color: #55acee;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
text-decoration: none;
}
li.social-icon.twitter a:hover {
background-color: #55acee;
color: white;
}
li.social-icon.twitter span.share-count {
border: 1px solid #55acee;
padding: 3px 10px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
color: #55acee;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
}
/* Google+ Button Styling */
li.social-icon.google-plus a {
border-top: 1px solid #dd4b39;
border-left: 1px solid #dd4b39;
border-bottom: 1px solid #dd4b39;
padding: 3px 5px 3px 15px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
color: #dd4b39;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
text-decoration: none;
}
li.social-icon.google-plus a:hover {
background-color: #dd4b39;
color: white;
}
li.social-icon.google-plus span.share-count {
border: 1px solid #dd4b39;
padding: 3px 10px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
color: #dd4b39;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
}
/* Flattr Button Styling */
li.social-icon.flattr a {
border-top: 1px solid #338d11;
border-left: 1px solid #338d11;
border-bottom: 1px solid #338d11;
padding: 3px 5px 3px 15px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
color: #338d11;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
text-decoration: none;
}
li.social-icon.flattr a:hover {
background-color: #338d11;
color: white;
}
li.social-icon.flattr span.share-count {
border: 1px solid #338d11;
padding: 3px 10px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
color: #338d11;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
}
/* LinkedIn Button Styling */
li.social-icon.linkedin a {
border-top: 1px solid #0976b4;
border-left: 1px solid #0976b4;
border-bottom: 1px solid #0976b4;
padding: 3px 5px 3px 15px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
color: #0976b4;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
text-decoration: none;
}
li.social-icon.linkedin a:hover {
background-color: #0976b4;
color: white;
}
li.social-icon.linkedin span.share-count {
border: 1px solid #0976b4;
padding: 3px 10px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
color: #0976b4;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
}
Last step: You need to call the 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:
That’s it, those are my custom social share buttons for wordpress with share count. Hope that helps somebody out there when trying to figure out how to get share counts on Google+, Facebook and Twitter Buttons in WordPress. It works well for me … try them if you like this post.
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).