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.
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.
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.
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
The component is organized into 8 controller groups:
Connects the component to Supabase using your Project URL and Publishable API key.
Defines which Supabase table stores the like counts.
Links engagement counts to a specific CMS item, article, or page.
Customize: Default label, Liked label, Count visibility, Count order, Count formatting
Test: liked state, count values, animations directly inside Framer before publishing.
Choose: heart icons, custom image icons, icon sizes, active states, spacing
Customize: background, borders, radius, padding, hover states, active states, spacing
Control: icon pulse animation, count transitions, load animation, interaction timing
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
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
Soyeb
