Wordpress y desarrollo web

Haz tu propio Tweet / Like / + 1 para desbloquear el sistema con jQuery

Haz tu propio Tweet / Like / + 1 para desbloquear el sistema con jQuery / Wordpress y desarrollo web

Ir viral solía significar una epidemia de enfermedades, pero ahora es algo que todos los creadores de contenido anhelan. Tú podría confíe solo en la calidad de su contenido: si es lo suficientemente bueno, la gente lo compartirá, ¿verdad?? Tal vez. Pero también puede ayudar un poco a las cosas ofreciéndoles algo extra de valor a aquellos que sí comparten: un cupón, una descarga, una etiqueta con una carita sonriente en el correo o una imagen de un lindo gatito. Hoy te mostraré cómo crear el tuyo propio. Me gusta / tweet / + 1 para desbloquear el sistema Con un poco de jQuery y las API nativas..

Este método es para personas que tienen sus propios sitios web y les gustaría el mecanismo de desbloqueo allí. Si está buscando hacer esto en su página de Facebook, el tutorial básico de Facebook Fan Gate le gusta desbloquear: cómo crear una puerta de Facebook básica de Fan sin pagar por el hosting. Cómo desbloquear: cómo construir una puerta de fan básico de Facebook sin tener que pagar Alojamiento Un uso increíblemente efectivo de una página de marca alojada en Facebook es incentivar a las personas a que les guste la página creando un contenido secreto solo para miembros; comúnmente referido como una "puerta de abanico". Facebook también se ha asociado ... Leer más puede ser más útil.

Cómo funciona

Cargaremos un conjunto de botones de las distintas redes y los conectaremos a sus respectivos eventos o devoluciones de llamada para indicar cuándo se compartió algo. UNA llamar de vuelta es una función que se ejecuta cuando algo más ha terminado, generalmente se pasa como un parámetro a otra función. Por ejemplo, cuando se usa jQuery AJAX, se ejecuta una devolución de llamada exitosa cuando la consulta AJAX ha sido exitosa: hace algo con los datos devueltos, como acusar recibo de los datos del formulario. También estaremos usando eventos - que son un poco más complejas, pero fuera del alcance de este tutorial. Luego, activaremos nuestro propio evento, que contiene el código para revelar una o más partes secretas de la página. Para nuestro propósito, solo esconder un poco de contenido y revelarlo debería ser suficiente, pero puede ajustarlo para que sea un poco más seguro que las cargas a través de AJAX o similar..

Requisitos:

  • jQuery ya debe incluirse y cargarse en el encabezado de su página. No voy a cubrir eso hoy.
  • Debe saber cómo incluir Javascript en la página, ya sea a través de etiquetas de script en línea o en un archivo .JS separado vinculado en el encabezado.

Botones básicos de compartir

Comencemos cargando un conjunto básico de botones para compartir en la página. Hay dos partes en esto, en primer lugar, cargar el JS para los botones (estamos usando una versión asíncrona de estos para evitar el bloqueo de la carga de la página). Aquí están los códigos de las tres redes: no es necesario separarlos en pequeños fragmentos, todos pueden ir juntos en un solo archivo JS.

 / * Facebook * / (función (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/en_US/all.js"; fjs.parentNode.insertBefore (js, fjs); (document, 'script', 'facebook- jssdk ')); window.fbAsyncInit = function () // inicie el FB JS SDK FB.init (status: true, xfbml: true); ; / * Twitter * / window.twttr = (función (d, s, id) var t, js, fjs = d.getElementsByTagName [s]; if (d.getElementById (id)) return; js = d .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); return window.twttr || ( t = _e: [], ready: function (f) t._e.push (f)); (documento, "script", "twitter-wjs")); / * Google Plus * / (function () var po = document.createElement ('script'); po.type = 'text / javascript'; po.async = true; po.src = 'https: // apis. google.com/js/plusone.js '; var s = document.getElementsByTagName (' script ') [0]; s.parentNode.insertBefore (po, s);) ();

A continuación, coloca estos donde quieras que aparezcan los botones:

Recuerde cambiar el atributo de datos a su propio usuario de Twitter. Además, tenga en cuenta la presencia de un parámetro de devolución de llamada en el botón plusOne: no hay ningún evento que adjuntar aquí, solo una devolución de llamada cuando se hace clic en el botón.

Finalmente, crea una nueva definición de clase CSS para “.oculto“, y establecer el pantalla: ninguna propiedad para ello. Todo lo que quieras ocultar hasta que se comparta debe ir aquí.

Asegúrate de que tus botones se estén cargando en este punto.

Adjuntando a compartir eventos

Aquí está la verdadera magia. Empecemos con Facebook. Después de la FB.init función, uso FB.Event.subscribe como sigue:

 FB.Event.subscribe ('edge.create', function (href, widget) $ .event.trigger (type: "pageShared", url: href););

Aquí estamos pidiendo escuchar el edge.create evento (se dispara cuando a un usuario le gusta la página). Entonces estamos activando nuestro propio evento jQuery que he llamado página compartida, y pasar el valor href como la URL que se compartió. Lo comprobaremos más tarde. El código completo de tu botón de Facebook ahora debería verse como:

 window.fbAsyncInit = function () // inicie el FB JS SDK FB.init (status: true, xfbml: true); FB.Event.subscribe ('edge.create', function (href, widget) $ .event.trigger (type: "pageShared", url: href);); ;

Siguiente, twitter. twttr.events.bind se usa aquí (también puede adjuntarse a un evento de seguimiento si lo desea), pero lo importante a recordar es que todo esto debe estar envuelto en el twttr.ready llamar de vuelta. Una vez más, estamos activando el mismo evento jQuery pageShared, pasando la variable correcta para representar la URL que se compartió.

 twttr.ready (function (twttr) twttr.events.bind ('tweet', function (event) $ .event.trigger (type: "pageShared", url: event.target.baseURI);); );

Por último, Google Plus. Recuerde que antes expliqué que no hay eventos para plusOne, así que en lugar de eso hemos especificado una función de devolución de llamada. Ahora creamos esa función y activemos el evento pageShared desde allí..

 function plusOned (obj) $ .event.trigger (type: "pageShared", url: obj.href);

Muéstrame el dinero

Finalmente, debemos adjuntarnos a nuestro evento personalizado de PageShared de la siguiente manera:

 / * Escuche el evento PageShared * / $ (document) .on ('pageShared', function (e) if (e.url == window.location.href) $ (". Secret"). Show () ;);

Muy simple, si la URL pasada es la misma que la página actual, le mostramos el contenido secreto al usuario. En el ejemplo que hice, un gatito. Ustedes afortunados!

Soy perezoso. Puedo descargar tu demo completa?

Para descargar el archivo de demostración completo de este tutorial, sí, lo has adivinado, simplemente comparte la página con los botones que se encuentran en el lateral y el enlace de descarga se te revelará mágicamente..

¿Problemas con el código? Déjame saber en los comentarios, pero una porción liberal de console.log lo ayudará a comprender qué objetos le están devolviendo y los secretos que contienen; y asegúrese de usar los códigos de botones exactos que se proporcionan aquí, ya que algunos formatos (como iFrame) no funcionan con estos eventos.

Descarga test.html y pruébalo en tu propio servidor.

Explorar más sobre: ​​jQuery, Programación, Desarrollo Web.