Softr tip: How to create a like button

There are many ways to add like buttons to softr. This is one way, using appspan and an airtable automation to add the logged-in user’s email to the airtable listing.

Softr tip: How to create a like button
Category
tip
This is what we will be doing:
This tutorial will be updated with the changes that are coming to the appspan UX. A second tutorial will be shared to integrate this like button into a list and detect the correct record ID from that list.

STEP 1: Add the like button

In a custom code block, add this code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"</script>
<script src="https://use.fontawesome.com/7ad89d9866.js"></script>
<script>
var data = {};
if (true) data.email = logged_in_user.softr_user_email;
if (true) data.fullName = logged_in_user.softr_user_full_name;
if (true) data.currentURL = location.href;

function like() {
        callWebHook('LIKE', data)
};
</script>
<script>
$(function(){
	$(document).one('click', '.like-review', function(e) {
		$(this).html('<i class="fa fa-heart" aria-hidden="true"></i> You liked this');
		$(this).children('.fa-heart').addClass('animate-like');
	});
});
</script>
Followed by this CSS to style the like button:
<style>
.like-content {
    display: inline-block;
    width: 100%;
    padding: 40px 0 0;
    font-size: 18px;
    text-align: center;
}
.like-content span {
	color: #9d9da4;
	font-family: monospace;
}
.like-content .btn-secondary {
	  display: block;
	  margin: 40px auto 0px;
    text-align: center;
    background: #ed2553;
    border-radius: 3px;
    box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
    padding: 10px 17px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    outline: none;
    color: #ffffff;
    text-decoration: none;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
	  transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
	  margin-right: 5px;
}
.animate-like {
	animation-name: likeAnimation;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-duration: 0.65s;
}
@keyframes likeAnimation {
  0%   { transform: scale(30); }
  100% { transform: scale(1); }
}
</style>
Followed by this HTML to show the button:
<div class="like-content">
  <button class="btn-secondary like-review" onclick="like()">
    <i class="fa fa-heart" aria-hidden="true"></i> Like
  </button>
</div>
Signup to appspan
Create an airtable automation trigered by a webhook, and add the URL from that webhook to appspan like this:

STEP 3: Prepare your tables to records likes

On your users table, create a linked record field to your listings table named liked
On your listings table, create:
A URL field with the link to the page. You can use this formula:
CONCATENATE("https://www.website.com/listing/",{SEO:Slug},"/r/",RECORD_ID())
A linked record field to the user's email (if necessary using an additional lookup field).

STEP 4: Prepare the automation to receive the likes

Your automation will have three steps:
First you find the user who liked by matching the logged-in user email to the email field in your users table. This is step a.
Then you find the listing that has been liked by matching the current URL to the url column of your listings table. This is step b.
Finally you concatenate in this order:
  • the Name of the listing from step a
  • a comma
  • the array of names of the `liked` field for the user found in step b.
Here is a quick glance at how I have it set up:
Activate the automation and you are good to go!
Joachim Brindeau

I’m a lawyer who likes to tinker with no-code on his free time.

    0 comments