Social Media Sharing Icons Influence Web Designs

Last weekend I participated in my first hackathon ever. Do you know what hackathon is? It’s a 24-hours long marathon where people with money (investors) look for potentially successful development projects. So me and my friends had to build and to present a more or less ready-made project (both from development and business point of view), so that investors would want to spend their money on it. On one of the latest stages of the project development our developers and designers disputed a lot about social media icons to choose. Nobody wanted to give in. This argument gave me an idea to pay more attention to social media icons in web design. What can they look like? What are they really used for? Why do web developers doubt about them?

Social media sharing icons influence web designs

The Anatomy of Social Media Icons

Actually, social media icons are links which are illustrated with logos of social networks. That’s quite understandable.

Social media icons represent several different functions. Sometimes it’s a link to company profile page/account in a social network. Often you can see “Follow us on …” or “Join us on …” titles around them. In this case icons are placed at the top or bottom of web pages. They can be also placed in a sidebar. As a rule of thumb that they are visible within the entire website.

New York Times

Social media sharing icons influence web designs

Lucius


Social media sharing icons influence web designs

Also social networking icons can share specific website page’s content within users accounts in social networks. Such icons are always used by blogs and online stores. There are also two types of such icons:

    • ordinary social media sharing icons;

47 Brand

Social media sharing icons influence web designs

    • icons for social sharing counter buttons.

Design Web Kit

Social media sharing icons influence web designs

Frankly speaking, it took a lot of time to find a website with ordinary social media sharing buttons. It seems that both web developers and site visitors prefer counter buttons. But if you doubt that you can provide a good level of social engagement you shouldn’t use social sharing counter buttons. An article with a few or even zero shares/likes looks dull. People are inclined to share posts and goods with a large number of people who’ve already appreciated it (I mean the ones with many likes, tweets, shares, pins, etc.). So if the brand you’re working with is not popular on the web you should choose ordinary social media sharing icons. Later they can be changed to counter buttons.

Note: social media icons can be placed below the article title, under the main text or they can be arranged in a floating social media sharing bar in the left hand side of the page.

Search Engine Journal

Social media sharing icons influence web designs

You know, there are hundreds of social media plugins you can set up on your blog or website. There are some plugins which allow to choose small or big, colorful or monochrome icons. You should just watch over icons similarity: size and style does matter.

If you want to add counter buttons to your website or blog you can always use some of the following “counter” generators:

Icons Relevance

When it comes to social engagement you should clearly understand subject areas of every single social network. For example entertainment social media icons don’t fit business websites (in most cases you don’t want to place Pin It button at a financial consultancy business website).

Architex

Social media sharing icons influence web designs

Better Homes and Gardens

Social media sharing icons influence web designs

Sometimes it happens that web developers apply icons of apps and services into designs forgetting that those ones are not social networks.

Social media sharing icons influence web designs

For sure, you may say that services which are presented on the pic above have some social component. But they are not social networks in a common understanding of this word and that’s why it’s a bad idea to mix them in web designs.

Personalized Social Media Icons

The majority of social media icons in web design look rather ordinary. It happens that web designers and site owners don’t pay attention to these small elements properly. But unique and interesting social media icons can bring you new customers and additional free advertising.

There are some examples of social media sharing icons integration in website designs.

Flint Boutique

Social media sharing icons influence web designs

Solid Soup

Social media sharing icons influence web designs

Wild Bill’s Soda

Social media sharing icons influence web designs

Flicka.cz

Social media sharing icons influence web designs

Be Social. But Not Too Much

It’s not a secret that the more social shares your website has the higher it is ranked in search engines and the more visibility it receives. As long as social media buttons are a kind of a magic wand some blog owners apply them excessively. Frankly speaking I’ve never seen common websites (not blogs) using a lot of social media buttons that’s why now I appeal to the bloggers – don’t use too many social media sharing buttons.

Social Media Mess

Social media sharing icons influence web designs

The main reason why you shouldn’t use too many social media sharing buttons is human psychology. Nobody will share your post via all of his/her social media accounts. People will choose one or two of their favorite networks to bookmark your content. But when users see a grid of different social media icons it drives them into a low spirit. Why should they click all those buttons? An average user doesn’t even know what all those icons are used for. It’s irritating and people will more likely leave your site with no social interaction whatsoever.

Moreover, so many options to choose from can puzzle people with a question which button to click. On this stage people don’t want to think, they just want to click the button and to go further. Or more like it’s you who wants them to click these buttons.

The other reason is page load time. If you’re a web developer you probably know that you need JavaScript to make social media buttons work. The more buttons you paste on web pages, the more script pages need to load and the higher their loading time is. Site visitors and search engines like to see fast websites, so you shouldn’t disappoint them.

RSS Reader Icon

Let’s take a closer look at the RSS icon. This white and orange button allows users to stay up to date with the latest news and upcoming events of websites they are subscribed to. RSS feed presents a lot of information in a convenient user-friendly form. It can be edited and displayed by RSS feed aggregators (news reader, feed reader, news aggregators, RSS readers). People can’t share content via RSS – it’s a one-side communication. So it is incorrect to place RSS icon among social media ones. You should better visually separate it from others. It’s also ok if you place the RSS icon the first or the last one.

Internet Cafe

Social media sharing icons influence web designs

Bartelme Design

Social media sharing icons influence web designs

Google+ Icon

Social media sharing icons influence web designs

You should also understand the difference between Google plus and Google +1 icons. The first one links to the company’s/website’s profile in the Google+ social network. The second icon is a counter button similar to “Like” button on Facebook or “Tweet It” on Twitter.

There is also another Google + button that you can find on the web.

Social media sharing icons influence web designs

It is an old Google + design that you shouldn’t use in your web projects these days. The red square with white “g+” is a new standard to sign this network.

That’s pretty much all I wanted to tell you about social media icons for now. Probably you’ll never have a problem with integrating your social media contacts into your website design. But it can happen that this info will help you to create a more successful website. At least I hope so. Good luck!

About the Author:

Ann Davlin is a young inspired blogger who is always willing to try new things. She works at MotoCMS – an advanced Flash CMS and website templates provider. And if you are a fan of web design (like Ann is) you can always follow her on Twitter (@SmilingAnny) or Google +

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

8 Responses

Comments are now closed on this post.

  • Rob Brogan, January 15, 2013

    Also, as I understood it, the difference between those G+ and +1 icons are that one is for social sharing on google’s network, and the latter increases page rank on the search engine for users signed in and connected to you. Meaning, if I hit that +1 button, and I’m in one of your google plus circles, then if you ever google something related to that site, my +1 and our connected-ness will give the page priority over natural results. I could be wrong, but I remember being confused by the different buttons when google plus first started and the whole notion of friend recommendations playing with search results.

  • Just Being Creative, January 15, 2013

    It’s interesting to see the different use of social icons on different websites. Thanks for sharing! Also, can I say…. I loved the design for the Flint Boutique website and how they’ve presented their Facebook link.

  • Ann Davlin, January 16, 2013

    @Rob, you are right. I guess everybody was confused at the early beginning of G+ customizations. There are many people that still have troubles with Google +

  • Tauqeer, January 20, 2013

    yes, you are right social media plugins in websites plays an important role to get your site on the top … thanks for sharing .

  • Nashua Indigo, January 20, 2013

    Google plus and Google +1 icons.Yes it is confused but that is the same for facebook likes and facebook shares, it has the same icon

  • Ann Davlin, January 22, 2013

    @Nashua, that’s true! But nobody is confused with Facebook icons. That’s a strange thing, indeed

  • Kirk, February 17, 2013

    Thanks for explaining G+ sharing guidelines. I think the one people are most confused about is actually Twitter. Twitter has very strict guidelines about using their logo, size spacing and color. Many of the examples referred to something that is not their logo, can you dive into that in a future addition to this article?

  • Pam, February 28, 2013

    I love the creative personalized icons in your examples but what about the officially approved icons for these social sites? Are designers just encoring their icon requirements?

Close