Real Like Button Component for Framer

Real Like Button Component for Framer

Real Like Button Component for Framer

Real Like Button Component for Framer

Component

Component

Component

Component

Real Like Button Component for Framer

Real Like Button Component for Framer

Real Like Button Component for Framer

Real Like Button Component for Framer

This is a real like button for your Framer websites that always shows the current like count for every single visitor. Feel free to copy this component into your project and have fun playing around with it.

This is a real like button for your Framer websites that always shows the current like count for every single visitor. Feel free to copy this component into your project and have fun playing around with it.

This is a real like button for your Framer websites that always shows the current like count for every single visitor. Feel free to copy this component into your project and have fun playing around with it.

This is a real like button for your Framer websites that always shows the current like count for every single visitor. Feel free to copy this component into your project and have fun playing around with it.

Real Like Button Component for Framer
Real Like Button Component for Framer
Real Like Button Component for Framer
Real Like Button Component for Framer

Copy component

Copy component

Copy component

Copy component

Features

To ensure your 'like' button is 100% customizable, we've set up the component so that you can connect it to your own button design. Just ensure it has a "Default" and a "Liked" variant (naming is important), and a variable named "Amount" on a text layer serving as the counter.

like button component variants

We also need to store the like count for each like button. To do this, we're using Supabase's free plan. We must create a table in Supabase and add "slug", "button_id", and "ip_address" columns; all should be of the "text" type.

Once we have connected our like button to the component, we can paste in our Supabase API key and URL, along with our table name. We can also set a unique identifier for each like button to ensure separate counts.

like counter component properties
Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

Copy the component.

Step 3 outline

Step / 03

Paste in your project and start using it.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.