Determining the Best Placement for Your Social Media Icons

How many websites have you been to where you’re searching for social media buttons and just can’t find them? It’s not until you scroll all the way down to the bottom of the page that you see them nestled in the footer. Sometimes, they’re so tiny that they might as well not even be there at all. Obviously that is not optimal placement. If you’re wondering where to put social media icons on website layouts and what that optimal placement is, then you’ve landed on the right post.

Social media is too important to relegate to the bottom of your website. Social media buttons deserve a prominent position somewhere. They don’t have to be in your face, but they should definitely stand out and be easy to find. If a site visitor likes the content they’re viewing and wants to follow the owner or brand on Twitter or Facebook, they should be able to do that without having to play detective.

With that in mind, let’s spend some time today talking about everything having to do with social media icons. We’ll review the types available, where to put them on website pages, how your industry might impact your decision-making, and more.

📚 Table of contents:

• Why social media buttons matter?
• How often do visitors use them?
• Types of social media icons
• What about the icon placement?
• The industry effect
• Icons and share buttons might not be enough
• Evaluating for effectiveness

Why social media buttons matter?

Social media web icons have been around for a while now. At first, many people weren’t aware of their full potential. They were added simply because it was thought that they made a nice addition to a clean website design. Today, we’re well aware that the presence of social media icons results in additional mentions and shares. The data to support this goes back more than a decade at this point.

For example, way back in 2011, HubSpot reported that including a Twitter share button increased Twitter mentions sevenfold ^[1]. That’s huge and the trend has not slowed down over the years.

However…don’t neglect quantity

At the same time, there’s a sweet spot to be found with this. You can’t go overboard because too many social media buttons can have the opposite effect. This is due to a phenomena known as “decision paralysis”, where site visitors feel overwhelmed and don’t use the social shares at all.

Just to give you one example, QuickSprout has reported that in some experiments when adding two new social media web icons for LinkedIn and Pinterest (on top of the original lineup) social shares dropped by 29 percent ^[2].

The takeaway is that having success with social shares isn’t only about social media icon placement, but also about other details. The big picture involves balancing how quickly site visitors can notice the icons versus how easy it is to share without being overwhelmed by too many options.

How often do visitors use them?

Obviously, our main goal with social media buttons is to not only have them sitting somewhere, but to convince the visitors to use them and share whatever they’re reading at the moment.

So, do people really click those share buttons?

In short, yes. But the specific results depend heavily on the niche and the type of site they’re being displayed on. In general, we can expect anything from 5 percent to 40 percent of tweets for any given piece of content to come from tweet buttons displayed alongside the content itself.

This graph by Joshua Benton illustrates the social media results from 37 news sites ^[3]:

To quote the original source:

The Y axis is the percent of the 1,000 most recent tweets that Twitter says were generated by a Tweet Button. So, 16.3 percent of those tweets to nytimes.com (The New York Times) came from such a button, versus 20.2 percent for wsj.com (The Wall Street Journal).

Therefore. Should you enable some form of social media web icons on your site? Of course!

Types of social media icons

There are two types of social media web icons that are most often used in web design: profile links and share buttons.

Profile links

These can take any number of forms from just the social network’s icon to the icon plus the network’s name. Even a custom icon can be devised to better reflect your brand. The type of site and the space allotted for social icons will determine what option is best for your situation. Regardless of the design specifics, the bottom line is that they facilitate a connection between site visitors and site owners’ social profiles.

An example of profile links:

Share buttons

On the other hand, social share buttons do not take the site visitor to your social media profiles. Rather, clicking prompts them to share the current page on a specific social network. Every social network has these share social media buttons available. They can be installed via plugin or even through an external service like Buffer. They’re important for expanding the social reach of a site, which in turn helps to grow an audience.

Example:

What about the icon placement?

The positioning of social media web icons can spell the difference between building social engagement and missed opportunities. There are actually only a handful of locations for social icons that are considered prime real estate. So, where should you put social media icons on website layouts?

Header

The header is what grabs your site visitors’ attention first. Social profile link icons are a natural fit along with the title of the site and the main navigation menu.

Sidebar

Positioning social icons near the top of the sidebar is another way to quickly ensure visitors see them. The benefit here is they can be prominently displayed with a widget header like, “Follow Me!”

Above or below posts

If you want to ensure social engagement, placing share buttons above and/or below blog posts is a good way to accomplish that. If you’re wondering where to put social media icons on website pages in order to make the most out of them, this is also the most popular way to go about displaying share buttons. You will find examples of this on sites like TechCrunch, The Verge, Mashable and countless others.

Floating bars

To ensure your site gets the maximum number of shares possible, installing a plugin that provides some sort of a floating bar is a good solution. The idea behind a floating bar is that it always stays in the visible area of the screen as the visitor scrolls up and down the page.

The point here is to keep the social engagement links within the site visitor’s view. They should be within easy reach. If the content is lengthy, then having the icons only in the header and footer doesn’t qualify as being “within reach”.

There’s a really nice example of this on ReadWrite. If you visit the page from a desktop, you will see the bar on the left. Visiting it from mobile will show only social media buttons above and below the post.

Looking for something even more interesting? How about a cool fading-in effect like that used by Upworthy?

This gives the social media web icons extreme visibility as they literally jump right at you. When you scroll down, a banner appears across the header that prompts visitors to share the page on Facebook. There are several plugins you can use to achieve this.

The industry effect

While every company in every industry can benefit from social media engagement, not all are created equal in terms of how social media is utilized. For instance, a corporate website wouldn’t use the floating bar-style share icons because it doesn’t offer a professional look. And a team-based site – a lawyer group, for example – would probably not be able to use the sidebar icons because those typically appear below an author bio and/or headshot, making them seem out of place.

Industry quirks notwithstanding, the upper right hand side of the page seems to be the best placement for social profile icons, over all. This shouldn’t really be surprising. Online visitors expect the elements of a web page to be where they are used to finding them based on prior user experience. This definitely supports the “upper right hand side” idea.

Icons and share buttons might not be enough

You actually have more options than just icons that link to your social profiles and social media share buttons for making the sharing of your content easier for your site visitors. So, more than just asking yourself where to put social media icons on website pages, you can also consider embedding social feeds – often in your sidebar – to attract further attention for specific social accounts. This has the added benefit of placing even more original content on the site, which is a definite bonus.

You can easily pick up the Twitter API to show a tweet stream or use the Facebook Like Box to showcase her latest posts right in any widgetized area on a site. A sidebar is the most common choice in terms of positioning but you may find embedding this content into a page dedicated to social feeds to be best.

Evaluating for effectiveness

As with anything on the web, where to put social media icons on website layouts is a question that needs to be tested to see if it’s effective. Analytics are one of the best ways to accomplish this. Actually, side-by-side split testing is your best bet for getting a direct impression of how effective the social media web icons are on your sites.

A/B testing

You can set up an A/B test using a plugin like Nelio Testing. One version of the page could feature the icons in the header and one could feature them in a sidebar. Alternatively, you could have one page sport the share buttons at the top of a post and another could feature a floating share bar. However you choose to go about it is up to you. The bottom line is that testing is the only way to see what works, what doesn’t, and what you need to adjust to increase social sharing. The test results will provide you with insights into where to put social media icons on website pages in order to drive optimal engagement.

UX analytics

Another analytic site, Mouseflow, offers live tracking, click and move heatmaps, and in-page analytics. When combined, this data gives a comprehensive overview for each page of your site. Because all web pages are not created equal, the type of content will determine the type of viewers your site will attract.

How they navigate that site will depend on whether it is something like a medical peer review site or a retail specialty store. In other words, the type of site is a factor. Knowing how viewers behave, where they click, and where they spend most of their time on the page is vital. It will help you further determine where to put social media icons on website layouts that you’re in charge of.

Conclusion 🧐

As I’m sure you can tell by now, a successful positioning of social media web icons and social media share buttons relies on a variety of factors. You might need to spend some time thinking about it, but it’s a worthwhile pursuit. Ensuring your website gets the maximum number of social shares possible – as well as the maximum number of follows and likes – is good for business. So you might as well put in the effort to do it right.

What have you found to be the best spot to feature social icons? What about share buttons? I’d love to hear your opinion on where to put social media icons on website pages in the comments below.

Interested in trying something unique? You should consider creating a sticky social media share buttons.