How to Create a Social Sharing Bar Graph for WordPress

Advertise here with BSA

When creating the new design for WDL, I knew that I wanted go cleaner and more minimalistic than I had with any of the previous versions. And I also knew that I wanted to do something new and unique with the social sharing buttons – something that had not been done before. The result was a clickable bar graph that allows the user to quickly see which social sites are providing the most shares for a given post, along with a display of total shares.

Since launching the redesign, we’ve had a lot of people asking how we did it. If you’re one of those people, keep reading and I’ll show you how.

The Markup

You can see at the top of this post that we added our bar graph right below the title. In the single.php file of your WordPress theme, add this code somewhere below the_title() or wherever you want it to be displayed.

<div class="socialShare clearfix">
	<div class="sharedCount">
		<span class="count"></span>
		<span class="shares">shares</span>
	</div>
	<ul class="icons clearfix">
		<li class="icon twitter social"><a href="https://twitter.com/share" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @webdesignledger"></a></li>
		<li class="icon google social"><a href="https://plus.google.com/share" data-url="<?php echo get_permalink(); ?>"></a></li>
		<li class="icon facebook social"><a href="https://www.facebook.com/sharer/sharer.php" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @webdesignledger" target="_blank"></a></li>
		<li class="icon linkedin social"><a href="http://www.linkedin.com/shareArticle" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?>"></a></li>
	</ul>
	<script>parseSharedCount("<?php echo get_permalink(); ?>");</script>
</div>

On line 12, we pass the post’s URL to the parseSharedCount function we’ll create in the next steps.

Getting the Total Shares

First, you need to get the total shares. The easiest way is to use a service that does it for you. After a quick Google search, I discovered SharedCount, a neat little site that did just what I needed, and best of all, they had an easy to use API. But to use the API, you first have to get an API key.

Once you’ve signed up and received your key, create a new file and name it something like “sharedcount.js”. We’ll put all of our jQuery stuff in this file. Start by pasting in this code:

(function($){
   sharedCount = function(url, fn) {
      url = encodeURIComponent(url || location.href);
      var domain = "//free.sharedcount.com/"; /* SET DOMAIN */
      var apikey = "" /*API KEY HERE*/
      var arg = {
	     data: {
                url : url,
                apikey : apikey
	     },
	     url: domain,
	     cache: true,
	     dataType: "json"
      };
      if ('withCredentials' in new XMLHttpRequest) {
	     arg.success = fn;
      }
      else {
	     var cb = "sc_" + url.replace(/W/g, '');
	     window[cb] = fn;
	     arg.jsonpCallback = cb;
	     arg.dataType += "p";
      }
      return $.ajax(arg);
};

On line 5, add your API key between the quotes. This function is what communicates with the SharedCount.com API, and returns all the data that we’ll need.

Parse the SharedCount Data

Now that we’ve created a function to fetch the SharedCount data, we need to do something useful with it. So let’s create a function that will pull out the individual shares for each social site that we’re interested in, and total them up. Add this code to your file:

parseSharedCount = function(url) {
   sharedCount(url, function(data){
	var twitterCount = data.Twitter;
	var facebookCount = data.Facebook.total_count;
	var googleCount = data.GooglePlusOne;
	var linkedinCount = data.LinkedIn;
	var totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount;

	var offset = 25;
	var twitterHeight = Math.ceil(twitterCount/totalCount*100)+offset;
	var facebookHeight = Math.ceil(facebookCount/totalCount*100)+offset;
	var googleHeight = Math.ceil(googleCount/totalCount*100)+offset;
	var linkedinHeight = Math.ceil(linkedinCount/totalCount*100+offset);

	$(".socialShare .count").text(totalCount);
	$(".socialShare .icon.twitter").css('height',twitterHeight+'%');
	$(".socialShare .icon.facebook").css('height',facebookHeight+'%');
	$(".socialShare .icon.google").css('height',googleHeight+'%');
	$(".socialShare .icon.linkedin").css('height',linkedinHeight+'%');
	$(".socialShare").addClass('loaded');
   });	
}
})(jQuery);

On lines 3-7, we pull out the individual values for each social site. Then on lines 9-13, a percentage is calculated based on those values. The “offset” value is used to make sure each bar has some height so that the icon can be displayed even if that particular site doesn’t have any shares. Finally, on lines 15-20, we set the total share count text and use those percentage values to set the height on each bar. Adding the class “loaded” to the containing div will kick off the CSS animations.

Make the Bars Clickable

The final bit of code we’ll add to the sharedcount.js file will make the bars into buttons. So that when clicked each bar will open it’s respective social sharing popup window.

jQuery(document).ready(function( $ ) {
$(".social.icon a").click(function(){		
	var url = $(this).attr('data-url');
	var text = $(this).attr('data-text');
	var href = $(this).attr('href');
		
	if($(this).parent().hasClass('twitter')){
			window.open(href+"?text="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('facebook')){
			window.open(href+"?t="+text+"&u="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('google')){
			window.open(href+"?&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('linkedin')){
			window.open(href+"?mini=true&summary="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}
	return false;
});
});

Place the sharedcount.js file in the js folder of your theme. Your theme should have a place in functions.php where all of the theme’s scripts are enqueued. Place the line of code below with where the other scripts are enqueued.

wp_enqueue_script('sharedcount', get_bloginfo('template_url').'/js/sharedcount.js', array('jquery'), '0.1', false);

The CSS

For the appearance of the bar graph, I went with a clean flat look, so that it matched the rest of the design. You’ll need to add the following CSS to the style.css file of your WordPress theme. It will give you what you see here on WDL, but of course you can tweak it to match your WordPress theme. It’s all pretty basic CSS, but it’s important to note on lines 84 and 88 we define the .loaded class to enable the animations once the data has been loaded.

.socialShare {	
	color: #fff;
	display: block;
	margin-bottom: 20px;
	padding: 0;	
	height: 73px;
	position: relative;
	border-bottom: 3px solid #d8d8d8;
	width: 250px;	
}

.socialShare .sharedCount{
	position: relative;
	font-size: .9em;	
	display: block;
	box-shadow: none;
	margin-top: 0;
	top: 0;
	left: 0;
	float: left;
	opacity: 0;
	margin-left: 5px;	
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	background: none;
	color: #222222;
	border: none;
}

.socialShare .sharedCount .count{
	font-size: 1.9em;
	display: block;
	color: #25bb8b;
}

.socialShare .sharedCount .shares{
	font-size: 1.1em;
	display: block;
	color: #b8b8b8;
}

.socialShare.loaded .sharedCount {
	opacity: 1;
}

.socialShare .icons {
	margin-bottom: 0;
	positon: relative;		
}

.socialShare .icon {	
	display: block;	
	font-size: 1.2em;	
	float: left;
	margin: 0 0 0 0;
	position: absolute;
	bottom: 4px;
	opacity: 0;
	height: 0px;
	width: 30px;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
	transition-delay: .7s;
	-webkit-transition-delay: .7s; /* Safari */		
}

.socialShare .icon a{
	color: rgba(255,255,255,.7);	
	display: block;	
	width: 100%;
	height: 100%;
	background-size: 20px 20px;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
	transition-delay: .7s;	
}

.socialShare.loaded .icon {
	opacity: 1;	
}

.socialShare.loaded .icon a{
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

.socialShare .icon a:hover{
	background-color: #222;	
}

.socialShare .icon.twitter{
	background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat;
	left: 90px;	
}
.socialShare .icon.twitter a{
	background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat;
}
.socialShare .icon.google{	
	left: 125px;
	-webkit-transition-delay: .7s; /* Safari */	
}
.socialShare .icon.google a{
	background: #e03e12 url(images/icon_google.png) center center no-repeat;
}
.socialShare .icon.facebook {
	left: 160px;
	-webkit-transition-delay: .9s; /* Safari */	
}
.socialShare .icon.facebook a{
	background: #2c6087 url(images/icon_facebook.png) center center no-repeat;
}
.socialShare .icon.linkedin {
	left: 195px;
	-webkit-transition-delay: 1.2s; /* Safari */	
}

.socialShare .icon.linkedin a{
	background: #3686ab url(images/icon_linkedin.png) center center no-repeat;	
}

As for the icons, there are plenty of free sets available like this one.

That wraps it up. You should now be able to include a social sharing bar graph like ours on your WordPress site. We encourage you to tweak it and make it your own. As you noticed, we only included four social sites in ours, but SharedCount provides data for many more. So you will be able to add the ones that are important to you.