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

[@willianmatiola]

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]

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

[@willianmatiola]

@Concepttopia 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.

[@yaizidoro4373]

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

[@framer.university]

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

[@SamAnthonyDesign]

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

[@framer.university]

My pleasure! :)

[@FloNocode]

You are a Gift for framer community !

[@framer.university]

Appreciate your support :)

[@dansallai]

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.

[@aqema]

Hi, just wanted to notify you that supabase has changed it's Policies section and we can't create the same policies from the templates anymore, thus the like button doesn't work now. Can you make an update video? I'll stay subscribed ;)

[@Rikoshet124]

Hey, did you find a solution?

[@itsOlaOlowo]

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]

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

[@itsOlaOlowo]

@@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]

@@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

[@funkymonk8240]

Legendary stuff

[@framer.university]

Appreciate youuu🫶🫶

[@CoilFYZX]

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]

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]

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

[@CoilFYZX]

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

[@Skar-w4v]

Hey Nandi I would also like to know in how many more ways can we make use of the database integration in framer, it would be a lot of help if you can make some more videos related to these. Btw very helpful video😇

[@ShayneCuffy]

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]

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

[@fekryaiad]

Thanks buddy! great tutorial

[@framer.university]

Glad it helped!

[@ZUTHINA]

Thanks for the tutorial ! Is there a limit for button IDs? I'm going to make a page with let say 30 like buttons or more for an event, wondering if there would be any issues

[@youngboikt]

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

[@alvinniza]

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

[@framer.university]

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]

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

[@suthinaworks]

Thank you so much! But I have problem finding the svg component in my framer project, also I cannot right click and copy the svg icons from Figma, and is there any way to scale down the buttons for phone version ? Thanks

[@Superoutman]

Thank you for your work and tutorials, which have added powerful features to my website! 👍Additionally, I would like to ask you a question. When using this component, it displays normally on the computer, but it doesn't show on mobile phones and tablets. What could be the reason for this (I noticed your demo page has the same issue)?

[@Superoutman]

After testing, it turns out that only my computer can see the component, while others cannot. Although others cannot see the component button, there are request records in the Supabase logs. I'm not very technically inclined and don't know where the problem lies.

[@Superoutman]

In the end, I found out that it was my network issue causing the problem; actually, it was running normally!

[@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]

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

[@IsaacLotz]

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]

How did you code the thing to use components?

[@Rikoshet124]

Hi, is there a way to reset the like button daily or weekly for example if we want to make a weekly competition about which product will get the most likes will get featured on the first page of a website etc? Also the button isn't memorising the likes, after refreshing the page all the likes disappear, any idea how to fix that? Thanks in advance, Nandi!

[@guapshonen]

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

[@framer.university]

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

[@guapshonen]

@@framer.university awesome. Thanks

[@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]

Can you send a preview or remix link?

[@false-prophet-abc]

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]

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

[@RobZ-u3r]

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]

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

[@CoilFYZX]

@@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.

[@michaeltan7848]

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

[@AtomicPixels]

What’s $40?

[@Gigczan]

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

[@framer.university]

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/

[@glagraphy6533]

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

[@framer.university]

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

[@garo_narsisian]

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]

You have unique button ID for each button comp?

[@christoanto5968]

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..?

[@suthinaworks]

same here, have you figured out how to solve it ?

[@sashoib]

Will this work for CMS Blog pages?

[@framer.university]

Yes.

[@roxytherotty5811]

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

[@framer.university]

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

[@MarcC696]

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]

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.

[@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.

[@G.GroupInvest]

Nice

[@framer.university]

thanks :)

[@yaizidoro4373]

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]

Try reloading the project if this happens.

[@yaizidoro4373]

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]

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

[@-_SamsulHadi]

🔥🔥🔥

[@BistaAmod]

I always wonder why meningful video had less viewrs,.

[@framer.university]

I also wonder. Gotta keep pushing and improving.

[@AtomicPixels]

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]

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

[@framer.university]

I don’t have discord.

[@T-me3lk]

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]

Buttons will count separately on each page.