CODEWITHSUNDEEP
htmlwebbuttonwidget
Nicol
Nicol

Reputation: 61

How to create a simple Like Button?

I need a simple like button. It must allow visitors to vote without logging into their social networks accounts.

Any ideas?

Upvotes: 5

Views: 13735

Answers (4)

Irene
Irene

Reputation: 26

One cannot simply create a like button :D Your button will have store the "likes" somewhere (usually a database), which is by definition a dynamic process and find a way to deal with a few security and UX issues.

If you are using React I created this service https://lyket.dev/, that will take care of everything.

Upvotes: 0

ColinE
ColinE

Reputation: 70160

I recreated a Medium-style applause button:

http://applause-button.com/

The button persists claps to a hosted back-end service, so no need to spin up your own database. Adding it is as simple as follows:

<head>
  <!-- add the button style & script -->
  <link rel="stylesheet" href="dist/applause-button.css" />
  <script src="dist/applause-button.js"></script>
</head>
<body>
  <!-- add the button! -->
  <applause-button style="width: 58px; height: 58px;"/>
</body>

Upvotes: 4

TimPietrusky
TimPietrusky

Reputation: 778

I recreated the Kudos buttom from svbtle as an intependent widget.

kudosplease.com

What is a "Kudos"?

To gain kudos is to earn respect and recognition. A one-element kudos widget with no dependencies.

"kudos" on urbandictionary

How to use it

1. Add the CSS/JS to your page

2. Add the widget HTML

<div class="kudos" 
     data-amount="0" 
     data-url="domain.tld/my-awesome-article"></div>

3. Initialize the widget via JS

new KudosPlease({ 
  el : '.kudos',
  duration : 1500,
  persistent : true,
  status : {
    alpha: 'fontelico-emo-shoot',
    beta: 'fontelico-emo-shoot',
    gamma: 'fontelico-emo-beer'
  }  
});

Free API or host yourself

The amount of kudos for a specific url is saved in my backend, but you can also download it on GitHub: https://github.com/TimPietrusky/KudosPlease

Examples

Upvotes: 4

Dustin
Dustin

Reputation: 1026

You can store 'likes' in your own database. Just have a 'like' link that hits the server and updates a count in the database table. Of course this requires a database and server side language (PHP, Ruby, Python, etc).

The https://svbtle.com/ blog network has a cool little 'Kudos' button which anonymously likes when you hover over the kudos button. http://howtomakelightning.com/365/

I am not sure how you would do it on a static website though.

Upvotes: 0

Related Questions