Social icons – what, where and how?

Last week, I wrote on the topic of blog comments. This week, I picked social media. Why? The reason is simple…

Everybody (and their cat) is on social media

According to research, 67.7% of all Internet users are currently using social networking sites at least once a month and the number is expected to increase to a staggering 78.7% by 2017. The right question to ask is not, who is on social media, but, who isn’t.

Additionally, of the 42+ hours average Americans spend online every week, 20% is spent on social networking. That makes it the most popular online activity worldwide.

Therefore, it is without any doubt that social media must be a part of your overall business’s strategy. Simply put, you need to be where your customers are.

Focus: social media icons

I expect to be working on my social media strategy later this year. Right now, however, my main interest is in social media icons (also called social networking icons or social sharing buttons).

You see, I want to make my blog’s content more visible to social media users. That means, I need to give them an easy way to share and talk about my content. And, that means, strategically placing social media icons throughout my site.

Specifically, what I want to know is this:

  • What social media icons should I use?
  • Where on my site should they be present?
  • What kind of design should I use for the buttons?

What do the most popular blogs do?

Just like for my previous post, I again researched the Top 100 Technorati blogs to see what the most popular sites do in practice. My hope is that they have tested the selection, placement and design of their social media icons. So, if I copy what they do, I will save myself a lot of time and effort that I would otherwise spend testing.

Without further ado, here’s how the most popular blogs use social media icons…

Btw, the below research looked only at the use of social icons for sharing/liking/tweeting individual posts, not entire sites (I might look at how social buttons for entire sites are used sometimes later).

1. All sites, except one, used social sharing buttons

Top 100 Technorati blogs: How many display social media icons?
Top 100 Technorati blogs: How many display social media icons?

I was more surprised by the one site not using social media icons than I was by the fact that all other sites have them. Social icons are a no-brainer, in my mind. No wonder that most of advice on optimizing blog posts for social media lists adding social sharing buttons as the first thing (examples here and here).

2. Placement depends on content length

Top 100 Technorati blogs: Where do they display social media icons?
Top 100 Technorati blogs: Where do they display social media icons?

After seeing this, my first thought was, “Oh my God! These sites didn’t test their placement!” The numbers were all over the place! No clear winner or looser. Upon closer examination, however, it became apparent that the main factor in placing social media icons is the length of the content. While longer content—one requiring scrolling—had usually social icons placed both, on top and at the bottom of the post, shorter content was a mixed bag with pretty much even distribution between top and bottom.

3. Horizontal design beats vertical design

There are 3 design elements that together combine into the final way how social media icons are displayed on the Top 100 Technorati blogs:


  • Top – near the top of the document
  • Bottom – near the bottom of the document

Icon display:

  • Horizontal – icons are listed next to each other, on one (rarely, more than one) line.
  • Vertical – social icons are listed under one other, each on a separate line.

Content area:

  • Main content area – icons are displayed either above or below the post title, below the featured image, inside a box either floated to one side or placed inside its own column, below the post body, below the author’s bio.
  • Scrolling – icons are placed inside its own box that “moves with you” as you scroll down the document; in other words, the social media icons are always visible regardless of where you are within the document.
  • Sidebar – icons are placed inside the site’s sidebar, along with other sidebar content.
  • Footer – icons are placed inside the site’s footer, along with other footer content.

Based on the data collected from the Top 100 Technorati blogs, there are the following 8 design types:

  1. Top, Horizontal, Main Content Area – Example
  2. Top, Horizontal, Scrolling – Example
  3. Top, Horizontal, Sidebar – Example
  4. Top, Vertical, Main Content Area – Example
  5. Top, Vertical, Scrolling – Example
  6. Top, Vertical Sidebar – Example
  7. Bottom, Horizontal, Main Content Area – Example
  8. Bottom, Horizontal, Footer – Example

So, which of these 8 design types and their variations are most popular with the Top 100 Technorati blogs?


Clearly, the data shows that horizontal design placed within the main content is the most popular. Furthermore, you don’t find any vertical design in bottom placement.

But, why some sites decided to place the social media icons inside the sidebar is beyond me. It doesn’t even matter whether the design is horizontal or vertical. Simply, visitors are much less likely to look at the sidebar. Thus, the likelihood that they will notice the social sharing icons is much less than when placed within the main content area. Yes, you can apply design tricks to draw more attention to your sidebar. But, this has the downside of interrupting your reader and moving them away from your main content.

Another thing that surprised me, was that there weren’t more sites using the scrolling design variation. I can only guess that it was outperformed by other variations during testing.

As a side note, I sometimes come across sites that have parts of the content obscured by the social icons. This is due to the fact that I’m browsing at a narrower screen resolution and the main content area doesn’t adjust appropriately to the screen width resulting in the social icons area overlapping the main content area. While this issue is obviously bad for usability, in theory it could in fact increase social sharing, as the icons are practically impossible to miss (since they literally get in your way). Unfortunately, I didn’t find any data or other material about this issue on the Web. If you know any worthy read or have done your own testing, please let me know.

4. 3-4 icons on top, 5 at the bottom

Top 100 Technorati blogs: Average number of social media icons
Top 100 Technorati blogs: Average number of social media icons

The average number of social media icons is similar for all 8 design types. The only exception is the scrolling variation, which averages a much higher number of displayed icons.

However, when looking at a distribution graph of how many sites display how many social icons, more differences between top and bottom placements emerge. While in the bottom placement, a disproportionate number of sites show exactly 5 social media icons, in the top placement, the number of icons are closer to 3 and 4.

Top 100 Technorati blogs: Distribution of sites by number of icons displayed
Top 100 Technorati blogs: Distribution of sites by number of icons displayed

5. Twitter is the most popular service

Top 100 Technorati blogs: Most popular icons - Top
Top 100 Technorati blogs: Most popular icons – Top
Top 100 Technorati blogs: Most popular icons - Bottom
Top 100 Technorati blogs: Most popular icons – Bottom

Twitter is the only service with its icon present every single time, regardless of placement. In other words, anytime a site offered social media icons, Twitter was among them. This is an amazing display of confidence in the 140-character microblogging service among the Top 100 Technorati blogs.

Top 100 Technorati blogs: Facebook Likes vs. Shares
Top 100 Technorati blogs: Facebook Likes vs. Shares
Top 100 Technorati blogs: Google +1s (Recommend) vs. Shares
Top 100 Technorati blogs: Google +1s (Recommend) vs. Shares

Another interesting thing is the strong dominance of Facebook Likes and Google +1’s (Recommend) over Shares in the top placement, while in the bottom placement, Shares become much more prominent and almost on par with Likes and +1’s.

Equally interesting is how rarely both, Like and Share icons (or +1 and Share, for Google+), are offered together in the same menu. It seems, that if a site has social icons in both placements, they tend to offer one icon (usually Like) in the top placement and the other one (usually Share) in the bottom placement. This trend is very strong in case of Facebook, but Google+ displays similar, although a much weaker, tendency.


Based on this research, my conclusions are the following:

  1. Social media icons are a must – I will definitely display them.
  2. Visibility is important – because my posts tend to be longer and require scrolling, I will display social icons both, near the top and the bottom of my posts.
  3. Variety is important – not only I should list icons for multiple services, but I should also offer a choice between Like and Share for Faceboook and Google+.

Please stay tuned for the implementation phase!

Also, a number of questions remain unanswered. For example, one set of questions concerns the actual design of individual icons:

  • Should I use the official icons as provided by the services or design my own that better fit my site’s design visually?
  • Should the icons display the actual number of shares/likes/tweets, or is it better to omit the actual figures?

I will update this page as I continue researching these and other questions. In the meantime, if you have an opinion or come across valuable material regarding social media icons, please leave me a note in the comments section below. Thank you!

Till next time!