In a previous tutorial I’ve shown you how to create social sharing buttons with html and css. We also buffed it with some jQuery so when they are clicked a new little window pops up for sharing.
In this tutorial we’ll be taking a look at how to add social share count to those buttons. Also, we’ll display the total number of shares the page has.
To get us started, we’ll need an account on the sharedcount website. We’ll use their API to display share counts, so go ahead and create an account.
Altho before we get started, please go back and take a look at the html/css structure of the buttons, because I won’t go over that in this article.
The HTML
The only thing we’ll change a bit around is the HTML structure. We’ll add a place holder for the total share count, and one for each social media site share count.
<div class="socialShare clearfix">
<!-- Total Share count -->
<div class="sharedCount">
<span class="number">0</span>
<span class="shares">shares</span>
</div>
<ul class="icons clearfix">
<a class="btnz share facebook" href=""><i class="fa fa-facebook"></i> <span class="count"></span></a>
<a class="btnz share gplus" href=""><i class="fa fa-google-plus"></i> <span class="count"></span></a>
<a class="btnz share twitter" href=""><i class="fa fa-twitter"></i> <span class="count"></span></a>
<a class="btnz share stumbleupon" href=""><i class="fa fa-stumbleupon"></i> <span class="count"></span></a>
<a class="btnz share pinterest" href=""><i class="fa fa-pinterest"></i> <span class="count"></span></a>
<a class="btnz share linkedin" href=""><i class="fa fa-linkedin"></i> <span class="count"></span></a>
<a class="btnz share buffer" href=""><i class="fa fa-share-square-o"></i> Buffer</a>
</ul>
</div>As you can see, all we did is added a container .socialShare around the buttons, added a .sharedCount div with two spans, .number and .shares.
Then on the share buttons, we added a .count span instead of the text we had.
The next step is to setup the javascript.
The JavaScript
The first step is the create a new file, called share.js. This will contain our javascript that we need to display the social share count.
The first thing we need to add into it is the sharedCount API.
(function($){
sharedCount = function(url, fn) {
url = encodeURIComponent(url || location.href);
var domain = "http://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);
};Don’t forget to add the API key and the domain u get from sharedCount when u login.
The SharedCount API currently supports the following Social Networks: Facebook, Google+, Twitter, StumbleUpOn, Pinterest, LinkedIn. Sadly, no buffer.
Now that we’re connected to the API, we can display the share counts like follows:
parseSharedCount = function(url) {
sharedCount(url, function(data){
var facebookCount = data.Facebook.total_count;
var googleCount = data.GooglePlusOne;
var twitterCount = data.Twitter;
var stumbleuponCount = data.StumbleUpon;
var pinterestCount = data.Pinterest;
var linkedinCount = data.LinkedIn;
var totalCount = facebookCount+googleCount+twitterCount+stumbleuponCount+pinterestCount+linkedinCount;
var newTotalCount = nFormatter(totalCount);
$(".socialShare .number").text(newTotalCount);
$('.facebook .count').text(nFormatter(facebookCount));
$('.gplus .count').text(nFormatter(googleCount));
$('.twitter .count').text(nFormatter(twitterCount));
$('.stumbleupon .count').text(nFormatter(stumbleuponCount));
$('.pinterest .count').text(nFormatter(pinterestCount));
$('.linkedin .count').text(nFormatter(linkedinCount));
$(".socialShare").addClass('loaded');
});
}
})(jQuery);If you look closely, you’ll see that we use the .text jquery function to change the text on the buttons, also there’s an other function inside that, called nFormatter. We use this to format numbers, such as 1000 to 1k, and 1000000 to 1m and so on :
function nFormatter(num) {
if (num >= 1000000000) {
return (num / 1000000000).toFixed(1) + 'G';
}
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M';
}
if (num >= 1000) {
return (num / 1000).toFixed(1) + 'K';
}
return num;
}And at this point, we’re done with the javascript part as well.
The CSS
Since we added some new elements to hour buttons, we need to add some more CSS to our stylesheet:
.socialShare {
color: #fff;
display: block;
padding: 0;
position: relative;
margin-right: 10px;
}
.socialShare .sharedCount{
font-size: .7em;
display: block;
float: left;
opacity: 0;
margin-left: 5px;
margin-right: 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;
}
.socialShare .sharedCount .number{
font-size: 1.9em;
display: block;
color: #25bb8b;
font-weight: bold;
text-align: center;
}
.socialShare .sharedCount .shares{
font-size: 1.1em;
display: block;
color: #b8b8b8;
}
.socialShare.loaded .sharedCount {
opacity: 1;
}After we’re done with all this, there’s one last step. And that’s to call the function that displays the social share count. Simply add the following line to the bottom of your page.
<script type="text/javascript">parseSharedCount('url');</script>Also, don’t forget to replace the URL with the page’s url.
And if you’ve done everything correctly, you should have something like the following:
I hope helps you to create your own social sharing buttons with social share count. If you have any questions or suggestions related to this, feel free to leave a comment down below! Also don’t forget to share it with your friends and followers.