Tutorial: Ocultar Like con CSS

Cicklow Seguir
Seguidores
20

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Buenas en esta ocasión aprenderán como ocultar el boton de like abajo de un link cualquiera, solo con CSS.
CSS tiene una propiedad llamada pointer-events que lo que hace es ver que hacemos con el link al aplicarle este CSS. De esta manera lo que realizaremos es colocar un link con esta propiedad arriba de un boton like, entonces el usuario piensa que hace clic en el link y en realidad hace clic en el like. Ya que le sacamos (con "none") la propiedad de target al link, osea le sacamos la acción de link verdadera, dejandolo como un texto normal... (es pocas palabras y bien simple, anulamos el link)

sin-t-tulo-436fefe.png
Como ven en la imagen se encuentra el link: Click Aqui (con el like oculto atras) y otro con un fondo rojo semi transparente que muestra realmente como se oculta el like!

Cabe destacar que esto no controla si el user ha echo clic (se puede pero ya se aplicaría JS y no solo CSS), y no es el tipico autolike que se oculta atrás del puntero del mouse... puede ser usado para landing colocando por ejemplo un link que dica: Click Para Continuar...etc...

Lo que necesitariamos es solo CSS de esta manera:
HTML:
<style>
	.wrapper a.facebook {
	    position: absolute; //Nos posicionamos en la pantalla
	    padding:5px 46px 5px 15px; //Le damos los margenes necesarios para tapar el like o cualquier otra cosa que coloquemos atras
	    margin:-8px 0 0 -315px; //Estos editar si o si para ubicar bien el link arriba del boton like
	    pointer-events:none; /* este es el truco! */
	}
	a.hide {
	    background-color:#3c5a76; //Mismo color de fondo que el fondo del sitio
	    text-decoration:none;
	}
	.wrapper {
		margin-top:20px;
	}
	</style>
Y este code:
HTML:
<div class="wrapper"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fforobeta.com%2F&amp;width=90&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90pxpx; height:35px;" allowTransparency="true"></iframe><a href="#" class="facebook hide">Click Aqui</a></div>

Demo: Auto Like

Este es un ejemplo de inicio ;) ustedes denle el uso que quieran al mismo :)

PD: No solo funciona con los like, sino tambien con los botones de twitter y demas cosas que quieran ocultar... Esto es llamado ClickHacking
PD: El like es a forobeta asique no hay problemas ;)
PD: NO lo detecta ningun antivirus ni nada raro... ;)
PD: Les doy una ayuda mas si quieren ocultar el boton, en ves de usar un iframe debajo del link tienen que usar el JS del like, y capturar el evento edge.create, de esta manera eliminan ese like y colocan una cookie para que no aparezca mas.


No citen todo el post, ya que si hago modificaciones en el post inicial dsp queda post viejos...​
 
Última edición:

merette

VIP
Zeta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
16 Feb 2011
Mensajes
1.527
Graciasss, Excelentee bro
 

mucaleta

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Jul 2013
Mensajes
166
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
muchas gracias amigo , disculpa si lo quiero agregar a worpress como lo puedo hacer , disculpe mi inesperiencia
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
muchas gracias amigo , disculpa si lo quiero agregar a worpress como lo puedo hacer , disculpe mi inesperiencia

agregas el CSS en el header.php y el code de mas abajo en donde quieras que este el autolike...
 

deskpro123

Iota
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
5 Jun 2012
Mensajes
2.014
Gracias [MENTION=9679]cicklow[/MENTION] y lo mejor es que el antivirus no lo detecta como ClickJacking como pasa con el autolike.
 

Mormai

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
17 Oct 2013
Mensajes
661
Gracias por el aporte :D disculpen la ignorancia :p se podria utilizar para ocultar el botón de suscribirse de facebook ?
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Gracias por el aporte :D disculpen la ignorancia :p se podria utilizar para ocultar el botón de suscribirse de facebook ?

podes ocultar lo que quieras atras del link. hasta publicidad...
 

carloslp0

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 Dic 2013
Mensajes
224
Gracias

Enviado desde mi XT1032 mediante Tapatalk
 

Xenus99

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
5 Jul 2011
Mensajes
319
Gracias por el aporte!

Que sucede cuando el visitante ya le dio click anteriormente? Lo toma como dislike?
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Gracias por el aporte!

Que sucede cuando el visitante ya le dio click anteriormente? Lo toma como dislike?

sip, es por eso que les indique que para evitar eso tienen que usar JS, este tutorial solo usa CSS y el iframe del like, para evitar dislike tienen que usar CSS y el JS del like. Asi como este tutorial y otros de mis tutoriales, la gracia es que ustedes tmb aprendan a hacer este tipo de cosas y no darle todo en bandeja :)
 

Xenus99

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
5 Jul 2011
Mensajes
319
Por supuesto, muchas gracias :encouragement:
 

marcs2011

Zeta
Verificación en dos pasos activada
Desde
21 Sep 2012
Mensajes
1.518
Excelente, pensaba hacer esto, hasta se me habia olvidado, la idea era que al entrar la web, este como tipo congelado, y al dar un clik, en cualquier parte de la web, ya lo descogele, pero sin que el usuario sepa que hizo, osea un me gusta.

XD.
 
Arriba