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:

   

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

   

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:

   

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

   

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:

   

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:

   

   It’s hard not to hit such 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:

Usocial.pro – 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):

   

   An example of a more compact 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.

   

   Or briefly mention the account, like here:

   

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

   

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:

   

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:

   

   Or an example with a call to action:

   

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

   

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:

   

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:

   

   Or at the bottom of the 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:

   

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

   

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.

   

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:

   

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:

   

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:

   

conclusions

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.