Like Button with Counter Component for Framer

Introduction

The component is built for non-technical creators that don't want to go through setting up a database. Relying on cookies, Supabase and unique IDs, allows this resource to store your likes count with accuracy.

Don’t have the component yet? Purchase it here.

Getting Started

Click on the remix link you received from Polar which will open the project in Framer. Grab one of the buttons from the canvas by copying and pasting it into your own project. Make sure to change the Button ID following the format provided.

Component Features

Button ID

Assign a unique identifier to each button instance for tracking and reference. A great format would be as follows: # + DATE + _TIMESTAMP (eg. #29072025_035217).

Initial Likes

Set a starting like count if you don't want to start at zero likes.

Spinner

Control the size and color of the spinner that shows while the component connects to the API and counts the initial likes + user likes.

Font

Select the font family for the button’s text with all the native Framer controls.

Title

Customize the text that appears before and after the like count, as well as the labels for “like” and “liked” states.

Show Icon

Toggle the visibility of the icon in the button.

Icon Size

Adjust the icon size, with a default of 16px.

Icon Color

Set the default icon color and the color when liked.

Icon SVG

Paste your own SVG icon from libraries like Hero Icons, Phosphor, or Lucide. You can also paste in your own custom icon as long as you grab the SVG code and make sure that fills and strokes have their color set to currentColor.

Icon Gap

Control the spacing between the icon and the text.

Padding

Set the general padding for all sides simultaneously or individually for top, right, bottom, and left values.

Border

Customize the border’s radius, width, color, and liked state color.

Background

Set background color, hover state color, liked state color, and liked hover state color.

Transition

Control the animation behavior for interactive states.

Data Collected

This component stores all interaction data in a Supabase-hosted database. The data collected is completely anonymous — no IP addresses, GPS coordinates, or other personally identifiable information (PII) is stored.

The data collected is stored in the following schema:

1. Button number

2. Button ID

3. Likes count

4. Date created

5. Date updated

If you wish to store the data yourself within your own solutions, please reach out to contact@pixcodrops.com for more information.