Like Button CMS

Reactions & likes for Framer CMS by Soyeb

Show PreviewBuy for $18
Like Button CMS

About Like Button CMS

Ever wanted to add a real like button or love button to your Framer blog or CMS pages - but realized Framer doesn't support engagement tracking natively?

Most solutions either look outdated, require complicated backend setup, or don't work properly with CMS collections.

Like Button CMS fixes that.

This component lets you add a polished, animated CMS like button with live count syncing powered by Supabase. Drop it into blogs, articles, CMS templates, portfolio pages, or any static page and instantly start tracking engagement in real time.

Whether you want a subtle article reaction button, a premium engagement counter, or a live page like button, everything is fully customizable directly from Framer's right-side panel.

No complex setup. No custom backend coding. Just connect Supabase once and you're ready to track real interactions across your site.

⚠️ Important Note

You will need a Supabase account to use this component and the good part is that Supabase offers a generous free plan, which works perfectly for most Framer projects.

I also include setup guidance showing:

  • How to create your Supabase project

  • How to get your Project URL

  • How to get your Publishable / API key

  • How to configure the database table

  • How to connect everything inside Framer

So even if you've never used Supabase before, the setup stays beginner-friendly.

What makes this different

Unlike many reaction components that lock you into fixed styles or simple local counters, Like Button Pro is built for real production websites.

You get:

  • Live synced counts using Supabase

  • CMS-ready page tracking

  • Animated reactions

  • Custom labels and icons

  • Per-page engagement storage

  • Preview controls directly inside Framer

  • Fully customizable styling and animations

It works beautifully as a:

  • blog like button

  • CMS engagement tracker

  • custom reaction button

  • article reaction button

  • live like count system

  • lightweight content voting experience

Everything is designed to feel native inside Framer.

Instructions

  • Copy and paste the component into your Framer project file

  • Create your Supabase project and database table using the included setup guide

  • Open the component on the canvas and go to the DB Setup section

  • Add your Supabase Project URL and Publishable API Key

  • Set the table name if needed, or keep the default like_counts

  • Connect a unique Slug ID or page link so each page tracks its own engagement count independently

  • Customize labels, icons, count visibility, styles, typography, spacing, colors, and animations from the right-side panel

  • Use Preview controls to test liked and unliked states directly on the canvas before publishing

  • Publish your site - live engagement syncing starts automatically

How It Works

The component is organized into 8 controller groups:

- DB Setup

Connects the component to Supabase using your Project URL and Publishable API key.

- Table Name

Defines which Supabase table stores the like counts.

- Unique Slug ID

Links engagement counts to a specific CMS item, article, or page.

- Labels

Customize: Default label, Liked label, Count visibility, Count order, Count formatting

- Preview Controls

Test: liked state, count values, animations directly inside Framer before publishing.

- Icon Style

Choose: heart icons, custom image icons, icon sizes, active states, spacing

- Button Style

Customize: background, borders, radius, padding, hover states, active states, spacing

- Animation

Control: icon pulse animation, count transitions, load animation, interaction timing

Features

  • Live Supabase syncing for real engagement tracking

  • CMS-ready support for dynamic pages and templates

  • Works on both CMS and static pages

  • Per-page tracking using slug IDs or links

  • Animated like button interactions

  • Customizable love button labels and icons

  • Real-time live like count updates

  • Count formatting (plain, comma, compact)

  • Heart icon or custom image icon support

  • Fully customizable typography and styling

  • Responsive and production-ready

  • Preview controls directly on canvas

  • Lightweight CMS engagement tracker

Use Cases

  • Blogs & Editorial Sites: Add a polished blog like button to articles and editorial content.

  • Portfolio Projects: Use a love button for case studies and featured work.

  • CMS Templates: Track reactions dynamically across collection pages.

  • Landing Pages: Add lightweight engagement tracking to product storytelling sections.

  • Resource Libraries: Allow visitors to react to tutorials, tools, or documentation.

  • Community & Content Platforms: Create simple engagement counters for audience feedback.

  • Product & SaaS Sites: Measure interest and interaction across feature pages.

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com