Facebook redesigns its “Like” button

Default avatar.
June 30, 2016
Facebook redesigns its “Like” button.
Those Facebook buttons that you just can’t live without because you’re always using them to engage with your friends and family, and the site’s content, have gotten a noticeable makeover. The new design signals a shift to more space-conscious design by the company, as well as a tendency to combine old design into something entirely new. In a post on the company’s developer blog, Facebook reveals the reasons behind its decision to revamp how its social-sharing look. For starters, the biggest design change affects perhaps the social network’s most prominent button: the Like button. Liking is so ingrained in the Facebook experience that one can’t imagine the site without it. This is perhaps why the most significant changes were made to this button. The company performed copious qualitative and quantitative research to determine if their initial hypothesis was correct: They believed that more users would understand the straightforward thumbs up icon on the Like button, as opposed to the old design that featured the company’s lowercase “f” logo in the button. When their testing told them that their hypothesis had some substance to it, they implemented these changes to the site. In addition, the new Like button features a unification of two, separate icons. The old design separated the actual Like button from the number of likes that are registered beside the button. The new design seamlessly melds these two elements, combining the icon, the word “Like” and the overall number of likes into one, longer, rectangular blue button. Besides the Like button, the Share, Save and Follow buttons get a different look, too, all based on Facebook’s new “cleaner design” approach. Essentially, its suite of social buttons has been modernized. This means that each button receives an updated icon that can better represent the Facebook brand while at the same time offering a superior user experience to people on the network. This dedication to better engagement includes the following design properties:
  • A consistent color
  • A flat button shape
  • A refined visual style that integrates the Like and Share counts within the button
Never one to neglect mobile, Facebook is also thinking of mobile usability in its button redesign. More than 30% of the engagement from people clicking or tapping the Like button comes from mobile, so the company is addressing mobile friendliness, too. In an acknowledgement that the original version of the Like button is now obsolete as it was designed in the infancy of mobile, Facebook has released a variety of different button sizes. This means more freedom for designers and developers who can now decide on the specific button size to use with their desktop or mobile site. Interestingly, these new button designs are also going to appear on Facebook’s Instant Articles in the next few weeks. Look for the new buttons at the bottom of those pages. They’re going to count toward aggregate share, like and follow counts. Facebook won’t roll out these new buttons everywhere at once. Instead, you’ll probably see a trickle of these new designs popping up here and there on its site and apps over the next few weeks.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…