Asigurați-vă propriul Tweet / Like / + 1 Pentru a debloca sistemul cu jQuery

Deplasarea la virală înseamnă o epidemie de boală, dar acum este ceva ce toți creatorii de conținut doresc. Tu ar putea se bazează doar pe calitatea conținutului dvs. - dacă este suficient de bun, oamenii o vor împărtăși, corect? Poate. Dar ai putea să ajuți și lucrurile de-a lungul a ceva, oferindu-le ceva de valoare celor care împărtășesc - un cupon, o descărcare, un etichetă cu poșetă zâmbitoare în poștă sau o imagine stoc a unui pisoi drăguț. Astăzi vă voi arăta cum să vă creați propria dvs. cum ar fi / tweet / + 1 pentru a debloca sistemul cu un mic jQuery și API-urile native.

Această metodă este pentru persoanele care au propriile site-uri web și ar dori mecanismul de deblocare acolo. Dacă sunteți în căutarea de a face acest lucru pe pagina dvs. de Facebook, de bază Facebook tutorial fan poarta dori să se deblocheze: Cum de a construi o poarta ventilator de bază Facebook fără a plăti pentru gazduire cum ar fi pentru a debloca: Cum de a construi o poarta de bază Fan Fan fără a plăti pentru Gazduire O utilizare incredibil de eficientă a paginii de marcă găzduită de Facebook este de a stimula oamenii să placă pagina prin crearea unor conținuturi numai pentru membrii secreți; denumită în mod obișnuit "poarta ventilatorului". Facebook a colaborat, de asemenea, ... Citește mai mult poate fi mai util.

Cum functioneaza

Vom încărca un set de butoane din diferite rețele și se va atașa la evenimentele respective sau la apelurile telefonice pentru a indica când a fost partajat ceva. A suna inapoi este o funcție care rulează atunci când altceva a terminat, de obicei trecut ca parametru pentru o altă funcție. Atunci când utilizați jQuery AJAX, de exemplu, o alertă de succes este executată atunci când interogarea AJAX a avut succes - face ceva cu datele returnate, cum ar fi confirmarea primirii datelor din formular. Vom folosi de asemenea evenimente - care sunt puțin mai complexe, dar nu fac parte din acest tutorial. Apoi vom declanșa un eveniment propriu, care conține codul pentru a dezvălui una sau mai multe părți secrete ale paginii. Pentru scopul nostru, ascunderea unui pic de conținut și dezvăluirea acestuia ar trebui să fie suficientă, dar ați putea ajusta acest lucru pentru a fi puțin mai sigur că încărcările prin AJAX sau similare.

cerinţe:

• jQuery ar trebui să fie deja inclus și încărcat în antetul paginii dvs. Nu o voi acoperi astăzi.
• Trebuie să știți cum să includeți Javascript pe pagină, indiferent dacă acesta este prin intermediul etichetelor inline sau într-un fișier separat .JS conectat în antet.

Elemente de bază de distribuție

Să începem prin încărcarea unui set de butoane de bază pe pagină. Există două părți la aceasta, în primul rând pentru a încărca JS pentru butoane (folosim versiunea asincronă a acestora pentru a evita blocarea încărcării paginii). Iată codurile din cele trei rețele - nu trebuie să le separați în fragmente mici, pot merge împreună într-un singur fișier JS.

 / * Funcția (d, s, id) var js, fjs = d.getElementsByTagName [0]; dacă (d.getElementById (id)) return; js = d.createElement ); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore (js, fjs); (document, script, facebook- jssdk ')); window.fbAsyncInit = funcția () // inita FB JS SDK FB.init (status: true, xfbml: true); ; / * Twitter * / fereastra.twttr = (funcția (d, s, id) var t, js, fjs = d.getElementsByTagName (s) [0]; .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); retur window.twttr || ( t = _e: [], gata: funcția (f) t._e.push (f)); (document, "script", "twitter-wjs")); / * Google Plus * / (funcția () 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);) ();

Apoi, plasați-le acolo unde vă place să apară butoanele:

Nu uitați să schimbați atributul data-via la propriul utilizator Twitter. De asemenea, rețineți existența unui parametru de apel invers pe butonul plusOne - nu există niciun eveniment care să fie atașat aici, doar un apel invers atunci când butonul este apăsat.

În cele din urmă, creați o nouă definiție a clasei CSS pentru “.ascuns“, și setați display: none proprietate pentru ea. Orice doriți să vă ascundeți până când veți comunica ar trebui să intre aici.

Asigurați-vă că butoanele se încarcă în acest moment.

Atașarea pentru a împărtăși evenimentele

Iată magia reală. Să începem cu Facebook. După FB.init funcția, utilizarea FB.Event.subscribe după cum urmează:

 FB.Event.subscribe ('edge.create', funcție (href, widget) $ .event.trigger (tip: "pageShared", url: href););

Aici cerem să ascultăm edge.create eveniment (declanșat când un utilizator îi place pagina). Apoi declanșăm propriul eveniment jQuery pe care l-am sunat pageShared, și transmiterea valorii href ca adresă URL partajată. Vom verifica asta mai târziu. Codul complet al butonului Facebook trebuie să arate acum:

 window.fbAsyncInit = funcția () // inita FB JS SDK FB.init (status: true, xfbml: true); FB.Event.subscribe ('edge.create', funcție (href, widget) $ .event.trigger (tip: "pageShared", url: href);); ;

Apoi, Twitter. twttr.events.bind este folosit aici (puteți atașa și la un eveniment următor dacă doriți), dar este important să vă amintiți că toate acestea trebuie să fie înfășurate în twttr.ready suna inapoi. Din nou, declanșăm același eveniment jQuery pageShared, trecând variabila corectă pentru a reprezenta adresa URL partajată.

 (tweak.txt ;;;; );

În cele din urmă, Google Plus. Amintiți-vă mai devreme că am explicat că nu există evenimente pentru plusOne, așa că am specificat o funcție de retur. Să creăm acum această funcție și să declanșăm evenimentul pageShared de acolo.

 funcția plusOned (obj) $ .event.trigger (tip: "pageShared", url: obj.href); 

Arata-mi banii

În cele din urmă, trebuie să ne atașăm la evenimentul nostru personalizat, partajat, după cum urmează:

 / * Ascultați pentru evenimentul ShareShared * / $ (document) .on ('pageShared', funcția (e) if (e.url == window.location.href) $ ("secret" ;);

Foarte simplu, dacă URL-ul transmis este identic cu pagina curentă, vom arăta conținutul secret pentru utilizator. În exemplul pe care l-am făcut, un pisoi. Sunteți norocoși!

Sunt leneș. Pot descărca demonstrația completă?

Pentru a descărca fișierul demo complet pentru acest tutorial - da, l-ați ghicit - doar partajați pagina folosind butoanele de pe partea de acolo și link-ul de descărcare va fi dezvăluit magic.

Probleme cu codul? Dați-mi voie să știu în comentarii, dar un dollop liberal de console.log vă va ajuta să înțelegeți ce obiecte vă sunt transmise și secretele pe care le conțin; și asigurați-vă că utilizați codurile de butoane precise furnizate aici, deoarece unele formate (cum ar fi iFrame) nu funcționează cu aceste evenimente.

Descărcați test.html și încercați pe propriul server

Explorați mai multe despre: jQuery, Programare, Dezvoltare Web.