CX Insights

Designing Effective Social Media Buttons

8 min read

Social media marketing has become quite popular. I believe there are two main reasons why. First, because the Web 2.0 offers increasing possibilities for this new marketing strategy, and second, because social media is easily and for everyone accessible through modern mobile devices. Besides, I think people rely on social media marketing simply because it is popular and somehow seems to suit our constant connected existence of the 21st century.

Social media marketing basically means driving traffic to your website from social media platforms. As a company, you provide content and encourage your users to not only consume, but also share this content with their contacts on diverse social media sites. This way, users become a trusted, third-party source for your content. The effect is a word-of-mouth promotion, leaving you, the originator of the content out.

Popular social media platforms are Facebook, Twitter, Google+, Flickr, YouTube, Pinterest, or just regular weblogs. Social media buttons are implemented on any website that uses social media marketing. Also private blogs that just want to make their content easily sharable use social media buttons. In order to get as many users as possible to share content, there are a couple of things to consider when designing these sharing buttons, such as a certain amount of recognition, an appropriate position and dominance on your site, and a personal factor. Here are some practical pieces of advice and illustrative examples for designing the right buttons for your site.


As for the Web in general, for social media buttons recognition is very important. People don’t have the time and neither are they motivated to guess the function of different buttons or even look them up somewhere. Web users are lazy people and we appreciate it to recognize things, such as brand logos, people, or communities. It gives us a feeling of familiarity and trust.

This is the reason, why there are hundreds of different social media buttons, but all feature some basic characteristic. Facebook for example is always recognized by the bold letter f, Twitter buttons show the letter t or a little bird and Flickr is represented by two dots. Also colors are very meaningful and help people to recognize the different social platforms. To stick with the same examples, Facebook uses a very intense marine blue, while Twitter is mostly colored in a light, sky blue. Flickr on the other hand uses a combination of an intense blue with pink.

When designing social media buttons, don’t be afraid to be creative. At the end of the day, you want people to see them. But make sure people not only see the buttons, but also recognize their function.


Aaron White uses very clean black & white social media buttons. He doesn’t use any color, but through the characteristic icons, they are still very clear. Besides, they nicely fit the design of the website, clean, clear, and credible.


Dennis Covert uses classic buttons on his site, instead of little the little icons that we find on most websites. Still, the colors of the buttons highlight the purpose of the buttons and lets us quickly associate them with the right social media platform.

Explanation has a whole section in their sidebar reserved for social media buttons, each with a clear description of what to expect. Besides the common ones, they also use some less popular icons. A clear description tells users what to expect, which is very handy and keeps users from making wild guesses or clicking on the different icons to find out.


After you have decided on how you want your buttons to look like, make sure you get the right position. The position on a website is very important and I’ll give you two reasons why. First, we are lazy and don’t like to scroll down a page. second, we follow patterns of a website that have proven to work before. According to a study by Nielsen, web users read a website in an F-shaped pattern. We pay most attention to the first paragraph, a little less to the second and the rest of the page we quickly scan through for relevant information. The same applies to the whole website, including the header, sidebars, and footer.

The position of social media buttons on your website says a lot about the importance that you attach to them. If you for example put them somewhere in your header, you make them a fixed element of your site, positioned at the top and therefore quite important. At least important enough to make sure people can easily find them when looking for them. If you place them in the content area, especially above the fold, you want people to see them right away. This way, you not only show users that you care about the community, but that you want them to be able to easily share your content. Once sharing options are moved to the footer, they are out of the picture and only on the page to make sure they are there in case someone asks for them.

Consider your intention of placing social media buttons on your website when deciding on the position. For example there is a difference of whether you want users to like your brand in general, or just one piece of context. Here are some examples of meaningful positions.


Mercedes Benz offers social media buttons in their header. The design is very clean and matches the official and trustworthy look of the website. By placing the sharing buttons on the top of the site, Mercedes makes sure that people see they are connected and keeping up with the time. However, the buttons are non obtrusive and can easily be ignored by those users who don’t care about social media.

Content area

Coca-Cola displays their social media sharing options very centrally in the content area. Users can see the most recent activities on the different social media platforms by switching back and forth between the different tabs.


The clothes brand H&M offers different options to connect with them as plain and non-obtrusive text links at the bottom of their site. Users really need to look for these links and there is little to recognize them by. However, for some websites this might just be an appropriate way to present them.

Look & Feel

Another aspect you will want to think about is the look and feel of your buttons. How much attention do you want them to draw? Do they only serve the purpose of sharing content, or do you also want them to have an appealing appearance? Personally, I think the way you design your social media buttons strongly depends on the the purpose of your website and who your users are. A website with a very serious topic should not offer too playful or even funny sharing buttons. If your website is very creative or if you offer creative content, people might even expect something out of the ordinary. In this case you do want the design of your buttons to catch people’s eyes.

Some websites clearly focus on one social media platform more than on others and show that through the presentation of the same. Others makes them all look very dominant compared with the rest of the page or integrate them in the design to make sure they are non obtrusive. Here are some examples of the look & feel of some social media buttons.

Brand relation

Freshlimesoda use funny, non-obtrusive social media buttons on their site. The buttons are clear in their form and color and at the same time they relate to the brand.


Basic Thinking Blog has simply blown up their social media buttons to a quite big size. This certainly draws attention and not only that, the idea of just making them huge is also funny. I can see that this works.


Soocial decided to put their sharing buttons at the bottom of the page, but once people took the effort to scroll down there, they are surprised by some very visual and beautiful sharing buttons.

Social Proof

Social media marketing already gives away that there is something social about it. Social means connected, interactive and personal. You want to build a relationship with your users, gain their trust and make them want to share your content. A great way to do so is by showing that others also follow you. Social influence is a very powerful persuasive strategy to convince people of something.

You can for example tell people who of their friends already likes your website. This creates a desire of being part of the group and motivates people to like you as well. Also showing the numbers of connections gives people the feeling of missing out if they don’t also connect with you.

Be the first of your friends

Techcrunch makes use of a very effective way to get people like them. They simply tell you who of your friends already likes them and they even show you their pictures. This makes it very personal and triggers people to be part of the community. Liking them gives me a feeling of belonging. At the same time, if non of my friends likes something yet, I can function as a trend setter by being the first to like it.

Number of Followers

UX Booth displays in very clear and big letters how many people already follow them. These numbers have a magic effect on people. If that many people like the site, it has to be good. And if it’s really that good, I want to follow them, too.

Total Number of Connections

Other sites, such as Designmodo combine all their connections to make the numbers even bigger.

Sabina Idler
Sabina was technical writer & UXer @Usabilla for 5 years before she started her own UX research and consultancy firm; UXkids. With UXkids, Sabina leverages her academic research expertise, know how in child development, and strategic vision to help companies build successful digital products for children. You can connect with Sabina on Linkedin or follow her on Twitter.