We use cookies. More

Custom Styling Facebook Like Button: Is It Possible?

Facebook provides a Like button that you can put on your website to let your visitors like the content they browse on your pages. In this post, I will discuss whether it is possible or not to custom style the Facebook Like button.

Advertisement

You can easily place a Facebook Like button or a Facebook Share button on your website to enhance the social interaction with your visitors by giving them an option to provide feedback about your content by liking and/or sharing it with their friends.

Facebook provides a detailed set of instructions and examples for implementing the Like and Share buttons on your website on the following pages in their developer documents:

Facebook Like Button Instructions and Examples
Facebook Share Button Instructions and Examples

With the Share button, webmasters have the freedom to custom style it the way they wish to fit to the style and layout of their websites. But, is it the same with the Like button? Can we create a custom styled Facebook Like button to place on our websites?

Can Facebook Like Button Have Custom Style?

It can and it can't. But more importantly, it shouldn't. Let me explain how it can and it can't have a custom style first and then continue with explaining why it shouldn't.

You can have a custom styled Facebook Like button on your website or web (or mobile) application but you should know that this is not something supported by Facebook by default and it may be a tough task to accomplish and maintain unlike the simple styling of the Share button as I explained in this tutorial.

Facebook provides the Like button code on their Like Button Configurator page where you can adjust the button settings. This code has two parts. The first part is the HTML code for the button container div that you will insert into your website and the second part is the JavaScript code that links to the Facebook SDK file and controls how the button will display and function on your site.

Custom Styling Facebook Like Button: Is It Possible? - 1

The actual Like button is generated on the fly within an iframe, when a visitor opens your page in their web browser. Since the button itself is hosted and controlled via an iframe that is located on Facebook site, due to browsers' cross-domain policies, you have no access or control to change the content or style of that iframe, even if you are displaying it on your website. For that reason, you can't change the CSS of the Facebook Like button.

What you can do to overcome this and give your own style to the Like button is that you can use the Like Action of Facebook's Open Graph API. Though it may sound easy at first, you will not only need to have the API knowledge for the specific language (PHP, ASP, Ruby, etc.) your website is built on, but you will also need to ask every single visitor to give permission for your website (by logging in Facebook through your application) to execute the like actions they perform using your custom buttons. Another difficulty is to keep track of the Like counts and provide a means for the users to Unlike content they previously liked.

If you have a specific web/mobile application that requires user login and that you definitely need to custom style the Facebook Like button in your application for a certain functionality, then you can follow the API route to custom style your Like buttons as described above. Otherwise, if you have a general website open to everyone, using the default Facebook Like button is the way to go and I will explain why in more detail below.

Why You Shouldn't Custom Style Facebook Like Button on Your Website

Some time ago, it was possible to change the style of the Like button to an extent, but over the years Facebook eventually came to the conclusion that they wanted to preserve the same user experience across all platforms and third party websites that use their social plugins and modified their Like button in a non-customizable way. Now, you may think why the Share button is customizable, then? Well, that's because the share action does not take place instantly as you click a Share button on a website. When you click a Share button, the share dialog opens in a new window preparing the URL, its title and preview to be shared and asks your confirmation to publish the share. However, Like button doesn't work like that. When you click the Like button on a web page, the Like action takes place immediately and your "Like" is shared/displayed on your profile.

If webmasters had the ability to custom style the Like buttons, or even think of webmasters with ill intentions that hide or replace the Like button with something else to trick you into clicking it and unknowingly liking it in the background (without asking your consent as described above), hence posting on your Facebook profile. Would that be nice? Of course, not.

On their Platform Policy page in the social plugins section, Facebook makes it clear that you shouldn't hide the elements of their social plugins, including the Like button. What this means is obscuring or covering the original button and displaying something else that will trigger the Like action (unless you are using the API and getting user consent) is forbidden for the privacy and security concerns.

Also, let's imagine that you implemented the API solution to custom style the Like button on your website or application, which requires the users to log in and give consent when they will like something on your website. This will most probably annoy users, to have to log in to their Facebook account just to like a random page on the web. As mentioned above, use this solution only if you really need to.

As a webmaster or app developer, you should keep the above points in mind and decide if you really need a custom Like button or not on your website, if it will be a nice experience or an annoyance for your users.

My personal recommendation would be to continue using the default Facebook Like button unless you really need to have a custom styled one on your website. If a client of yours is insisting on having a custom button, educate them about the potential problems we discussed above, you can also refer them to this page.

Advertisement

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in