Cómo agregar botón de 'Me gusta' que sigue al cursor

  • Autor Autor quimbox
  • Fecha de inicio Fecha de inicio
quimbox

quimbox

1
Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Hola, bueno este es mi primer post acá, y les quiero compartir un código que muestra el botón me gusta en un lado del cursor por el tiempo que uno lo haya configurado.

Para comenzar con esto, primero hay que crear un archivo HTML, con el siguiente codigo:

Insertar CODE, HTML o PHP:
<iframe src="http://www.facebook.com/plugins/like.php?href=http://facebook.com/forobeta&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>

y colocarlo entre las etiquetas <body> </ body> y guardarlo con el nombre que desea en este caso megusta1.html

luego crear otro archivo en este caso un script con formato .js que se llamara megusta2.js y agregar el siguiente código:

OJO: En este codigo se va a escribir la direccion de dond esta ubicado el archivo que se creo anteriormente el megusta1.html para que pueda funcionar correctamente. para eso buscan la linea donde esta la variable i.

Insertar CODE, HTML o PHP:
// Variables 
var opacity = 0.9; //para modificar la opacidad del boton
var time = 20000; // para modificar el tiempo que se quiere que se muestre el boton

if ((document.getElementById) && window.addEventListener || window.attachEvent) { (function () {
                        var b = "#ff0000";
                        var d = document;
                        var c = -10;
                        var f = -10;
                        var r;
                        var g = "";
                        var h = document.getElementsByTagName('div').length;
                        var i = "<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='megusta1.html' style='position:absolute;width:400px;height:70px;overflow:hidden;border:0;opacity:" + opacity + ";filter:alpha(opacity=" + (opacity * 100) + ");'></iframe>";
						
	
                        document.write(i);
                        var j = document.getElementById("theiframe");
                        document.getElementsByTagName('body')[0].appendChild(j);
                        var k = "px";
                        var l = (typeof window.innerWidth == "number");
                        var m = (typeof window.pageYOffset == "number");
                        if (l) r = window;
                        else {
                                    if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0) r = d.documentElement;
                                    else {
                                                if (d.body && typeof d.body.clientWidth == "number") r = d.body
                                    }
                        }
                        if (time != 0) {
                                    setTimeout(function () {
                                                document.getElementsByTagName('body')[0].removeChild(j);
                                                if (window.addEventListener) {
                                                            document.removeEventListener("mousemove", mouse, false)
                                                } else if (window.attachEvent) {
                                                            document.detachEvent("onmousemove", mouse)
                                                }
                                    },
                                    time)
                        }
                        function scrl(a) {
                                    var y, x;
                                    if (m) {
                                                y = r.pageYOffset;
                                                x = r.pageXOffset
                                    } else {
                                                y = r.scrollTop;
                                                x = r.scrollLeft
                                    }
                                    return (a == 0) ? y: x
                        }
                        function mouse(e) {
                                    var a = (m) ? window.pageYOffset: 0;
                                    if (!e) e = window.event;
                                    if (typeof e.pageY == 'number') {
                                                c = e.pageY - 5 - a;
                                                f = e.pageX - 4
                                    } else {
                                                c = e.clientY - 6 - a;
                                                f = e.clientX - 6
                                    }
                                    g.top = c + scrl(0) + k;
                                    g.left = f + k
                        }
                        function ani() {
                                    g.top = c + scrl(0) + k;
                                    setTimeout(ani, 300)
                        }
                        function init() {
                                    g = document.getElementById("theiframe").style;
                                    ani()
                        }
                        if (window.addEventListener) {
                                    window.addEventListener("load", init, false);
                                    document.addEventListener("mousemove", mouse, false)
                        } else if (window.attachEvent) {
                                    window.attachEvent("onload", init);
                                    document.attachEvent("onmousemove", mouse)
                        }
            })()
}
y en el head <head> </head> de nuestra pagina colocaremos estos codigos

Insertar CODE, HTML o PHP:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>var sc_project=6588615;var sc_invisible=0;var sc_security="b4362c6f";var sc_text=1;</script>

luego para ubicar el boton donde queramos que se vea colocamos el siguiente codigo

Insertar CODE, HTML o PHP:
<script src='http://URL-DONDE-ESTA-SU ARCHIVO-ALOJADO/megusta2.js' type='text/javascript'></script>

y listo este ultimo codigo lo pueden ubicar donde ustedes deseen. puede ser en el index de su pagina, en alguna categoria o que aparezca en todas las paginas.

Recuerden subir los archivos megusta1.html y megusta2.js a un servidor que permita hacer hotlink. y tambien recuerden cambiar la url del facebook por la pagina de fans de la suya.

Vean la prueba aqui DEMO

Puede ser un poco molesto esta implementacion pero es su decision si la implementan o no, pueden implentarla cada cierto tiempo tambien. a ver si consiguen unos cuantos "likes" en su pagina. Tambien pueden implementarlo algun dia que tengan un evento en su pagina o en el momento en que ustedes vean que esten recibiendo muchas visitas.


Aclaratoria este código fue escrito en otro foro casi con la misma funcion, y yo decidi agregarle una pequeña funcion o hacerle una pequeña mejora para que se mostrara el boton un poco mas completo, y tambien añadiendole un marquee con un texto para que el usuario sepa que es lo que pasa.

Eso es todo.
 
Última edición:
Wooo,, se ve muy interesante 🙂
Aunque un poco molesto... pero gracias!!
 
Wooo,, se ve muy interesante 🙂
Aunque un poco molesto... pero gracias!!

Si se me habia olvidado agregar eso, xD que se ve como un poco forzado casi obligando al usuario a que le de click en me gusta. saludos.
 
La verdad que si es un poco molesto!
 
La verdad que si es un poco molesto!

si es un poco molesto, pero solo es otra alternativa. Para eso se puede jugar con el tiempo en que se muestra para que no dure tanto a la vista y no sea tan molesto por ejemplo se puede colocar por unos 5 segundos.
 
Claro que se ve muy interezante pero si el boton me gusta sigue al cursor entonces como se hara clic en me gusta ?
 
Quizas es raro lo que pregunto...
pero agregar este boton me gusta, puede traer problemas con google adsense?
 
En un blog Hoygan va como piña xD

Puede que lo implemente en Vagandoenlanet.com :encouragement:
 
Claro que se ve muy interezante pero si el boton me gusta sigue al cursor entonces como se hara clic en me gusta ?

Si lo sigue es cierto, pero después de X distancia. Y el mismo código permite que el puntero se establezca encima del botón y así le pueden dar me gusta. Sino el código no serviría para nada.

Quizas es raro lo que pregunto...
pero agregar este boton me gusta, puede traer problemas con google adsense?

No creo que tengas problemas porque en este código no estas mostrando ningún formato de publicidad de Adsense, y mucho menos estas incitando a que den click en los anuncios de Adsense o cualquier otro sistema que uses. Solamente se limita es a FB.
Saludos
 
Quizas es raro lo que pregunto...
pero agregar este boton me gusta, puede traer problemas con google adsense?

A mí me hicieron una revisión de adsense por algo mucho menos descarado que esto. Lo que preguntas no es raro, lo raro sería usar esta técnica en una web seria y con adsense.
 
Atrás
Arriba