2

Vale, mi cuestión es hacer un contador de clicks o likes de manera que cuando alguien clickee un <div> este sume el click a un <span> en cualquier parte del articulo. Esto quiere decir que, si tengo un click nuevo en una foto me ponga el total de personas que hicieron click en esa foto, en el span de "Me gusta" sin actualizar la pagina. Y que pueda manejarlo por ids para que así pueda tener muchas fotos "likeables". He visto uno que otro tema sobre esto por afuera pero no he podido adaptarlo a lo que necesito. No tengo mucho conocimiento en PHP. Y aqui les dejo un ejemplo basico de mi código.

$(document).ready(function(){

  $(this).find(".img-hover").mouseenter(function(){
  
    $(this).css({"background-color": "rgba(255, 255, 255, 0.5)"});
    $(this).find("i").css({"color": "rgb(27, 27, 28)"});
    $(this).find("i").stop().removeClass("fa-2x");
    $(this).find("i").stop().addClass("fa-4x");
    $(this).find("span").stop().fadeIn(200);
  
  });
  
  $(this).find(".img-hover").mouseleave(function(){
  
    $(this).css({"background-color": "rgba(0, 0, 0, 0)"});
    $(this).find("i").css({"color": "rgba(0, 0, 0, 0)"});
    $(this).find("i").stop().removeClass("fa-4x");
    $(this).find("i").stop().addClass("fa-2x");
    $(this).find("span").stop().fadeOut(200);
  
  });
  
  $(this).find(".fa-heart").mouseenter(function(){
  
    $(this).css({"color": "rgb(234, 96, 86)"});
    
  });
  
  $(this).find(".fa-heart").mouseleave(function(){
  
    $(this).css({"color": "rgb(27, 27, 28)"});
    
  });

});
*{
 padding: 0;
 margin: 0;
 font-family: sans-serif;
}

.contenedor {
 position: relative;
 width: 250px;
 height: 450px;
}

img {
 max-width: 100%;
 position: absolute;
}

.img-hover {
 width: 100%;
 height: 99%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 100;
 transition: .2s;
 background-color: rgba(0, 0, 0, 0);
 text-align: center;
}

.fa-heart {
 color: rgba(0, 0, 0, 0);
 position: absolute;
 top: 40%;
 left: 40%;
 transition: .2s;
}

.fa-heart:hover {
 cursor: pointer;
}

.cuenta {
 padding: 3px 8px;
 background-color: rgb(247, 247, 247);
 border-radius: 3px;
 color: rgb(27, 27, 28);
 font-size: 12px;
 right: 0;
 bottom: 0;
 margin-right: 5px;
 margin-bottom: 6px;
 position: absolute;
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/acad8e21f9.js"></script>
<div class="contenedor">
  <img src="https://s-media-cache-ak0.pinimg.com/736x/0f/61/18/0f6118f167ccca50dff9e06f5b27146b.jpg" alt="img">
  <div class="img-hover">
    <!--Este es el "div" del click-->
    <i class="fa fa-heart fa-2x"></i>
    <!--Este es el "span" del resultado-->
    <span class="cuenta">716</span>
  </div>
</div>

5
  • 3
    Si quieres tener los datos de distintas personas y el acumulado necesitas guardarlo en base de datos y consultarla. Podrías detectar el click por javascript o jquery y enviarlo por ajax a un archivo que guarde en base de datos.
    – Carmen
    el 22 jun. 2017 a las 21:53
  • 1
    ¿Quieres guardar la info en una base de datos y despues mostrarla o solo quieres que el span se actualice con el valor + 1? Es que me causa confusion el titulo de tu pregunta. el 22 jun. 2017 a las 21:55
  • 1
    y cuando le de otra vez click se tiene que desclickiar y la BD se tiene q descontar y si otra vez le da click y asi sucesivamente no siempre le daran click y ahi muera la cosa, que pasa si desclikea? el 22 jun. 2017 a las 21:58
  • Exacto básicamente un sistema de likes y dislikes, y por supuesto en base de datos, NO EN LOCAL. Si, eso de detectar el click y mandarlo a un archivo que haga la tarea, ya lo se hacer, la cuestión es el archivo PHP que haga la tarea de enviar a la base de datos la información y luego una manera de solicitar los datos en el <span> . Como dije no se PHP ni la manera de programar la tabla. el 22 jun. 2017 a las 23:28
  • 1
    Como ya te comenté un modo es enviar los datos por ajax al archivo que consulta la base de datos y en el onsuccess del proceso actualizas tu html con el nuevo dato. Necesitarías realizar una consulta tipo select cada x tiempo para actualizar a todos los usuarios, y otra tipo update cada vez que hagan click. Como consultar/ modificar la base de datos puedes verlo en tutoriales, por ejemplo [w3schools.com/php/php_mysql_insert.asp]. Prueba a desarrollar el código y si tienes problemas plantealos con el código probado para que podamos ayudarte.
    – Carmen
    el 23 jun. 2017 a las 18:12

2 respuestas 2

3

Posible respuesta, OJO, no lo he probado, puede contener fallos, está hecho a ojo:

HTML DE EJEMPLO

<div id="clickLike">LIKE</div><!-- poner por ejemplo un corazon como en instagram, que se ponga en rojo si el usuario le dio like-->
<span id="totalLikes"></span>

JS

$("#clickLike").on("click",(evt)=>{
  evt.preventDeault();
  $.ajax({
    url : "archivoQueManejaLikes.php",
    method: "POST", //o GET, la diferencia es que se vean los datos o no en el enlace
    data : {
      "idPublicacion" : /*Asignarle una id, o introducirla en tu html y después recibirla $("elementoQueGuardaId").attr("idAlgo")*/ "algo",
          ,"idUsuario" : /*LA ID DEL USUARIO QUE DA LIKE para que no le dé infinitos*/"algo"}
  }).done((data)=>{
    //El dato debería ser el número de likes y posiblemente la id del artículo
    var datos = JSON.parse(data); //Es conveniente siempre comunicarse mediante json
    $("totalLikes").text(datos.likes);//por ejemplo
  });
});

PHP

if(isset($_POST['idPublicacion']) && isset($_POST['idUsuario'])){
  manejaLikes($_POST['idPublicacion'], $_POST['idUsuario']);
}

function manejaLikes($pub, $usr){
  $conn = new Mysqli (/*DATOS CONEXION A BASE DE DATOS*/);
  //primero intentemos saber si el usuario ya dio like en la publicación, a lo mejor lo que quiere es retirarlo
  //saber si han funcionado El delete o el insert
  $operacionDI = false;
  $sql ="SELECT * from likes WHERE id_usuario = ".$usr." AND id_publicacion = ".$pub;
  $result = $conn->query($sql);
  if($result){
    if($result->num_rows > 0){
      //el usuario ya habia dado like, eliminar el like
      $delete = "DELETE FROM likes where id_usuario = ".$usr." AND id_publicacion = ".$pub;
       $result2 = $conn->query($delete);
        if($result2){
          $operacionDI = true;
        }
    }else{
      $insert = "INSERT INTO likes (id_usuario, id_publicacion) values (".$usr.", ".$pub.")";
       $result3 = $conn->query($insert);
        if($result3){
          $operacionDI = true;
        }
    }
  }
  if($operacionDI){
    $likes = "select count(*) from likes where id_publicacion = ".$pub;
    $resultFinal = $conn->query($likes);
    if($resultFinal){
      $data = [];
      $data['likes'] = $resultFinal->fetch_array()[0];
      echo json_encode($data,JSON_FORCE_OBJECT);
    }
  }
}

Ojalá te sirva como referencia para hacer lo que pides, es un ejemplo similar a lo que quieres, por ahí van los tiros :)

0

lo que yo hago es simplemente montar un IFRAME que corra en background es decir invisible con CSS index: -1 luego enviar las peticiones con target | Utiliza PHP |

<?php


// $id es el ID de la imagen que has sacado de la base de datos o simplemente asignale uno


echo "<a href='count.php?id=".$id."' target='myframe'><img src='img.jpg'></a>";

?>

imagino que los ids de la imagen se generan al cargar las imagenes de la base de datos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.