Blog post

How and where to add social share buttons to your website

Date of post

15 April 2024

Read time

9 mins

Picture the last time you found a bit of content that was so brilliantly useful that you wanted to share it with your connections right there and then. Was there an easy way to share it? Or did you stop to copy the page’s URL manually, return to your social network, and share the link?

No, we didn’t think so.

This method works, but only some people are patient enough to do it. If you want more people to share your content on social media, you must make the sharing process as convenient as possible.

This post covers everything you need to know about social sharing buttons – what they are, where to put them, and how to plan for them in your web design.

What are social sharing buttons? 

Social sharing buttons offer a convenient and clever way for users to share content on various social media platforms. They can take many forms, such as floating bars, retractable sidebars, and image overlay buttons. 

You don’t need to look far to see social sharing buttons in action. 

Most blogs use them to help their content gain traction. Thanks to the magic of modern site-building tools (see “Top tools” below!), adding them to your website is easier than ever. 

Screenshot with an example of how and where to use social share buttons on a website.

What are the benefits of social sharing buttons?

Adding social sharing buttons is a no-brainer for website owners, particularly bloggers and creators, who have a lot of helpful content to share. 

If you’re still wondering why, here’s a glance at the benefits of social sharing buttons: 

  • Improve the user experience. Social sharing buttons make content sharing smooth and frictionless for your audience. Remember, they’re doing you a favour by promoting your content to a broader audience, so you may as well help them do it! 
  • Drive referral traffic from social media. More shares equal more visibility for your content, which will help drive more social media traffic to your website. 
  • Increase user engagement. Sharing buttons spur user engagement not just on your website but also on social media. User engagement is good for your brand – positive comments and reviews are great examples of user-generated content.

Where to add social sharing buttons

When adding social sharing buttons, striking the perfect balance between visibility and user experience is essential. 

This section looks at the perfect places to put your social sharing buttons. 

1. Sticky sidebar

A sticky sidebar is like a mini-menu that follows readers as they scroll through a post. This guarantees that your social sharing buttons remain visible throughout the experience.

Example of how a sticky sidebar with social share buttons works

To achieve this effect, you either play with CSS code or use a widget that does the work for you. Some widgets include extra features, like a “hide” button and share counters. 

2. Tweetable quotes

A tweetable quote does exactly what it says on the tin. It allows users to take a snippet of text and share it on X (formerly Twitter) in just a few clicks. 

Example of a "tweetable quote" with a share button below it.

Creating tweetable quotes is a great way to establish your credibility. 

You can publish advice, a mind-blowing statistic, or anything showcasing your industry expertise. This makes tweetable quotes a valuable and flexible tool in your social media strategy

3. Images

Images are more shareable on social media platforms like Facebook, Instagram, and LinkedIn. Your strategy will undoubtedly include creating informative visual content, like charts and image quotes.

To encourage shares, you can add sharing button overlays that appear whenever users hover over the images.  

Screenshot showing an example of overlay buttons on an image

4. Below the conclusion

Confident in the quality of your content? 

If your audience reaches the end of your post, the chances are they’re pretty hooked. That would be a juicy opportunity for you to show social sharing buttons and get some clicks. 

Social share buttons at the end of an article

To encourage more users to share, consider adding a simple call to action (CTA) like “Don’t forget to share this post” or “Share this post if you liked it.”

5. In-line buttons

Realistically, only some people who read your content will finish the post from top to bottom. 

That’s why website owners use sticky menus to keep clickable elements in view while users explore the page. 

Alternatively, you can use in-line social sharing buttons. These can be inserted into a fixed position within your content.

Screenshot with an example of in-line social sharing buttons

In-line buttons are more flexible and customisable than most social sharing elements. You can fine-tune where they appear and control the networks on offer.

7. Top left and bottom right corners

Data shows that users look at the top-left corner of a page first and the bottom-right corner last. 

So, should you always put essential page elements in the top-left corner then?

Not always. 

It’s also good to put sharing buttons in the bottom-right corner, ready for users who truly enjoyed your post. This works great for websites that publish short-form content that can fit into one screen.

Bottom-right sharing buttons on a website article

How do I create a social share button?

Great news – you can easily add social sharing buttons to your website using page builders, plugins, or embed codes.  

Here are three easy-to-use tools to help you create your own social share buttons (without using any code). 

1. AddToAny

AddToAny is a lightweight tool that lets you create social sharing buttons for an impressive range of destinations. You can create buttons for Facebook, Reddit, Telegram, WhatsApp, Pinterest, Messenger, Microsoft Teams, and more.

AddToAny screenshot

AddToAny key features

  • Different share button menu styles. With AddToAny, create floating share buttons, image overlays, in-line buttons, mini menus, and more using the web code generator. You can also use your own images, modify the buttons’ colours, or switch to square button shapes. 
  • Platform-specific button functions. Generate social media engagement with “official” buttons for specific sharing features. This includes the “Pinterest Save” button, “Tweet This” button, and “Facebook Like” button.  
  • Display share counters. Show off the number of times your content is shared on social media. This feature currently supports Pinterest, Reddit, Tumblr, and Facebook (via API). 
  • Advanced features. Under the hood, AddToAny includes more features like asynchronous loading, Google Analytics integration, link tracking, and multiple widget instances on a single page. AddToAny is also optimised for mobile devices from the outset – no additional steps are necessary.

2. ShareThis

ShareThis is a direct alternative to AddToAny – offering similar features and design workflow for social sharing buttons. 

Screenshot showing ShareThis tool

Like AddToAny, ShareThis requires little setup. You don’t need to create an account – just use the browser-based editor to build your sharing buttons from scratch.

ShareThis key features

  • Diverse share button types. ShareThis allows you to easily create in-line buttons, sticky menus, image overlays, and video-sharing buttons. None of these buttons require you to know any coding!
  • Reaction buttons. With ShareThis, users can react to your content through clickable emojis. Some of the available reactions include “like,” “love,” “sad,” and “angry.”
  • Display your social media feed. ShareThis makes it easy to showcase your social media content on your website. Using the “Social Feed” tool, you can pull in content straight from your Instagram, Facebook, YouTube, and a handful of other platforms.

3. ClickToTweet

ClickToTweet is a straightforward tool for creating and embedding tweetable quotes on your website. To use it, log in to your X (Twitter) account, write your tweet, and customise the tweet preview before generating the embed code.

Screenshot showing ClickToTweet tool

ClickToTweet key features

  • Ready-to-use embed themes. Want to make your ClickToTweet widget match your website’s design? ClickToTweet lets you switch between different, stylised embed themes with one click.
  • Track widget clicks. Easily gauge your ClickToTweet widget’s performance using the built-in click tracker. Take note: You have to enable this feature before creating your tweet.
  • Use custom “Tweet This” images. To further personalise your ClickToTweet widget, select the “Basic Embed” mode to create a simple tweet button. Then, customise the appearance of your tweetable quote via your page builder or content editor. 

Dos and don’ts of social share buttons

Remember that adding social sharing buttons to your website can be a double-edged sword. 

On the one hand, it can boost on-page engagement and maximise your brand’s social media presence. But if you’re not careful, it can negatively impact the user experience. 

So, before we wrap up this guide, here are some of the best (and worst) practices when using share buttons.

Do: A/B test your share button placements

A/B or split testing involves running multiple versions of the same page and comparing the results – allowing you to measure marketing performance more efficiently. You can use this method to determine the best position for your social sharing buttons in the shortest amount of time.

Don’t: Add share buttons to landing pages with prominent CTAs

Social sharing buttons can distract users from taking action on pages containing a primary CTA like “Add to Cart” (e.g., landing pages and product pages). As a rule, only use share buttons in informational content.

Do: Check your heatmaps

Use heatmap tools like Hotjar and Crazy Egg to visually track areas of your website that garner the most attention. Positioning your social sharing buttons in these “hot zones” will increase their visibility and help you generate more shares. 

Don’t: Forget about the mobile version of your site

When adding social sharing buttons, don’t just focus on your website’s desktop version. With more than half of internet users on mobile, you should prioritise how your share buttons and other clickable elements look on smaller screens.

Do: Show share counters for most-shared posts

Like customer reviews and ratings, share counters are great for showing off your popularity, but they’re also considered “negative social proof” if no one shares your content. As such, only enable share counters for posts that already generated a decent number of shares. 

Don’t: Use too many share buttons

Too much of anything is never a good thing, and social sharing buttons are no exception. To identify the ideal location for your sharing buttons, use analysis techniques (e.g., split testing) to create a strategic approach. 

Do: Choose relevant social media platforms

Individual sharing buttons take up space while leaving your audience with the burden of choice, which could deter them from sharing altogether. Rather than adding share buttons for every social media website you can think of, only choose relevant networks your target audience prefers. 

The key takeaway

Social sharing buttons are a win-win for both website owners and users. 

From a user standpoint, these buttons help share useful, quality information with peers. This, of course, leads to more social media engagement and potential followers. 

As a website owner, getting more shares not only shores up your social media presence but also exposes your content to other website owners and content creators who can reward you with backlinks – a key ingredient in any successful SEO campaign. 

With this guide, you’re more than ready to roll out sharing buttons on your website. Just remember to find the balance between providing a good user experience and ensuring your social sharing buttons are visible to your audience. 

Post author

A true creative at heart, Tom loves using his expertise in design to connect brands with people. He graduated from Bournemouth University with a degree in product design. In 2021, he merged his own design agency with Marketing Labs to create a full-service digital marketing agency.

Table of contents

More content like this

Get in touch with Marketing Labs®

Recent blog posts

Psst! Did you know we’ve got our very own podcast?