
Cicklow
Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
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:
Y así lo verán los amigos (en facebook):
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:
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):
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:
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...)
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):
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)
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:
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)
Y en FB:
Para que funcione con cada post en WP solo tienen que hacer estas modificaciones....
buscar
cambiar por
......
y tambien
por
eso hace que funcione con cada post.
Si tienen otra llamada al SDK de facebook
Puede que el script no funcione bien, o simplemente muestre el like en español
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:

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

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" />
- 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>
HTML:
pointer-events:none
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>
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 } ?>
Y aca les dejo un ejemplo de como se vería en un WP (El WP es del tutorial: Tu propio sitio de tarot)

Y en FB:

Para que funcione con cada post en WP solo tienen que hacer estas modificaciones....
buscar
PHP:
if (getCookie('like') != 1) {
PHP:
if (getCookie('like<?php the_ID(); ?>') != 1) {
y tambien
PHP:
setCookie('like', '1', 100);
PHP:
setCookie('like<?php the_ID(); ?>', '1', 100);
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'));
Última edición: