Haga su propio Tweet / Me gusta / + 1 para desbloquear el sistema con jQuery

Anuncio

Ser viral solía significar una epidemia de enfermedad, pero ahora es algo que todos los creadores de contenido anhelan. usted 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 podría ayudar un poco al ofrecer algo extra de valor a quienes comparten: un cupón, una descarga, una pegatina de cara sonriente en el correo o una imagen de un lindo gatito. Hoy te mostraré cómo crear tu propio como / 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 desean el mecanismo de desbloqueo allí. Si está buscando hacer esto en su página de Facebook, lo básico Tutorial de la puerta de fans de Facebook Me gusta desbloquear: cómo construir una compuerta básica para fanáticos de Facebook sin pagar por el alojamientoUn 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 mediante la creación de contenido secreto exclusivo para miembros; comúnmente conocido como "puerta de ventilador". Facebook también se ha asociado ...

Lee mas Puede ser más útil.

Cómo funciona

Vamos a cargar un conjunto de botones de varias redes y adjuntarlos 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 parámetro a otra función. Cuando se usa jQuery AJAX, por ejemplo, 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 usaremos eventos - que son un poco más complejos, pero están 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 ocultar un poco de contenido y revelarlo debería ser suficiente, pero podría ajustarlo para que sea un poco más seguro que se cargue a través de AJAX o similar.

Requisitos:

• jQuery ya debería estar incluido y cargando 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 para cargar el JS para los botones (estamos usando una versión asincrónica de estos para evitar bloquear la carga de la página). Aqui esta 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); } (documento, 'script', 'facebook-jssdk')); window.fbAsyncInit = function () {// inicia el FB JS SDK FB.init ({estado: verdadero, xfbml: verdadero}); }; / * Twitter * / window.twttr = (función (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; 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: [], listo: función (f) {t._e.push (f)}}); } (documento, "script", "twitter-wjs")); /* Google Mas */ (function () {var po = document.createElement ('script'); po.type = 'texto / javascript'; po.async = verdadero; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0]; s.parentNode.insertBefore (po, s); })();

A continuación, colóquelos donde desee que aparezcan los botones:

Recuerde cambiar el atributo de transferencia 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 para adjuntar aquí, solo una devolución de llamada cuando se hace clic en el botón.

Finalmente, cree una nueva definición de clase CSS para ".oculto", Y establecer el pantalla: ninguno propiedad para ello. Todo lo que quieras ocultar hasta que lo compartas debería ir aquí.

Asegúrese de que sus botones se estén cargando en este momento.

Adjuntar para compartir eventos

Aquí está la verdadera magia. Comencemos 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 activa cuando a un usuario le gusta la página). Entonces estamos activando nuestro propio evento jQuery que he llamado pageShared, y pasando el valor href como la URL que se compartió. Lo revisaremos más tarde. Su código de botón de Facebook completo ahora debería verse así:

 window.fbAsyncInit = function () {// inicia el FB JS SDK FB.init ({estado: verdadero, xfbml: verdadero}); FB.Event.subscribe ('edge.create', function (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); }); };

A continuación, Twitter. twttr.events.bind se usa aquí (también puede adjuntarlo a un evento de seguimiento si lo desea), pero lo importante a recordar es que todo esto debe incluirse en el twttr.ready llamar de vuelta. Nuevamente, 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}); }); });

Finalmente, Google Plus. Recuerde que anteriormente expliqué que no hay eventos para plusOne, por lo que en su lugar hemos especificado una función de devolución de llamada. Ahora creemos esa función y activemos el evento pageShared desde allí.

 función plusOned (obj) {$ .event.trigger ({type: "pageShared", url: obj.href}); }

Muéstrame el dinero

Finalmente, necesitamos adjuntarnos a nuestro evento pageShared personalizado de la siguiente manera:

/ * Escucha el evento pageShared * / $ (document) .on ('pageShared', function (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

De manera muy simple, si la URL ingresada es la misma que la página actual, le mostraremos el contenido secreto al usuario. En el ejemplo que hice, un gatito. ¡Ustedes suertudos!

Soy perezoso. ¿Puedo descargar su demo completa?

Para descargar el archivo de demostración completo de este tutorial, sí, lo adivinó, simplemente comparta la página con los botones que se encuentran al costado y el enlace de descarga le será revelado mágicamente.

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

Descargar test.html e intente en su propio servidor