Best practices where to place social media buttons

When I design web templates and responsive designs, social media buttons always have to be a part of the story. The place for these can have a high impact on the social engagement and the popularity of the post or the whole page.

Since people are blogging and the social media platforms arised to the big players of the web, nearly every blogger is addicted to implement social sharing options in his posts.

We all want more of the cake!
And the more levels on which we can spread the bigger scope is possible, so no one wants to miss the advantage of social traffic.


Many bloggers do not want to deal a long time with this matter and just install a random wordpress plugin that promises nice social buttons, that are automatically thrown on to their blog.

[php function=2]

I’ve seen so many pages that are just messed up by way too many colourful social options above, under or inside the blog post and so on. Some people think spamming these social buttons is just great and then visitors will share. But this is just not the case!

Measuring the positive and negative aspects, the next 5 points can give you the right tips to optimize your strategy in case of which social buttons are effective on which place.

What are the main goals of social media buttons?

Every step you do for your online business, should be based on a clear goal. Goals shape the priorities and allow us to determine how long it is worthwhile to work on a subject.

So what are the main goals of social media buttons?

  • More visitors through social shares (social traffic)
  • Brand marketing and popularity
  • More likes/follower on the fanpages
  • Giving a trust signal through high share counts

So this is what we want, when placing the share buttons. There’s pretty much potential in it – visitors may share the content in their social environment and that could spread the shared link exponentially and people directly visit your page.

But hitting the spot in people’s mind that triggers the need to share a topic, is not simple. Let’s see what is practicable.

Let’s ask the Data

Overall stats of interactions with social media buttons:
The data reveals that the main part is taken by Facebook with 59% (33% Likes + 26 Shares) and the second part is taken by Twitter with 39%. The rest takes just 2%.

It shows that just Facebook and Twitter are effectively used overall. But this is just in total – explicite content and blog topics, that fill in niches who use Pinterest and Linkedin more, can have extremly different numbers. If you have a business blog you should not miss Linkedin!

Placement examples of big players:

Example1: Boredpanda

As you can see, Boredpanda knows his genre and place in the web. They focus a 100% on facebook and leave out everything else. This leads to a high count on the facebook likes and shares and leaves out other sharing options that do not bring much numbers. This is also great under the aspect if you only want to manage one social platform. When starting a new project it would be just exorbitant to manage 3 social platforms. Better choose one and provide good stuff for this one, instead of doing a bad job in 3 channels!

Example2: The Verge

The Verge uses simple plain buttons for Facebook, Twitter, Linkedin and Pinterest. In the boxes they show the count of the shares. These buttons are very colorful, but on clean pages it is okay to implement them like this. Maybe this could be also an option for your blog!

Example3: MSN


On the MSN page, the social options are “Share”, “Tweet” and “Email” are used. The buttons float with the page, when scrolling! The social options here, are really reduced to avoid eye cancer, it is minified on simple options and feel good in the usage. Seemingly MSN estimates the email share option as a reliable one, which are preferentially used by the older generations.

Example4: The Sun


The Sun Website, focusses on Facebook, but is not missing twitter to be complete. On top of the article there are 2 simple plain buttons. Under the article they added a teaser-like facebook like button “to get all stories first”. This is a great example for adding a call-to-action to raise the social engagement.

Example5: Twelveskip


The design blog Twelveskip uses the old style of social buttons. In my opinion these buttons are not up to date and just look messy. The only thing I could imagine that they could perform good is, that visitors know this old look and may get in contact with it easier.

Best practices for the placement of social media buttons

If you are just starting to optimize your social share button strategy, I recommend to go with the best practices. When starting you don’t have to miss out sharing options like pinterest or linkedin, it is worth giving them a try. If you are afraid of a messy look, reduce the sharing options to facebook and twitter. It is also possible to reduce the colors of the social buttons and be colorful on hover only.

The buttons can be placed on top of the post (and below again if necessary) or they can be floating like here on Appdino. These two versions appeared to be the best options to increase the social engagement.

To sum up, what seems to be a great thing is, to have the social sharing options omnipresent but discreet.
This means they should be easily reachable from anywhere on the page. But avoid obtrusive colors and placements. When the website or blog is clean, people share more.

• Place the social buttons omnipresent
• Reduce too many different options
• Floating/scrolling buttons attract attention
• If you have high share counts, show them they communicate trust
• Avoid an obtrusive/messy look and feel

Stay clean, stay fast

Whenever you change something on your own website, try to stay clean. Every new plugin or feature slows down the speed and takes more http calls. Under different aspects this is bad for the whole page. The longer a page is loading, the more visitors will quit.

Measuring this in conversions, every lost visitor is lost money. In addition to that, google is rating the pagespeed greater and greater as the time goes.

Many Social Media Button Tools load each iframe from the social networks, each time the page is loaded. Try to minimize this and only open iframes and active links when the users clicks on the social buttons!

Test the results & optimize

Learn from the progress. It is good to start with many sharing options and then after a while you got the feedback. Social channels that are weak could be removed, if you do not have a specific goal for this channel.

Dont be satisfied with the first thing you do. We do things because we think it is the best option, but data shows authenticity. Test, different versions! The only way to increase the social engagement on your website or blog is testing. Simple variations can bring an extremely different outcome.

A study of an eccomerce page showed a high impact of social buttons. In the test they completely removed the social buttons and what happened? The conversion rate (total of selled products in the shop) increased significant. The buttons cluttered the product page and reduced the effectivity of the whole page. Keep this in mind, when placing social buttons that are not 100% neccesary, you go better without in some cases.


It is definitely worth to think about the placement and to optimize the perfect position for the social media buttons. Treat the social buttons like you would treat conversions, test variations and compare which one is best for you. Do not just spam buttons on your page and make it messy.

Clean pages are the way to go today and this means social buttons are only necessary if they have a useful impact for a website. Concentrate on things you really need, for example a facebook only strategy can be much more effective, than showing 10 different sharing options

What was your best way to benefit from social engagement through social buttons? Share your thoughts in the comments.