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

Publicitate

Mersul viral era folosit pentru a însemna o epidemie de boală, dar acum este un lucru pe care îl creează toți creatorii de conținut. Tu ar putea se bazează doar pe calitatea conținutului dvs. - dacă este suficient de bun, oamenii îl vor împărtăși, nu? Poate. Dar puteți ajuta lucrurile de-a lungul timpului oferind ceva în plus pentru cei care împărtășesc - un cupon, o descărcare, un autocolant de față zâmbet în poștă sau o imagine de stoc a unui pisoi drăguț. Astăzi vă voi arăta cum să vă creați propriul dvs. like / tweet / + 1 pentru a debloca sistemul cu un pic de jQuery și API-urile native.

Această metodă se adresează persoanelor care au propriile site-uri web și ar dori mecanismul de deblocare acolo. Dacă doriți să faceți acest lucru pe pagina dvs. de Facebook, elementul de bază Tutorial Facebook gate gate Îmi place să deblochezi: Cum să construiești o poartă de bază a fanilor Facebook fără să plătești pentru găzduireO utilizare incredibil de eficientă a unei pagini de marcă găzduite pe Facebook este de a încuraja oamenii să placă pagina prin crearea de conținut secret numai pentru membri; denumită în mod obișnuit „poartă de ventilator”. De asemenea, Facebook a făcut parteneriat ...

Citeste mai mult poate fi mai util.

Cum functioneaza

Vom încărca un set de butoane din diversele rețele și vom atașa la evenimentele sau apelurile respective pentru a indica când a fost partajat ceva. A suna inapoi este o funcție care se execută atunci când altceva s-a terminat, de obicei trecut ca parametru la o altă funcție. Atunci când utilizați jQuery AJAX, de exemplu, o apelare de retur este executată atunci când interogarea AJAX a avut succes - face ceva cu datele returnate, cum ar fi confirmarea primirii datelor formularului. Vom folosi și noi evenimente - care sunt ceva mai complexe, dar care nu intră în sfera de aplicare a acestui tutorial. Vom declanșa apoi propriul nostru eveniment, care conține codul pentru a dezvălui una sau mai multe părți secrete ale paginii. În scopul nostru, doar să ascundeți un pic de conținut și să dezvăluiți-l ar trebui să fie suficient, dar puteți ajusta acest lucru pentru a fi puțin mai sigur care se încarcă prin AJAX sau similar.

cerinţe:

• jQuery ar trebui deja inclus și încărcat în antetul paginii dvs. Nu voi acoperi asta astăzi.
• Ar trebui să știți cum să includeți Javascript pe pagină, fie că este vorba de etichete script inline sau într-un fișier .JS separat legat în antet.

Butoane de partajare de bază

Să începem încărcând un set de butoane de partajare de pe pagină. Există două părți în acest sens, î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 toate cele trei rețele - nu trebuie să le separați în fragmente mici, toate pot merge împreună într-un singur fișier JS.

/* Facebook */ (funcție (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 () {// init FB JS SDK FB.init ({status: true, xfbml: true}); }; / * Twitter * / window.twttr = (funcție (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) returnare; js = d.createElement (s); js.id = id; js.src =“ https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); fereastră de întoarcere.twttr || (t = {_e: [], gata: funcție (f) {t._e.push (f)}}); } (document, „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); })();

Apoi, așezați-le acolo unde doriți să apară butoanele:

Nu uitați să schimbați datele prin intermediul atributului pentru propriul dvs. utilizator Twitter. De asemenea, rețineți prezența unui parametru de apelare inversă pe butonul plusOne - nu există niciun eveniment de atașat aici, doar un apel invers când se face clic pe buton.

În cele din urmă, creați o nouă definiție a clasei CSS pentru „.ascuns„, Și setați tasta afișare: niciuna proprietate pentru aceasta. Orice doriți să ascundeți până la partajare ar trebui să intre aici.

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

Atașarea la partajarea evenimentelor

Iată adevărata magie. Să începem cu Facebook. După FB.init funcție, utilizare FB.Event.subscribe după cum urmează:

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

Aici cerem să ascultăm edge.create eveniment (concediat când un utilizator îi place pagina). Atunci declanșăm propriul nostru eveniment jQuery pe care l-am sunat pageSharedși trecerea valorii href ca adresă URL care a fost partajată. Vom verifica acest lucru mai târziu. Codul complet al butonului Facebook ar trebui să arate acum:

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

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

 twttr.ready (funcție (twttr) {twttr.events.bind ('tweet', funcție (eveniment) {$ .event.trigger ({type: "pageShared", url: event.target.baseURI}); }); });

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

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

Arata-mi banii

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

/ * Ascultă pagina Evenimentul partajat * / $ (document) .on ('pageShared', funcție (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Foarte simplu, dacă adresa URL transmisă este aceeași cu pagina curentă, arătăm conținutul secret utilizatorului. În exemplul pe care l-am făcut, un pisoi. Voi oameni norocoși!

Sunt leneș. Pot descărca demo-ul dvs. complet?

Pentru a descărca fișierul demo complet pentru acest tutorial - da, ați ghicit - doar împărtășiți pagina folosind butoanele din partea de acolo și linkul de descărcare vă va fi revelat magic.

Probleme cu codul? Anunță-mă în comentarii, dar un dollop liberal console.log te va ajuta să înțelegi ce obiecte îți sunt transmise și secretele pe care le conțin; și asigurați-vă că folosiți codurile exacte ale butoanelor furnizate aici, deoarece unele formate (cum ar fi iFrame) nu funcționează cu aceste evenimente.

Descarcă test.html și încercați pe propriul dvs. server