¿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.