Easy methods to Create a Social Sharing Bar Graph for WordPress

Posted on May 19, 2014 at 1:49 pm

When creating the hot design for WDL, I knew that i needed to create a cleaner and more minimalistic design than I had with any of the former versions of the location. And that i also desired to do something new and unique with the social sharing buttons – something that had not been done before. The end result was a clickable bar graph that enables the user to quickly see which social sites are providing one of the most shares for a given post, together with a display of total shares.

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

The Markup

You can see on the top of this post that I added our bar graph right below the title. Within the single.php file of your WordPress theme, add this code somewhere below the_title() or wherever you’d like 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 within the next steps.

Getting the full Shares

First, you wish to get the whole shares. The best way is to take advantage of a service that does it for you. After a fast Google search, i found SharedCount, a neat little site that did just what i wanted, and better of all, they’d a simple to exploit API. But to make use of the API, you first must get an API key.

Once you’ve signed up and received your key, create a brand new file and name it something like “sharedcount.js”. We’ll put all of our jQuery stuff on this file. Start by pasting during 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 the entire data that we’ll need.

Parse the SharedCount Data

Now that we have got a function to fetch the SharedCount data, we have to do something useful with it. So let’s create a function on the way to pull out the person shares for every social site that we’re occupied with, and total them up. Add this code in 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 person values for every social site. Then on lines 9-13, a percentage is calculated in keeping with those values. The “offset” value is used to verify each bar has some height in order that the icon might be displayed although that exact site doesn’t have any shares. Finally, on lines 15-20, we set the entire share count text and use those percentage values to set the peak on each bar. Adding the category “loaded” to the containing div will kick off the CSS animations.

Make the Bars Clickable

The final little bit of code we’ll add to the sharedcount.js file will make the bars into buttons. In order 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;
 });
 });

Here’s everything that are meant to be in our sharedcount.js file:

(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);
 };
 
 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);
 
 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 file within the js folder of your theme. Your theme must have an area in functions.php where all the theme’s scripts are enqueued. Add the road of code below on this same place to be certain the sharedcount script gets loaded.

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

The CSS

For the advent of the bar graph, I went with a clean flat look, in order that it matched the remainder of the design. You’ll have got to add the ensuing CSS to the manner.css file of your WordPress theme. It can offer you what you notice here on WDL, but obviously you are able to tweak it to check your WordPress theme. It’s all pretty basic CSS, but it’s important to notice on lines 84 and 88 we define the .loaded class to enable the animations once the info was 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 many free sets available like this one.

That wraps it up. You must now manage to include a social sharing bar graph like ours for your WordPress site. We encourage you to tweak it and make it your individual. As you spotted, we only included four social sites in ours, but SharedCount provides data for lots more. So that you may be ready to add those which can be important to you.

Posted in Web Design