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!

Blog comments – YES or NO?

Should I allow blog comments on my blog? I mean, at all?!

Only 5 years ago, this might have been a stupid question to ask. But, many things happened in those 5 years. Like comment spam and social media sites.

Trends affecting blog commenting

Comment spam

  • In 2007: Just started to be a issue. Only a handful of spammers used automation tools.
  • In 2013: Automated comment spam reached enormous proportions, becoming one of the biggest issues and—if not properly handled—a time waster for webmasters.

Social media

  • In 2007: Most social media sites were non-existent or in diapers. Only a small portion of the population used them frequently.
  • In 2013: Everybody and their cat are on social sites. Most conversations are happening there, but tools emerged that allow their integration into a blog.

Of the two trends above, the latter one—proliferation of social media—has probably the biggest impact on my decision making. Just consider that in 2012 almost twice as many people blogged via social networks than via blogging websites. I can only assume that this trend is still on the rise.

The impact of social media sites is so big that, in fact, some people apparently question the very reason for having a blog in the first place, and advocate using social media, instead. So, it is no wonder that some prominent bloggers feel the need to publicly step up and defend the idea of having one’s own blog.

Anyway, I already knew I want to have my own blog. So, right now, I am concerned only about blog comments.

Should my blog accept comments?

What do the Top 100 Technorati blogs do?

I figured that in addition to trying to make sense out of all the biased opinions for and against enabling blog comments (examples here and here), I should also look at what some of the most popular sites do in practice.

So, I pulled the latest list of Top 100 Technorati blogs, visited each site and studied how they approach blog comments. Below is a summary of my research.

1. 9 out of 10 sites allow comments

Top 100 Technorati blogs: Comments ON vs OFF
Top 100 Technorati blogs: Comments ON vs OFF

90% of studied blogs allowed comments. Of those that did not, most were either arts related or political. While it would be easy to simply conclude that blogs about politics and arts should not have comments open, there were enough of these blogs allowing comments in the remaining 90% of Top 100 Technorati. So, there really isn’t any clear correlation between a blog topic and (dis)allowing comments.

Looking closer into the issue of allowing vs disallowing blog comments, I was surprised to find that some very popular marketing personas do not allow comments on their blogs. Like Seth Godin.

Also, one concern I heard from Joost de Valk, is that blog comments mess up your on-page optimization, possibly causing the page to rank lower in the search engines.

At the same time, comments help build relationship with your audience and also increase the amount of time they spend and interact on your site. Which is, I believe, the main reason why most Top 100 Technorati blogs allow comments.

2. Most sites rely on their built-in commenting system, but 3rd party comment hosting services are on the rise

Top 100 Technorati blogs: Commenting System
Top 100 Technorati blogs: Commenting System

While most blogs use the commenting system that came in with their chosen CMS (e.g. WordPress), there is a strong tendency among top blogs to use 3rd party comment hosting services. The clear winner in the hosting category is Disqus with Livefyre running a distant second. It seems that most webmasters prefer Disqus because it’s free and offers a better integration into the site.

Personally, I’m a little baffled by the popularity of 3rd party comment hosting solutions. And, it seems I’m not not alone. WP Beginner has a good write-up of reasons why they swiched back to built-in commenting. I also liked this more general comparison between 3rd party comment hosting services and the native WordPress commenting system. For me, their reasons are rather convincing.

I would sum up my main concern about 3rd party commenting systems as follows: why should I worry about integrating a foreign application into my site—and then depend on it for my comments—when the built-in solution, plus a few plugins, can do the same (if not a better) job?

3. Most sites require users to log in, but enough sites allow commenting anonymously

Top 100 Technorati blogs: Anonymous vs Login Required
Top 100 Technorati blogs: Anonymous vs Login Required

I expected a stronger tendency towards required logins. Yet, almost half of the sites still allow users to comment just by submitting a name and an email address. Technically, this is not anonymous, but since users can submit any name and/or email they want (even a fake one), in practice this amounts to an almost complete anonymity. The only give-away is their IP address, but that can be cloaked, too.

Since, obviously, anonymous commenting is the “stuff spammers’ dreams are made of,” these sites must either have (1) very good spam filters, (2) strong comment moderation policy, (3) name/email verification process, (4) lots of free time on their hands, or (5) any combination of the above. Keep in mind that we’re talking about sites each of which receives many thousands of visitors per day!

Unfortunately, I didn’t try to post comments to the Top 100 Technorati blogs, so I don’t have any insight into how they handle anonymous comments (stay tuned, though; maybe I will do it later).

4. Social accounts are the most popular login option

Top 100 Technorati blogs: Login Options
Top 100 Technorati blogs: Login Options

For me, this was another surprising finding: more sites allow users to log in via their Facebook, Twitter and/or Google+ account than via a local account.

Yes, the vast majority of their audience is already on Facebook, Twitter or Google+. But, is the audience willing to use their social accounts to log in to 3rd party websites? More so than creating a local account?

Apparently so. According to not-so-unbiased report from Gigya…

Consumers have clearly demonstrated that they want to use their social identities across the web, they also demand the ability to choose from a variety of identity providers when they register and log into sites.

Then, there is the question of user engagement. Already in 2011, Gigya reported that users logged in with a social network spend more time on site and view more pages than not logged-in users or users logged in locally. If true, this is an extremely important piece of information!

Overall, my guess is that sites in the Top 100 Technorati know why they offer multiple login choices and why they sometimes don’t even give people the option to create a local account.

So, where does this leave me and my blog?

It seems that, based on the above, my conclusions boil down to this:

  1. Enable comments only when I want users to interact. Otherwise keep them closed.
  2. Use the built-in WordPress system in combination with a plugin that allows users to log in with as wide a variety of their social logins as possible.
  3. Allow anonymous comments, but implement a strict comment moderation policy and a solid anti-spam solution.

In the spirit of my conclusions, I am leaving the comments on this post open, because I want your opinion and perspective (hint hint).

I will continue researching this topic further and update this post as I discover new information and facts or come to new conclusions.

Till next time!