Tehke oma Tweet / Like / + 1 süsteemi avamiseks jQuery abil

Reklaam

Viiruse levik tähendas varem haiguste epideemiat, kuid nüüd ihkavad seda kõik sisuloojad. Sina saaks loota ainult oma sisu kvaliteedile - kui see on piisavalt hea, siis inimesed jagavad seda, eks? Võib olla. Kuid saaksite ka natuke asju aidata, pakkudes jagajatele midagi väärtuslikku - kupong, allalaadimine, emotikoniga näokleebis või armas kassipoja varupilt. Täna näitan teile, kuidas luua oma nagu / piiksuma / + 1 süsteemi avamiseks koos väikese jQuery ja loomulike API-dega.

See meetod on mõeldud inimestele, kellel on oma veebisaidid ja kes sooviksid seal avamismehhanismi. Kui soovite seda teha oma Facebooki lehel, siis see on põhiline Facebooki fännivärava õpetus Meeldib avada: kuidas ehitada põhiline Facebooki fännivärav ilma hostimise eest maksmataÜks Facebooki hostitud brändilehe uskumatult tõhus kasutamine on inimeste ergutamine selle lehe meeldimiseks, luues neile salajase sisu; mida tavaliselt nimetatakse "ventilaatori väravaks". Facebook on teinud ka partnerlust ... Loe rohkem võib olla kasulikum.

Kuidas see töötab

Laadime erinevatest võrkudest komplekti nuppe ja ühendame nende sündmuste või tagasihelistamisega, et näidata, millal midagi jagati. A helista tagasi on funktsioon, mis töötab siis, kui midagi muud on lõpule viidud, tavaliselt antakse see parameetrina üle teisele funktsioonile. Näiteks jQuery AJAX kasutamisel käivitatakse õnnestunud tagasihelistamine siis, kui AJAX päring on õnnestunud - see teeb tagastatud andmetega midagi, näiteks kinnitab vormi andmete kättesaamist. Kasutame ka sündmused - mis on pisut keerukamad, kuid jäävad selle õpetuse ulatusest välja. Seejärel käivitame oma sündmuse, mis sisaldab koodi, mis paljastab lehe ühe või mitu salajast osa. Meie jaoks peaks piisama ainult natuke sisu peitmisest ja paljastamisest, kuid saate seda kohandada, et see oleks pisut turvalisem, kui laadite AJAXi või muu sarnase kaudu.

Nõuded:

• jQuery peaks juba olema lisatud ja laaditud teie lehe päisesse. Ma ei kavatse seda täna käsitleda.
• Te peaksite teadma, kuidas Javascripti lehele lisada, olgu selleks siis skriptisildid või päisesse lingitud eraldi .JS-fail.

Tavalised jagamisnupud

Alustame laadimisega lehele tavaline jagamisnupp. Sellel on kaks osa, esiteks nuppude JS-i laadimiseks (lehe laadimise blokeerimise vältimiseks kasutame nende asünkroonset versiooni). Siin on kõigi kolme võrgu koodid - te ei pea neid väikesteks lõikudeks eraldama, need võivad kõik koondada ühte JS-faili.

/ * Facebook * / (funktsioon (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); } (dokument, 'skript', 'facebook-jssdk')); window.fbAsyncInit = function () {// algata FB JS SDK FB.init ({olek: true, xfbml: true}); }; / * Twitter * / window.twttr = (funktsioon (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) naaseb; js = d.loomaElement (id); js.id = id; js.src = " https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); tagastamisaken.twttr || (t = {_e: [], valmis: funktsioon (f) {t._e.push (f)}}); } (dokument, "skript", "twitter-wjs")); / * Google Plus * / (funktsioon () {var po = document.createElement ('skript'); po.type = 'tekst / javascript'; po.async = tõsi; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('skript') [0]; s.parentNode.insertBefore (po, s); })();

Järgmisena pange need sinna, kus soovite, et nupud ilmuvad:

Ärge unustage muuta andmeside-atribuuti oma Twitteri kasutaja jaoks. Pange tähele ka tagasihelistamisparameetri olemasolu nupul plusOne - siin pole ühtegi sündmust, millele kinnitada, vaid nupule klõpsamisel tagasihelistamine.

Lõpuks looge uus CSS-klassi määratlus kategooriale „.peidetudJa määrake kuva: puudub vara selle jaoks. Kõik, mida soovite peita kuni jagatud, peaks siin sisse minema.

Veenduge, et teie nupud laadivad sel hetkel.

Manustamine sündmuste jagamiseks

Siin on tõeline maagia. Alustame Facebookist. Pärast FB.init funktsioon, kasutamine FB.Event.subscribe järgnevalt:

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

Siinkohal palume kuulata serv.loome sündmus (vallandatakse, kui kasutajale leht meeldib). Seejärel käivitame meie enda kutsutud jQuery sündmuse lehtJagatudja sisestades jagatud URL-ina href-i väärtuse. Kontrollime seda hiljem. Teie täielik Facebooki nupukood peaks nüüd välja nägema:

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

Järgmisena Twitter. twttr.events.bind kasutatakse siin (soovi korral saate ka mõne sündmuse juurde lisada), kuid oluline on meeles pidada, et need kõik tuleb mähkida twttr.ready helista tagasi. Jälle käivitame sama jQuery pageShared sündmuse, sisestades õige muutuja, et esindada jagatud URL-i.

 twttr.ready (funktsioon (twttr) {twttr.events.bind ('säutsu', funktsioon (sündmus) {$ .event.trigger ({tüüp: "pageShared", url: event.target.baseURI}); }); });

Lõpuks Google Plus. Pidage meeles, et ma selgitasin, et ma selgitasin, et plusOne puhul pole ühtegi sündmust, seetõttu määratlesime selle asemel tagasihelistamise funktsiooni. Loome nüüd selle funktsiooni ja käivitame sealt lehe Jagatud sündmuse.

 funktsioon pluss Oned (obj) {$ .event.trigger ({tüüp: "pageShared", url: obj.href}); }

Näita mulle raha

Lõpuks peame manustama oma kohandatud lehe jagatud sündmusega järgmiselt:

/ * Kuula lehteJagatud sündmus * / $ (dokument) .on ('pageShared', funktsioon (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Kui sisestatud URL on sama, mis praegusel lehel, näitame kasutajale salajast sisu. Minu tehtud näites kassipoeg. Te õnnelikud inimesed!

Ma olen laisk. Kas ma saan alla laadida teie täieliku demo?

Selle õpetuse jaoks kogu demofaili allalaadimiseks - jah, arvasite seda - jagage lihtsalt lehte, kasutades seal asuvaid nuppe ja allalaadimislink kuvatakse teile võluväel.

Kas teil on probleeme koodiga? Andke mulle kommentaarides teada, kuid console.log aitab teil mõista, milliseid objekte teile tagasi antakse ja nendes sisalduvaid saladusi; ja kasutage kindlasti siin esitatud täpseid nupukoode, kuna mõned vormingud (nt iFrame) ei toimi nende sündmustega.

Laadige alla test.html ja proovige oma serveris