CODEWITHSUNDEEP
javascriptphpcssmath
JasonDavis
JasonDavis

Reputation: 48933

Social Network Share buttons set to a Percentage based height based on number of shares and number of Social Networks?

I am wanting to build a Social network sharing module for a WordPress site that will look similar to this image below....

enter image description here

I can get the social counts for the number of times a page has been shared with JavaScript or PHP, haven't decided on which route I am going yet but as easy as it probably is, I need a little help with determining the Percentage to set the height in CSS for these networks shown below.

Can someone show me the basic math that will need to be performed to get the percentage for each social network so I can show the size of each, in proportion to the total number of combined shares on all networks.

The example image shows that this page has 221 shares across the 4 social networks. I will then have the number of shares for each individual network as well.

I will need to get a percentage for each network so I can set the size of the Div on that value.

This may not seem completely like a programing question but it is, all the math will be done programatically, I just know how to do all the other components already so no need to post that code now.

Here are the current values for the data in the image which is also confusing as it obviously adds up to much much higher than 100%...

Twitter: height: 89%;
Google+: height: 26%;
Facebook: height: 57%;
LinkedIn: height: 28%;

Upvotes: 3

Views: 76

Answers (1)

Nico O
Nico O

Reputation: 14102

You just need some basic math, you want to show the percentage usage over all shares on social media. Nice Idea by the way. You will have to comulate all share actions over 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 that, we can turn to our css. We know the percentage of each single element, but what can we relate that to? We need a new value. A height of an parent element for our social items.

Lets asume 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;
}

We can now set the height of our elements relative to the height of the parent container. We can do this, like you said with php or javascript. Here is 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/

Upvotes: 1

Related Questions