Crea il tuo Tweet / Like / + 1 per sbloccare il sistema con jQuery

L'espressione virale indicava un'epidemia di malattia, ma ora è qualcosa che tutti i creatori di contenuti bramano. tu poteva fare affidamento sulla qualità dei tuoi contenuti da solo - se è abbastanza buono, le persone lo condivideranno, giusto? Può essere. Ma potresti anche aiutare un po 'le cose offrendo qualcosa di valore aggiunto a coloro che condividono - un coupon, un download, un adesivo con faccina sorridente nella posta o un'immagine di un simpatico gattino. Oggi ti mostrerò come crearne uno tuo like / tweet / + 1 per sbloccare il sistema con un po 'di jQuery e le API native.

Questo metodo è per le persone che hanno i loro siti web e vorrebbe il meccanismo di sblocco. Se stai cercando di farlo sulla tua pagina di Facebook, il tutorial di base su fan di Facebook Like To Unlock: Come costruire un fan di base su Facebook senza pagare per l'hosting come sbloccare: come costruire un fan di base su Facebook senza pagare Hosting Un uso incredibilmente efficace di una pagina di marchio ospitata su Facebook è di incentivare le persone ad apprezzare la pagina creando contenuti riservati solo ai membri; comunemente indicato come "fan gate". Facebook ha anche una partnership ... Leggi di più potrebbe essere più utile.

Come funziona

Caricheremo un set di pulsanti dalle varie reti e ci collegheremo ai loro rispettivi eventi o callback per indicare quando qualcosa è stato condiviso. UN richiama è una funzione che viene eseguita quando qualcos'altro è finito, solitamente passato come parametro ad un'altra funzione. Ad esempio, quando si utilizza jQuery AJAX, viene eseguita una richiamata di successo quando la query AJAX ha avuto esito positivo: fa qualcosa con i dati restituiti, come il riconoscimento della ricezione dei dati del modulo. Useremo anche eventi - che sono un po 'più complessi, ma fuori dallo scopo di questo tutorial. Quindi attiveremo il nostro evento, che contiene il codice per rivelare una o più parti segrete della pagina. Per il nostro scopo, nascondere solo un po 'di contenuto e rivelarlo dovrebbe essere sufficiente, ma è possibile regolarlo per essere un po' più sicuri che carichi tramite AJAX o simili.

Requisiti:

• jQuery dovrebbe già essere incluso e il caricamento nell'intestazione della tua pagina. Non lo coprirò oggi.
• Dovresti sapere come includere JavaScript nella pagina, sia attraverso tag script in linea o in un file .JS separato collegato nell'intestazione.

Pulsanti di condivisione di base

Iniziamo caricando un insieme di base di pulsanti di condivisione nella pagina. Ci sono due parti per questo, in primo luogo per caricare il JS per i pulsanti (stiamo usando una versione asincrona di questi per evitare il blocco del caricamento della pagina). Ecco i codici di tutte e tre le reti: non è necessario separarle in piccoli frammenti, possono andare tutti insieme in un unico file JS.

 / * Facebook * / (funzione (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 () // avvia l'FB JS SDK FB.init (status: true, xfbml: true); ; / * Twitter * / window.twttr = (funzione (d, s, id) var t, js, fjs = d.getElementsByTagName (s) [0]; se (d.getElementById (id)) restituisce; 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);) ();

Quindi, posizionale dove preferisci che appaiano i pulsanti:

Ricordarsi di cambiare l'attributo data-via al proprio utente Twitter. Inoltre, si noti la presenza di un parametro di callback sul pulsante plusOne: non vi è alcun evento da allegare a qui, solo una richiamata quando si fa clic sul pulsante.

Infine, crea una nuova definizione di classe CSS per “.nascosto“, e impostare il display: none proprietà per esso. Tutto ciò che vuoi nascondere fino a quando condiviso dovrebbe entrare qui.

Assicurati che i tuoi pulsanti stiano caricando a questo punto.

Allegare per condividere eventi

Ecco la vera magia. Iniziamo con Facebook. Dopo il FB.init funzione, uso FB.Event.subscribe come segue:

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

Qui stiamo chiedendo di ascoltare il edge.create evento (attivato quando un utente apprezza la pagina). Stiamo quindi attivando il nostro evento jQuery che ho chiamato pageShared, e passando il valore href come l'URL che è stato condiviso. Lo controlleremo in seguito. Il tuo codice pulsante Facebook completo dovrebbe ora apparire come:

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

Quindi, Twitter. twttr.events.bind è usato qui (puoi allegare anche a un evento successivo se lo desideri), ma la cosa importante da ricordare è che tutti questi devono essere avvolti nel twttr.ready richiama. Ancora una volta, stiamo attivando lo stesso evento jQuery paginaShared, passando la variabile corretta per rappresentare l'URL che è stato condiviso.

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

Infine, Google Plus. Ricorda prima ho spiegato che non ci sono eventi per plusOne, quindi abbiamo specificato una funzione di callback. Creiamo ora quella funzione e attiviamo l'evento pageShared da lì.

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

Mostrarmi il denaro

Infine, dobbiamo allegare al nostro evento personalizzato PaginaShared come segue:

 / * Ascolta la paginaAvento condiviso * / $ (documento) .on ('pageShared', function (e) if (e.url == window.location.href) $ (". Secret"). Show () ;);

Molto semplicemente, se l'URL passato è uguale alla pagina corrente, mostriamo il contenuto segreto all'utente. Nell'esempio che ho fatto, un gattino. Persone fortunate!

Sono pigro. Posso scaricare la tua demo completa?

Per scaricare il file demo completo per questo tutorial - sì, avete indovinato - basta condividere la pagina utilizzando i pulsanti sul lato lì e il link per il download sarà magicamente rivelato a voi.

Problemi con il codice? Fatemi sapere nei commenti, ma una dose progressista di console.log ti aiuterà a capire quali oggetti ti vengono restituiti e i segreti che contengono; e assicurati di utilizzare i codici dei pulsanti esatti forniti qui, poiché alcuni formati (come iFrame) non funzionano con questi eventi.

Scarica test.html e prova sul tuo server

Scopri di più su: jQuery, programmazione, sviluppo Web.