Como insertar un contador de los Me Gusta de Facebook en tu web

¿Quieres insertar un contador de la gente a la que le gusta tu página en Facebook? Te voy a mostrar hoy una forma original y distinta de hacerlo. Es mediante un plugin de jQuery.

jqlivelike

Características:

  • Fácil integración
  • Tiene una documentacion muy completa por lo que es fácil de instalar.
  • Utiliza transiciones CSS3.
  • Distintas opciones y tamaños de colocación, por lo que si te parece que ocupa mucho, te invito a que veas otras opciones que te ofrece este plugin.

 

Navegadores en los que funciona el plugin

Funciona en todos los navegadores modernos y en el caso del Internet Explorer para versiones iguales o superiores a la 9. En la 7 y la 8 funciona pero no hace el efecto animado.

 

¿Cómo lo añades a tu página web?

 1.- Cargas el jQuery e incluyes los archivos del plugin LiveLike

<head>
<!-- LIVELIKES STYLESHEET -->
<link rel="stylesheet" href="css/jq.livelikes.css">
<!-- LOAD JQUERY FRAMEWORK (1.4.3 version or higher) -->
<script src="js/jquery-1.4.3.min.js"></script>
<!-- LOAD JQUERY TRANSIT PLUG-IN FOR CSS3 ANIMATIONS (Optional)
This plugin enables CSS3 animations. -->
<script src="js/jquery.transit.min.js"></script>
<!-- JSON SUPPORT FOR IE7 (Optional)
You must load this plugin if you want to save live data  by using cookie or localStorage on old Internet Explorer web browsers like IE7. -->
<!--[if IE 7]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<![endif]-->
<!-- LOAD JQ.LIVELIKES PLUG-IN -->
<script src="js/jq.livelikes.js"></script>
</head>

 

2.- Insertas en el HTML el siguiente código

Puedes elegir entre tres variantes dependiendo del resultado final que quieras conseguir (en línea, fijo y popup). En este caso, te voy a mostrar únicamente la variante de la imagen de arriba, que corresponde al estilo en línea.

<body>

<div id=«inline»></div>

</body>

 

3.- Inicializas la función que llama al plugin

Siguiendo el ejemplo anterior de en línea le correspondería el siguiente código, que como puedes ver, es muy personalizable.

<script>
    $(window).load(function(){
        $("#inline").LiveLikes({
            url: "https://www.facebook.com/facebook", //change url
            theme: "inline",
            words: {
                prefix: "WOW! DO YOU BELIEVE IT?<BR/>",
                suffix: "PEOPLE LIKE MY PAGE!"
            },
            button: {
                enabled: true,
                id: "button",
                layout: "button_count",
                action: "like",
                face: false,
                share: false,
                width: 90,
                height: 21,
                appId: 447356255394783 //change Facebook Application ID
            }
        });
    });
</script>

 

Como puedes ver es una forma fácil de insertar un contador de Facebook en tu página web con jQuery.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio