Bases de Datos - COMO COLOCAR EL BOTON DE "ME ENCANTA", AYUDA :(

Hola, disculpen, me podrían ayudar, por favor.

Es que llevo varios días intentando usar códigos para obtener el botón de Me encanta como la de Instagram para un sitio web,

No sé, si me podrían ayudar a conseguir los códigos o dar algún link para apoyarme, he usado estos códigos, pero creo que están mal, no sé, pero me sale error, quizás hay algo mal.

<div class="feeds">
<div class="feed">
<p>Click on the heart</p>
<div class="actions">
<div class="heart"></div>
</div>
</div>
</div>
.heart {
background-image: url(web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
background-size: 1450px;
cursor: pointer;
display: inline-block;
height: 50px;
width: 50px;
}
.heart:hover
{
background-position: right;
}
@-webkit-keyframes heartTransition
{
0% {background-position: left;}
100% {background-position: right;}
}

@keyframes heartTransition
{
0% {background-position: left;}
100% {background-position: right;}
}
.heart_animate
{
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: heartTransition;
-webkit-animation-timing-function: steps(28);
animation-duration: .8s;
animation-iteration-count: 1;
animation-iteration-count: infinite;
animation-name: heartTransition;
animation-timing-function: steps(28);
background-position: right;
}
$(document).ready(function(){
$('.heart').on('click',function(){
$(this).toggleClass("heart_animate");
});
});

Muchas gracias