Cards. You’ll be unfamiliar with the term, but you’re for sure acquainted with the idea. Cards are ubiquitous in website design at the moment, and the craze looks catching on. Correctly, the revered web trinity of Google, Twitter, and Facebook are all doing it, so it ought to be worth at the least a cursory look. But, because we don’t cherish to do shallow here, let’s dive straight in.

What are Cards?

Simply answered, cards are packages of interactive information, usually presented inside the shape of a rectangle. Similar to charge cards or baseball cards, web cards provide quick and related information in a condensed format.

The hallmark of all cards is interactivity. Not just do they supply information, but they politely demand engagement. Cards commonly include like buttons or how you can post to social media.

What Cards Are Not

Because the term “card-based” is in its infancy, there’s loads of haze and confusion about what’s and isn’t a card. Adding to the path of uncertainty is the truth that not everyone calls it a card. A card is additionally called a tile, a module, or a portrait, simply to name a number of.

Sometimes, it’s easier to define something but ruling out what it isn’t. A card isn’t strictly a design. You can’t simply have a page, draw boxes on it, and contact each box a card. Well, you may, but it surely wouldn’t fit the definition posited the following article. Instead, a card should have functionality, be self-contained, and probably flippable.

Now’s the ideal time to bring Dr. Phil into this. He famously said that regardless of how flat you’re making a pancake, it still has two sides. That’s view cards- they must have two sides. It might probably not be that the cards have an animated flip, but rather each card presents an outline of data and provides you the choice for further involvement. A card is not only one piece of data, always embedded is the invitation to do more.

Following this definition, a card can’t just be pretty; it needs to be useful.

Why In the event you Use Cards?

Cards may be used in various how to satisfy specific functions. Listed below are the principle reasons to introduce cards into your design:

Cards grab attention. They’re a thrilling alternative to overly gratuitous text.

Cards are responsive. Designing for mobile browsers is a need, and cards are great for responsive design.

Cards are digestible. On account of their limited space, cards can’t really say much. But that’s an excellent thing! Readers who want more can click to get it.

Cards are shareable. Cards enable users to quickly and simply share bursts of content across social, mobile, and email platforms.

How If you happen to Use Cards?

The main point of cards is to have interaction with the user and prompt that user to action.

The form of action will vary, looking on the connection you’d want to foster together with your traffic. To reply to this query to your own site, placed on your UI/UX hat, and call to mind how you’d desire to interact together with your visitors and the way they’d desire to interact with you.

Let’s have a look at 4 major players who use cards. There’s some powerful takeaways from each.

Facebook

The feed on Facebook is card-based. Each card features content, the way to like, share, and add comments. It also adds in social proof. You will find what number of others liked, shared, or commented, that may influence your engagement. Quietly tucked out of ways is a drop menu that provides you the choices to cover, unfollow, and report spam.

The Takeaway: Clearly, Facebook is prompting users to positively engage and to remain connected. They don’t want you to give thought unfollowing or hiding certain cards out of your feed.

You can use cards in much the identical way-set cards as much as encourage positive interaction.

Google Now

We already know that Google is a champion of card-based design. Many apps in its infrastructure already feature cards, together with Gmail Promotions and Google Glass. Google Now takes it one step further by being completely card-based. This offering is a virtual personal assistant who reminds you of friends’ birthdays, checks local traffic and weather, tells you what to look at on tv.

The Takeaway: Most cards require action, akin to snooze, view email, wish happy birthday. Implementing a choice-to-action on the bottom of your card can improve visitor engagement because you’re guiding them down a path of action.

Pinterest

You knew it was coming! Pinterest features one of the vital popular card-based designs ever. It’s spurred numerous imitators. Pinterest is a visible pinboard that permits users to pin, or add, images onto virtual boards. Hovering over a card gives users the choice to pin it, send it, find it irresistible, or edit it (if it’s already saved for your pin board). Clicking the pin offers you more options, including the facility to go to the web site of the picture.

The Takeaway: Hover options are smart way to solicit action without obscuring the card’s image.

Twitter

Twitter cards are tweets with rich media attached to them. The media may be a photo, a suite of 4 photos, a video, or an audio, simply to name some . These visual cards attract attention in an endless sea of texts and #hashtags.

The Takeaway: Front and center, Twitter encourages replies, retweets, and favoriting but, very similar to Facebook, it obscures the negative actions, comparable to mute and block. Similarly, for your card design, focus totally on what you’d like people to do most.

6 Great Examples of Card-Based Design

Now that you’ve seen how titans of industry use cards of their designs, it’s time to watch how everyday designers like me and also you incorporate cards into their work.

Roman Shkolny’s imagined mail client interface uses cards to visually catalog emails. On this example, emails may be stacked into conversations. Hovers allow color tagging, reply, forward, delete, and more options.

Move Product by Barthelemy Chalvet features highly animated cards that may be selected, deleted, or saved for later viewing. Pop-up cards provide further prompts for the user.

Coke’s Ahh.com campaign includes a bevy of card, some rectangular, but most square, some animated but most stationary. As you click each card, it flips over to supply two calls-to-action: add to playlist or play this now.

Popular designer hangout, Dribble, includes a card-based design. The cards provide insight on what number of viewers clicked a card, what percentage liked it, and the way many comments are listed. When users hover over the cardboard, a short summary of the picture is shows, in addition to the upload date.

Silktricky is one among my favorite card-based designs because it’s just plain fun. Interacting with the cards and watching them reply to your selections makes the full design feel intuitive.

Vox gets into the cardboard game with a what they check with as card stacks. Such as slide-shows, card stacks provide a comprehensive amount of knowledge a couple of particular subject. Each individual card is devoted to reply one particular aspect of the topic. Cards are shareable and, due to their truncated size, also are easily consumable.

Conclusion

Cards are the ideal option to make your design glanceable, user-friendly, and responsive. They definitely deserve your consideration.

Now that you’ve been conversant in card-based design, will you be implementing it into your design?

There are such a lot of fonts in the market across the web that usually it’s quite challenging to select the one who would suit your design properly. Today I’d want to bring in your attention a set of 30 really awesome capital free fonts free to download.

Despite any other font types, capital fonts may be used almost everywhere, whatever form of design project you create. Fooling around with width and thickness of the font you could achieve amazing results. So, don’t waste it slow. Scroll down, choose the fonts you adore and download it completely free!

Uni Sans Free

BARON

OSTRICH SANS INLINE

Code

Bebas Neue

Blackout

Clutchee

Intro Condensed

SIMPLIFICA

Moderne Sans

Furore

0

Borg

1

Tesla

2

ADAMCG PRO

3

Porto

4

College

5

Mohave

6

Origicide

7

Primus

8

Accent

9

Manteka

0

Rex

1

Dense

2

Reckoner

3

CHE’s Bone

4

UGO

5

Glamor

6

Festa Major de Sant Boi 2014

7

FANCY ME

8

Portica

9

The CSS3 @font-face rule and services like Google Fonts have really spread out the doors for individuals to be more creative with web typography. Google Fonts has over 630 fonts available to make a choice from, and listed here, I’m going to expose you an especially easy solution to use them on your WordPress site – not they all instantly, obviously. Because that will just be crazy.

On the Google Fonts site, they do a superb job of providing instructions which are simple and hassle-free. However, following their instructions requires that you just modify the header.php or functions.php files of your WordPress theme to import the fonts. And you’ll also have to add the mandatory CSS to the way.css file. While this isn’t a very difficult task, there’s a better way.

First, you’ll must download and install the Google Fonts plugin from ThemeTrust. The cool thing about this plugin, is that it integrates directly with the WordPress Customizer, allowing you to immediately see how your typography will look as you put your fonts.

Once you’ve gotten the plugin installed, visit Appearance->Customize, and click the Google Fonts for ThemeTrust tab.

Within the panel, you’ll see eight different sections:

All Text, Paragraph Text, Header 1, Header 2, Header 3, Links, Blockquote, List Item

In each section, you may select a font and set the load for that font. There’s also a field to go into custom CSS selector. So as an instance, in case you desired to only set a custom font for the h3 tags within the footer, you could possibly enter something like this within the Custom Selectors field inside the h3 section: #footer

You also can add multiple selectors by separating them with commas, like this: #footer, #sidebar

Conclusion

As you will discover, it is a much simpler solution for using Google Fonts on your WordPress themes, especially in case you don’t get their hands dirty by editing theme files. And having the choices integrated directly into the WordPress Customizer permits you to quickly see what fonts will and won’t work together with your site.

It’s been a long time since Google Plus has changed its design, but i need to say that it’s a rapidly growing social community worth your attention, regardless of what  field you’re in. Google has to compete against fully established networks corresponding to Facebook, Twitter and LinkedIn, and as of now, they appear as much as the challenge.

Google Plus is incredibly useful for designers as they’re always working with lots of people on multiple projects and sometimes simultaneously. Usually probably the most easiest ways of maintaining an everlasting communication with the customer is thru email and chat, that is something that Google has mastered with Gmail and GTalk.

Also, it offers you free online video chat using Google Hangouts and a further thing that basically matters, – it’s portfolio feature. The Google Plus app means that you can manage your contacts and content in your mobile device with no trouble. Moreover, Google Plus’ news feed can be a great source of inspiration for designers, especially once you follow the correct people for your niche. That’s why I made this list of 20 creative web designers worth to follow on Google Plus. Scroll down and luxuriate in!

Fabio Sasso

Fabio Sasso is a Senior Designer at Google and founding father of website design blog abduzeedo.com.

Vitaly Friedman

Vitaly Friedman is a co-founder and editor-in-chief of Smashingmagazine.com, a number one blog about website design and development.

Andy Sowards

Andy Sowards is a qualified web designer, developer, and programmer. He builds websites, brands and relationships.

Alireza Yavari

Alireza Yavari is a graphic designer and e-commerce specialist from Ny. Founder and artistic director of DesignStudio23 The big apple and RecommendedUsers.com.

Graham Smith

Graham Smith is a contract logo designer on the Logo Smith: a symbol design and graphic design studio, providing professionally forged and designed: brand Identities; brand guidelines, apps, software icons, and more.

Ronald Bien

Ronald Bien is an editor and founding father of NaldzGraphics.net website design blog located at Philippines.

Mike Lane

Product designer and Senior UX architect near Minneapolis, MN with twenty years professional experience in creative UX/UI and interaction design for web, mobile, wearable and emerging technologies with an emphasis on usability, accessibility and web standards.

Leodor Selenier

Leodor Selenier is a graphic designer and illustrator, often called the curator at Bon Expose.

Tanya Varga

Tanya Varga is a contract artist based within the California Bay Area who works with both digital and conventional mediums.She currently works as a contract graphics artist, concept artist and illustrator.

Claudio Cerri

Claudio Cerri works as a contract illustrator for youngsters books, educational books, magazines, comics and advertising. Creative partner of Storybird.com.

Amitay Tweeto

Amitay Tweeto is thequietplaceproject.com creator with an enormous want to change the sector. He’s from Israel.

0

Aaron Wood

Aaron Wood is a designer and illustrator from Massachusetts. Hу consider Google plus as a playground, so you’ll discover a lot of interesting things in his news feed.

1

Khoi Vinh

Khoi Vinh is a graphic and UX designer from Ny, blogger at subtraction.com and a former design director at Long island Times. Not bad, yeah?

2

Cameron Moll

Cameron Moll is the founding father of Authentic Jobs, a targeted job board for web and artistic professionals. He lives in Sarasota, Florida.

3

Jacob Cass

Jacob Cass is a founding father of JUST Creative. On his website you’ll find his graphic works in addition to articles and resources for designers about print design, logo design, website design, branding, typography, advertising and more.

4

Sneh Roy

Sneh Roy is a winner of Best Australian Blog 2013, photographer, stylist, designer. blogger at Cook Republic, and a very good foodie.

5

Louis Lazaris

Louis Lazaris is an author, writer, blogger, and front-end developer based in Toronto.

6

Mirko Humbert

Mirko Humbert is a Swiss freelance graphic and web designer.

7

Veerle Pieters

Veerle Pieters is a Belgian graphic and web designer, author of Veerle’s blog, design lead at Fab, and founding father of Duoh.

8

Chris Coyier

Chris Coyier is an online designer from CSS-Tricks who lives in Palo Alto, CA. Write and screencast about web stuff at CSS-Tricks.

9

Conclusion

As you notice, Google Plus may be beneficial for designers and artists, and another creative people throughout the field. i’m hoping this list I shared above would enable you to remain up-to-date regarding all of the website design news and get inspiration from. There’s a chance I missed out someone really creative on Google Plus, so please, be at liberty to share the links by yourself Google Plus profiles or some prominent web designers inside the comment field below.

How does this website make you are feeling?

On the skin, it could seem that reading an editorial on a web site is an emotionless experience, but science tells us that we use emotions to notify our understanding. So, yes, you’re experiencing an emotion straight away, but what could it’s? Let’s get back to that query on the end of the object, with enhanced understanding.

What is Emotion?

In his book, Your Brain: The Missing Manual, Matthew MacDonald describes emotion because the “brain’s auto-programmed response to certain stimuli.” He carefully distinguishes it from feeling. Feelings are the style we interpret emotion. Whereas, emotion is immediate, unconscious, and visceral, feeling, nevertheless, is processed and conscious.

Why is Emotion Important In Design?

“I’ve learned that folks will forget what you said, people will forget what you probably did, but people won’t ever forget the way you made them feel.”
-Maya Angelou

Emotion has the facility to foster an enduring relationship along with your visitors. In the event you can elicit an emotional response from a visitor, he’ll remember the experience long after everything else has faded.

Take a glance at these websites:

Mahe

You start off with a wonderfully lovely view of Paris-but nothing we’ve haven’t all seen before. What makes you sit up straight and take notice is the animation effect. It’s simply beautiful and surprising. Although you are able to not remember everything about this site, you’ll certainly remember the sensation of surprise as you scrolled down for the 1st time.

Iugo

No music, just flight. Who doesn’t love travelling through clouds without leaving your seat? This almost seamless video evokes excitement and anticipation-you’re heading somewhere, you simply don’t know where. I can’t inform you how long I’ve stared at this video (it might be embarrassing). The takeaway is this site stirred my emotions, held my attention, and left an enduring impression.

Before They

I dare you to drag up this website and never scroll through. Stunning, high-resolution images and intuitive design tell a narrative that appeals on your emotions.

A recent study on patients tormented by hippocampus damage, which include Alzheimer’s disease, shows that emotions linger even after memories fade. Although a visitor won’t remember everything you’ve said, they’ll remember the sensation. That feeling will make them return persistently.
The point of all design is to interact viewers. Engendering positive emotions may end up in longer visits, higher engagement, and more excitement about your product.

Important Components of Emotional Design

Many people depend on text to form emotional bonds with their visitors, but text alone just isn’t enough to create emotion.

Even on a domain like Zen Habits, that is famously minimalist, it’s emotional appeal doesn’t derive solely from text. As a reader, you’re feeling at peace, or zen, at the site as it was designed in the sort of way as to awaken that emotion within you. There’s no sidebar. There’s no images. But, there’s white space, and plenty of it. It feels pure, authentic, and truthful.

As you may tell in Leo Babuata’s design, font type, size, and spacing could make an impact in your emotions. On Zen Habits, the design is intentionally breathable and open. Nothing is cluttered. His typography supports the design but additionally tells the similar story.

What does your font say?

Fonts is usually friendly, serious, smart, and unfortunate. Fonts could be separated into loads of different categories, but for the aim of this text, we’ll discuss the four major categories: Serif (has embellishments at the ends of letters); Sans Serif (without serifs, or embellishments at the ends of letters); Script; and ornamental.

Serif fonts convey traditionalism and respect. Think  Times New Roman:

Sans serif fonts are decidedly more modern. Think Calibri:

Script is sophisticated and will be conservative. Think Pacifico:

Decorative is whimsical and inventive. Think Impact Label:

(images courtesy of Wikipedia Images and FontSquirrel)

Which emotion are you hoping to elicit to your design? If you would like respect out of your visitors, elect fonts like New Times Roman or Garamond. On the way to them to view you as creative, try a font that pushes the envelope, like New Facebook or Base 05.

Fonts should echo your design intention. Fonts, like love interests, shouldn’t ever be randomly chosen in keeping with looks. They must manage to further your emotional story.

What about colors?

Color is, undoubtedly, the most effective solutions for introducing and extending emotional response in your website design. Science has proven again and again that humans equate colors to emotions. Why do you think McDonald’s logo yellow and red? It elicits hunger and optimism.
When a user first visitors your website, they get an impression of who you might be, and create a technique during which to narrate to you. Colors, fonts, and other visual design choices automatically set the scene-they’re just like the clothes of an internet site.

For example, in the event you visit Wikipedia, you can find by the blue and grey color scheme that it’s dependable and reliable. You are able to surmise by the font choice and size that it’s serious and smart. And you may also tell by the photographs that it doesn’t pay for stock. I’m joking, sometimes Wikipedia has great images, but imagery isn’t the focus point of Wikipedia. The guts of Wikipedia, and all websites, is the content. i myself wouldn’t need to sit next to Wikipedia at a celebration. Imagine how boring that may be. But, Wikipedia will be an amazing friend to text. (More about that, later.)

Another example is Yelp, which uses blue and red primarily. What do those colors say together with what we understand about Yelp? It’s looking to be trustworthy and to seize your attention. Red definitely pulls the attention to the important thing feature of Yelp-the reviews. Although red could make you hungrier when you’re interested by food, it would also grab your attention even if you’re not hungry.

0

Some websites are green and blue. One example is TripAdvisor, which uses these colors to convey a feeling of relaxation (you’re going on vacation, of course), and trust (you’re reading actual reviews from other users).
Have you spotted the rage? Blue will likely be utilized in website design to speak trust and dependability.

Let’s look at how colors engage our emotions:

• Yellow: Happy, Optimistic, Clarity,
• Orange: Friendly, but adore it or hate it
• Red: Exciting, Youthful, Urgent, Attention Grabbing
• Purple: Creative, Imaginative, Uplifting
• Blue: Trustworthy, Dependable, Secure
• Green: Peaceful, Growth, Relaxing
• Gray: Balance, Neutral, Reliable, Intelligent
• Black: Luxurious, Powerful, Authoritative

A lot folks choose colors because they compliment one another, or simply because they’re pretty, but when you pick the incorrect color, it is able to send out a mixed emotional message for your visitor. For instance, most online e-commerce businesses, like PayPal, Stripe, and Authorize.Net prominently use blue of their designs, and avoid the colour red- that’s exciting but not necessarily secure. At the flipside, there are financial sites like Bank of America that uses red prominently. Bank of America uses red exclusively to sell products, however it does balance the sense of urgency created by red with healthy doses of blue (security) and grey (reliability).

Referring back in your color choices, are you able to see how your design is exciting those emotions?

What about content?

Long gone are the times of busy, over cluttered designs. Now it’s all about minimalism, which puts more emphasis on typography. That’s why it’s important to be using the best fonts. Below you’ll find 7 free fonts that that needs to work well on your minimalistic designs

Separator

Helsinki

Equal

Dual – 300

Viro

Ankle Sans

Encode Sans

There are such a lot of how one can present website content to the general public. Let’s take a better study websites that feature square and rectangular elements. Most commonly, square blocks are utilized in portfolio and e-commerce websites as it’s the most effective method to organize and showcase a huge variety of works, comparable to designs, photographs, products, etc. Squares and rectangles make things clear and intelligible.

Boxed shapes on a web site can be interactive, meaning they react on mouse over or mouse click. It could add more usability and emotions on your design. Users love websites which reply to them somehow, despite the fact that it’s just highlighted in an extra color while you hover over the image. It’s better to determine than to listen to – an image paints 1000 words. So, look at these 20 creative websites featuring square elements to get inspiration from.

NKI Studio

Esseninternational

Good Morning

GlossyRey

fh studio

Art of The Cap

Geox Amphibiox

Names for Change

Nedd

HelloHikimori

Cropp

0

mojotech

1

Mustafa Demirkent

2

ELI

3

La Vie a LA Fresh

4

Lois Jeans

5

The Hungry Workshop

6

Etch Apps

7

Hommard

8

Far from the Tree

9

Creating a symbol isn’t very that easy because it could seem on the first glance. It requires loads of refinement and improvement before the general logo comes. Ink and a white piece of paper are the appropriate tools for creatives to get inspired. No program can provide the identical sort of freedom as paper does.

Most graphic designers put their ideas on paper first, after which edit them with Photoshop, Illustrator, or other digital editing programs. The principle goal of any logo is to be remarkable, memorable and straightforward collectively.

Here are 20 wonderful logo sketches from everywhere in the web that may inspire you on your next project which needs illustrations of any kind. Don’t pass by our previous number of typography sketches!

1. LogoPack 2013 by Mike | Creative Mints

2. PopChicken Gourmet Express // Identity by IndustriaHED™ Branding

3. AppleJack Logo by Artua

4. DANGERDUST BRANDING by DANGERDUST

5. Map pins – heart by Eddie Lobanovskiy

6. The Fitness Lab by Matt Vergotis

7. Logos 2012 by Mike | Creative Mints

8. Mission Oaks Cafe Sketchin’ by Mike Jones

9. Chalet Monticello by Jackson Alves

10. Hand Lettering by Valentina Badeanu

11. PizzaLista – 2013 by DotHaus

0

12. Ink & Paper – 2014 by Alexandre Godreau

1

13. LOGO by Gülsah Alcın

2

14. Logotypes & Icons by Mike

3

15. AspireBoard sketches by Eddie Lobanovskiy

4

16. Logos by Ink Ration

5

17. Logo Design by Eddie Lobanovskiy

6

18. ARTY by Andrey Anikanov

7

19. Logotypes collection | 2012-2013 by Mike

8

20. Logotypes by Mike | Creative Mints

9

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.