Framer Tutorial: Creating Like Counters Using a No-Code Database

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to add real like button component to your Framer website without any code. I'll show you how you can design a like button, set up a database, and then connect the two.
Project remix:
framer.university/resources/r...
0:00 - Introduction
0:23 - The roadmap
0:53 - Designing our like button
7:31 - Setting up a free no-code database
10:05 - Connecting the database to the like button
13:48 - Bonus like button design
17:05 - Closing thoughts & additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

Пікірлер: 76

  • @dansallai
    @dansallai2 ай бұрын

    This is great, thanks Nandi! I could totally replicate the workings of this. I'm counting not pages but games however, so the ability to name each button is super useful because I have multiple on each page. One thing is that the interface of Supabase has changed a little bit compared to what you show and I wasn't sure I'm doing it right. There is some wizard thing going on now, but anyway I could handle it. I've never heard of Supabase so thanks for that as well, it seems like I will be able to connect a bunch of other things to it as I scale my site.

  • @KaizenUI

    @KaizenUI

    Ай бұрын

    I don't have the like counter in my assets how is that?

  • @yaizidoro4373
    @yaizidoro43735 ай бұрын

    I’m doing a project with this right now! Thanks for the support and for everything you do for the Framer community!

  • @framer.university

    @framer.university

    5 ай бұрын

    Love to hear it! Thanks for the kind words :)

  • @willianmatiola
    @willianmatiola4 ай бұрын

    First, thank you so much for this component and tutorial! Secondly, I'd like to add this information for those who might be having the same problem I had: If you are using the like button inside a card component that it is inside a list of cards, your like button will show the same amount for all of them. To fix that, open the like button component and in the "button_id" create a variable. Then, you change the id from 01 to a different number for each card you have. I hope it helps!

  • @framer.university

    @framer.university

    4 ай бұрын

    Thanks William! Yes this is a perfect solution to set unique IDs even if the component is within a component. :)

  • @KaizenUI

    @KaizenUI

    Ай бұрын

    I didn't get the different number for each card. 01 on the first card, 001 on the second? Or 02? May I ask for enlightenment?

  • @willianmatiola

    @willianmatiola

    Ай бұрын

    @@KaizenUI If you have 10 cards, after transforming the "button_id" in a variable, you start numbering each one by the order you want, like 1, 2,3,4,5... The goal is having each card within a card list with its own id, so the plugin interpret them separately.

  • @KaizenUI

    @KaizenUI

    Ай бұрын

    @@willianmatiola Thanks, William.

  • @SamAnthonyDesign
    @SamAnthonyDesign5 ай бұрын

    This is such a powerful tool. Thank you so much for sharing!

  • @framer.university

    @framer.university

    5 ай бұрын

    My pleasure! :)

  • @FloNocode
    @FloNocode5 ай бұрын

    You are a Gift for framer community !

  • @framer.university

    @framer.university

    5 ай бұрын

    Appreciate your support :)

  • @fekryaiad
    @fekryaiad5 ай бұрын

    Thanks buddy! great tutorial

  • @framer.university

    @framer.university

    5 ай бұрын

    Glad it helped!

  • @youngboikt
    @youngboikt6 күн бұрын

    How would I turn it into a progress bar? I love the concept of live interaction but want to change the visual aspect of it

  • @IsaacLotz
    @IsaacLotz3 ай бұрын

    Thanks so much for this awesome component, would love to implement it on my site. I have followed the directions to a tee but when I connect the component it doesn't display anything. I've tried reloading Framer/the project a few times. Do you have any other solutions to this issue? Thanks!!

  • @nerdalert1980
    @nerdalert19802 ай бұрын

    How did you code the thing to use components?

  • @ItsOlaOlowo
    @ItsOlaOlowo5 ай бұрын

    This is really powerful. Thanks. Please could you do a tutorial or share a resource on how to search within a list, maybe a list of names.

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks! What exactly you want to achieve and did you not find success with the built in search component from the insert panel?

  • @ItsOlaOlowo

    @ItsOlaOlowo

    5 ай бұрын

    @@framer.university for instance, on a page with a list of registered participants, I want to be able to search for and filter names through a search bar.

  • @ItsOlaOlowo

    @ItsOlaOlowo

    5 ай бұрын

    @@framer.university what I'm trying to achieve is pull data from database (e.g airtable or google sheets) into Framer CMS so I can be able to search the list directly in Framer

  • @ShayneCuffy
    @ShayneCuffy5 ай бұрын

    So helpful as always. Could this be used to save positions in a database? For example if I use the drag effect, move an element and then have that final position is stored in the db so the next visitor would see the change and could make their.

  • @framer.university

    @framer.university

    5 ай бұрын

    Maybe yes. But that would require a completely different code component

  • @christoanto5968
    @christoanto59682 ай бұрын

    I had a problem when i click the like button, the count increases but the color and word changes to liked is not working why..?

  • @alvinniza
    @alvinniza5 ай бұрын

    Thanks for sharing! If I use it on blog post via cms, do I need to change each button-id?

  • @framer.university

    @framer.university

    5 ай бұрын

    You only need to use unique IDs when adding multiple buttons to the same page on your site. Remember, we created a "slug" column in the database. This means that even if you apply the same ID to two buttons on separate pages, they'll be counted individually. In summary: it's quite easy to utilize the button on CMS detail pages. Just make sure to set unique IDs, particularly if you need a few more like buttons on the same CMS detail or any other page.

  • @alvinniza

    @alvinniza

    5 ай бұрын

    @@framer.university Got it! I really appreciate what you’ve done to our community by keep sharing fantastic resources!

  • @biyedesign3346
    @biyedesign3346Ай бұрын

    Hello, currently I'm working on spin the wheel project for my ecommerce. The concept is customer could redeem voucher so they can spin the wheel and get the rewards. My question is how can I custom code and integrate with my API and database for the customers data and rewards? Or is there any simple way to achieve this in framer? Because I like the way framer handle all the animation. Thank you

  • @framer.university

    @framer.university

    Ай бұрын

    You can do this by writing a code component with React Typescript.

  • @1-jf5nf
    @1-jf5nfАй бұрын

    hello? I'm using your components very well. I copied this component and completed setting it up with supabase, but I found a problem and would like to contact you. I inserted the component within the cms page and it is visible on tablets, smartphones, and laptops. However, on a desktop connected via LAN cable, the components below do not appear and nothing is displayed. The example homepage or remix file you uploaded does not appear only on the desktop connected via LAN. I don't think it's a problem with my account. I think there may be a problem with the component settings themselves or with supabase settings. Is there any solution?

  • @framer.university

    @framer.university

    Ай бұрын

    Can you send a preview or remix link?

  • @KaizenUI
    @KaizenUIАй бұрын

    I don't have the like counter component in my asset. How should i do the next part?

  • @framer.university

    @framer.university

    Ай бұрын

    Copy the comp to your project.

  • @G.GroupInvest
    @G.GroupInvest5 ай бұрын

    Nice

  • @framer.university

    @framer.university

    5 ай бұрын

    thanks :)

  • @guapshonen
    @guapshonen5 ай бұрын

    Hi Nandi. How does this work with cms pages. Will you need to create multiple tables on supabase for each CMS pages?

  • @framer.university

    @framer.university

    5 ай бұрын

    No. You just place the button on the CMS detail pages and they will count separately.

  • @guapshonen

    @guapshonen

    5 ай бұрын

    @@framer.university awesome. Thanks

  • @glagraphy6533
    @glagraphy65334 ай бұрын

    is there any database of any shopping platform to do a e-commerce shop with a shopping cart?

  • @framer.university

    @framer.university

    4 ай бұрын

    You can integrate lemomsqueezy checkout or use Shopify with framercommerce.com

  • @Gigczan
    @Gigczan3 ай бұрын

    Hey Nandi, can you make a tutorial on how to setup authentication with supabase, for a membership site with gated content?

  • @framer.university

    @framer.university

    3 ай бұрын

    for that I'd use something like Outseta: www.outseta.com/guides/how-to-build-a-membership-site-with-outseta-framer or FramerAuth: framerauth.com/

  • @CoilFYZX
    @CoilFYZX4 ай бұрын

    Hey, I hate to be a heel, but I believe it's stopped working. The connection to the database still works great but the counter and variant are no longer changing. Any suggestions please?

  • @framer.university

    @framer.university

    4 ай бұрын

    Pls try going to assets panel and click the update button next to the Like Counter component. Framer made an update that broke the comp. Should be fixed.

  • @CoilFYZX

    @CoilFYZX

    4 ай бұрын

    @@framer.university This is why you’re the best! Thanks so much!

  • @CoilFYZX

    @CoilFYZX

    4 ай бұрын

    @@framer.university Thank you so much! That worked!

  • @garo_narsisian
    @garo_narsisian15 күн бұрын

    Such a great video, but on the websites, the count doesn't really work, when I click on one website the count goes up, but on a different website, when I click the count goes down instead of going up and it's the liked variant instead of the default variant. Does anyone have a solution?

  • @framer.university

    @framer.university

    14 күн бұрын

    You have unique button ID for each button comp?

  • @sashoib
    @sashoib5 ай бұрын

    Will this work for CMS Blog pages?

  • @framer.university

    @framer.university

    5 ай бұрын

    Yes.

  • @-_SamsulHadi
    @-_SamsulHadi5 ай бұрын

    🔥🔥🔥

  • @jinskim7615
    @jinskim76153 ай бұрын

    Thanks for the video. One question, please. At 12:40, the counter shows 1. If you click it again, I believe it will become 2. So, one user can make multiple likes. Would it be possible to set up so that one user can make only 1 like?

  • @framer.university

    @framer.university

    3 ай бұрын

    One user can only make one likes, don’t worry.

  • @roxytherotty5811
    @roxytherotty58114 ай бұрын

    i am not able to find the like counter in the assets plz help

  • @framer.university

    @framer.university

    4 ай бұрын

    framer.university/resources/real-like-button-component-for-framer Here it is!

  • @michaeltan7848
    @michaeltan78485 ай бұрын

    Nandi, you should have a tutorial teaching how to build a multilingual website without using the locale feature. At $40 a month is daylight robbery. There must be another to do this without breaking the bank., like build pages with a different language with translation from ChatGPT, and then building the links on the menu bar

  • @maskedvillainai

    @maskedvillainai

    5 ай бұрын

    What’s $40?

  • @1-jf5nf
    @1-jf5nfАй бұрын

    When I leave the remix link here, my comment keeps getting deleted. Can I have your email address? However, when the site below provided by Framer University is connected via LAN cable, only a black screen and remix and copy components are displayed, and the components are not visible. If I connect your laptop to Wi-Fi in the same place, I can see like buttons.

  • @user-ni6oz7bj9l
    @user-ni6oz7bj9l4 ай бұрын

    This is the first tutorial that didn't work for me from your channel. I published the website, and tried to click on the button, but the cursor doesn't appear, just a text cursor.

  • @framer.university

    @framer.university

    4 ай бұрын

    Can you send the link to the site? Maybe also a remix link?

  • @CoilFYZX

    @CoilFYZX

    4 ай бұрын

    @@framer.university Mine stopped working. It worked yesterday...but now neither the counter nor the variant change. I appreciate this tool, I just want to say that. I'm totally grateful for the free resources.

  • @MarcC696
    @MarcC6965 ай бұрын

    Incredible powerfull component, Thanks a lot! I have a problem that I don't know why it happens. If I press the button on one device, turns to "Liked" variant with number 1, but when I go to press this button with another device, the button appears as "Liked" and it doesn't stack the likes, it turns to "Default" variant with 0 likes. The columns on Supabase are added correctly and also the URL and Keys. The component have the Default variant and Liked variant and the Number Text with the Amount Variable. I don't know how to fix it :(

  • @framer.university

    @framer.university

    5 ай бұрын

    It has spam protection so users from the same ip address can only like 1x on a button. Ask your friends to check and like it.

  • @yaizidoro4373
    @yaizidoro43735 ай бұрын

    Hi, i have tried and i have some problems. I set the table in Supabase and copy the URL, Key, Table, choose my component and set the ID. But the button is not showing up. I have tried with your component but not work at all. The button only come visible when i connect with your button component and reconnect in my button component. :s

  • @framer.university

    @framer.university

    5 ай бұрын

    Try reloading the project if this happens.

  • @yaizidoro4373
    @yaizidoro43735 ай бұрын

    Sorry, I already found the problem, I think it's some kind of bug. When I connect the button, it immediately doesn't appear, I have to disconnect and connect again for it to appear. I did this and it worked.

  • @framer.university

    @framer.university

    5 ай бұрын

    I’m glad it works now. You can also try reloading the project in these cases.

  • @user-me2zz2zb9d
    @user-me2zz2zb9d5 ай бұрын

    I always wonder why meningful video had less viewrs,.

  • @framer.university

    @framer.university

    5 ай бұрын

    I also wonder. Gotta keep pushing and improving.

  • @maskedvillainai
    @maskedvillainai5 ай бұрын

    To be completely honest it’s hard to grasp the logic in appeal as I’m simply using someone else’s custom code to avoid coding but costing me still complex (indirect native mimicking via signing up for yet another external product just to accomplish a single task that will guarantee only harm to the perception of the designer). Social cues are not only subjectively ranked in societal classes but also heavily linked to negative emotional tiggers of the associated person. In other words, making a single number go up once looks like a lot of effort to beg for acceptance using passive social influence as a bragging right. Be my guest, but maybe do this with an emote or something relevant to a story being told l ;)

  • @pxllfx3207
    @pxllfx32075 ай бұрын

    Do you have discord? If yes than I want to join

  • @framer.university

    @framer.university

    5 ай бұрын

    I don’t have discord.

  • @T-me3lk
    @T-me3lk5 ай бұрын

    1. I used the remix website you provided to add a CMS and insert a like button into it. Then I directly published the website and tested the results. 2. The like button updates synchronously when previewing the website. 3. However, after updating the website and clicking on the live site, the like button does not synchronize across different pages with the same CMS. Can you advise me on what to do next? 😭😭😭

  • @framer.university

    @framer.university

    5 ай бұрын

    Buttons will count separately on each page.