1. Technical
  2. Technology
  3. Web Design

How to Create a Social Sharing Bar Graph for WordPress

Written by Posted on Less than 0 min read
0

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.

Member since

More from admin

VipsPMV1.2
  1. Technology

Affordable and Flexible Project Management Suite

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Written by
  1. Blog
  2. Technical
  3. Technology

Web Host Interview: Interserver Director of Business Development, Michael Lavrik

Today we are honored to have Michael Lavrik, Director of Business Development of Interserver, as our interview guest. Interserver is a VPS/dedicated hosting provider that need no further introduction – the company has been around for one-and-half decade (and still going very strong in business today). Without further delay, here goes my Q&A session with Mr. Lavrik. Personal […]
Written by
Next
No Comments
Leave a comment
Comments to: How to Create a Social Sharing Bar Graph for WordPress

Recent Articles

Good Reads

Worlwide

VipsPMV1.2

Affordable and Flexible Project Management Suite

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Written by

Trending

A Walk Through The Tucson Bead Show-665623f6

Turquoise Gemstone Jewelry Collection – Rananjay Exports

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Written by
Reliable Packers and Movers in Navi Mumbai-e7e8f17b

Why have reliable packers and movers in Delhi NCR gained popularity in 2021?

24 March 2020, the evening when the Government of India ordered a nationwide lockdown for 21 days. Because the deadly Coronavirus crept into the world and turned it into a sinking ship, put unforeseen pressures on all of us with its destructive intentions. Soon after, it turned into a giant monster. Omicron, the new variant […]
Written by