Share, don’t be greedy: basic guidelines for designing social media buttons

Share, don't be greedy: basic guidelines for designing social media buttons

A lot has already been said about the benefits of social networks in business development, so we will not dwell on this and just recommend you try this tool. For those who have just started to get acquainted with this topic, here are the basic tips for promoting, and for those who already have accounts in social networks, we recommend conducting an audit on VKontakte, Facebook and Instagram.

In addition to social media accounts, you should add “Share” buttons (or, in other words, share buttons, sharing buttons) to the site, which will allow users to quickly add a link to your site on their page or send a message to a friend.

You can find social media buttons for the site separately on the service pages (for example, on VKontakte you need to go to the “Developers” section) and place each one on the site sequentially or use ready-made panels of third-party services (consider a few examples below). The first method should be used if you want to place expanded blocks with examples of recent posts, and the second will allow you to add a set of buttons in one code change.

Button decoration

First, let’s decide on the appearance of the buttons. Key recommendations:

  1. The buttons should be visible. Of course, they shouldn’t draw all the attention to themselves, but also blend in with the background.

    An example of invisible buttons:

    Invisible social media buttons

    The company changed the color, but the buttons remained visible:

    Visible social media buttons

  2. Logos must be recognizable. You can change the design to match your site’s design, but don’t overdo it.

    It is not immediately clear that these are buttons and what they lead to on social networks:

    Bad social media button design

    Despite the radical change in appearance, the functions of these buttons are immediately clear:

    Nice design for social media buttons

  3. Use a minimum of animation. You can add a color change or a smooth effect when you hover the cursor over the button, but it is better to avoid aggressive blinking or jumping out.

    An example of changing a button after hovering the cursor:

    Social media button animation

  4. There shouldn’t be too many buttons. Research over the past year shows that Russians mostly use Youtube, VKontakte, Odnoklassniki, Facebook and Instagram, and also share information on WhatsApp and Viber. Be sure to take into account the characteristics of your site’s audience, but we recommend placing no more than 5-7 buttons.

  5. Links must be working. An obvious point, but many do not know that Google+ has closed its social network and now the link is available only for corporate clients. Also, due to the past blocking of the Telegram social network, users have problems with access.

  6. The buttons should be easy to click. Small elements are less noticeable, so you can easily miss by pressing the adjacent button. The minimum allowable button size is from 10 × 10 ml or approximately 40 × 40 pixels.

    An example of too small buttons:

    Buttons are awkward to click

    It’s hard not to hit such buttons:

    Click-friendly buttons

If you decide not to add each social network button separately, but use a ready-made solution of services, then we recommend several of them: – the service has a convenient constructor and many design options. The buttons will fit into the responsive layout, and statistics will be collected for each set.

Uptolike is an equally good builder and an abundance of customization options for button design. There are separate plugins for popular CMS.

Block “Share” from Yandex – if you don’t want to bother with the design, then Yandex offers the simplest constructor with a minimum of features. The advantage of this service is that research is available through Yandex.Metrica.

Social media buttons for the website: where to place them?

  1. Home page. After reviewing the products and services, briefly tell us about your social media accounts. The block can be made large, show the latest posts.

    An example of an attractive block (you can click on each image and go to the corresponding post on social networks):

    Example of a block for the main page

    An example of a more compact block with a call to action:

    Example of a block with a call to action

  2. Company page. Talking about yourself, you can also add a block at the bottom of the page with the latest posts and links to social networks.

    Social widgets on the company page

    Or briefly mention the account, like here:

    Example of links to social networks on the page about the company

  3. Contact page. If you use social networks as one of the sources of communication, be sure to add buttons to this page. Example:

    Social media links on contact pages

  4. Site footer. It is enough to specify only the buttons in order not to overload the block. So the user can find them on any page of the site. Laconic example:

    Links to social networks in the footer of the site

And 4 more ideas for sharing buttons

  1. After the text of the article, infographics, promotions, i.e. after useful material or information… The user should be willing to share important information. Links are best aligned to the left, as in the example:

    Share buttons after the text of the article

    Or an example with a call to action:

    CTA share buttons after article text

  2. On the pages of the action. By the way, they are most often forgotten about.

    Social media buttons on promo pages

  3. On product pages. So it will be more convenient for the user to send the link to a friend or notify all friends about the desired product. Links are best placed on the left, under the product photos:

    Share buttons on the product page

  4. On the service pages. If the main product of the company is the provision of services, then, as in the previous paragraph, share buttons should be placed. In this case, it is desirable to place the button in the first screen:

    Sharing buttons in the first screen on the service page

    Or at the bottom of the page:

    Sharing buttons on the service page

Where DO NOT need to place buttons

  1. In the header of the site. Thus, you motivate the user to leave the site. It is better to show the links below, after an overview of the main features of the site.

    For example, in this case, the buttons attract too much attention and look brighter than the logo:

    Links to social networks in the site header

  2. In the side menu social media links will also show “too early”. And you shouldn’t overload the side menu. Anti-example:

    Social media links in the sidebar

  3. Pin to page. This function is useful for an online consultant or a feedback form, and social media buttons will only distract the user’s attention.

    Fixed share buttons

The following errors can be highlighted for social media repost buttons:

  1. Accommodation content-free… Sometimes the buttons are positioned in such a way that it is not clear what exactly they are offering to share with the user. Whole site? Buttons like this look strange:

    Content sharing buttons

  2. Location next to content that is not interesting… For example, buttons next to the text about a company are completely unattractive to the user. Also, users will not want to share every product:

    Share buttons next to uninteresting content

  3. Before useful material, information. Most often, repost buttons are placed after the title. The user is focused on reading and after viewing the article simply forgets to share the material.

    It is better to place the button just after the text to remind the user about social networks. In this example, the buttons are found too early:

    Repost buttons under the article title


Remember, links to social networks should be placed at the bottom of the pages. However, if there are interesting posts, you can show them on the Main page, while repost buttons are best placed next to the relevant content in order to motivate the user to share information.

If you need help setting up or modifying social media buttons, you can always contact our specialists.

PS Check out our cool case on working with SMM.

Leave a Reply

Your email address will not be published.