Social media buttons set to percentage heights based on shares and social media?
I want to create a social media sharing module for a WordPress site that looks something like below.
I can get social counts for the number of times a page has been split with JavaScript or PHP, not sure which route I'm going, but as simple as possible, I need a little help in determining the Percentage to set the height in CSS for these networks are shown below.
Can anyone show me the basic math that will need to be done to get the percentage for each social network, so I can show the size of each compared to the total number of combined shares across all networks.
The sample image shows this page has 221 stakes on 4 social networks. Then I will have the number of shares for each individual network.
I will need to get the percentage for each network, so I can set the Div size to that value.
This may not seem like a completely coding question, but it is, all math tasks will be done programmatically, I just know how to do all the other components, so there is no need to publish this code now.
Here are the current values for the data in the image, which is also confusing as it obviously adds a lot more than 100% ...
Twitter: height: 89%;
Google+: height: 26%;
Facebook: height: 57%;
LinkedIn: height: 28%;
source to share
You just need some basic math, you want to show the percentage usage of all social media shares. Good idea, by the way. You will have to combine all actions with promotions across all networks.
like this:
Twitter: 5, Facebook: 3, LinkedIn: 1;
comulated: 9.
Percentages:
(5/9)*100 = 55.55%
(3/9)*100 = 33.33%
(1/9)*100 = 11.11%
Now that we know this, we can turn to our css. We know the percentage of each individual element, but what can we relate to? We need a new meaning. The height of the parent for our social objects.
Let's take a look at this html:
<div class="social-parent">
<div class="social-item twitter"></div>
<div class="social-item facebook"></div>
<div class="social-item linkedin"></div>
</div>
And this CSS:
.social-parent
{
/* this is 100% for the elements */
height: 300px;
background-color: lightgray;
}
.social-item
{
display: inline-block;
width: 30px;
background-color: blue;
margin-right: 10px;
}
Now we can set the height of our elements relative to the height of the parent container. We can do it like you said with php or javascript. Here's a very cheesy way to do it with JS:
var socialEngagement = {};
socialEngagement.twitter = "55.55%";
socialEngagement.facebook = "33.33%";
socialEngagement.linkedin = "11.11%";
document.querySelector(".social-item.twitter").style.height = socialEngagement.twitter;
document.querySelector(".social-item.facebook").style.height = socialEngagement.facebook;
document.querySelector(".social-item.linkedin").style.height = socialEngagement.linkedin;
Here is a demo of the result: http://jsfiddle.net/br8rfpLm/1/
source to share