Skip to content

component

Like Button CMS

By Soyeb

Details

Summary

Like Button CMS fixes that.

Description

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

Introduction

Reactions & likes for Framer CMS

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600160888/148/228/309/79/15
  • All · #5624