Učinite svoj vlastiti Tweet / Like / + 1 za otključavanje sustava s jQueryjem

Prelazak virusa nekada je značio epidemiju bolesti, ali sada to nešto žudi za svim tvorcima sadržaja. Vas mogla oslonite se samo na kvalitetu vašeg sadržaja - ako je on dovoljno dobar, ljudi će ga dijeliti, zar ne? Može biti. No, možete i malo pomoći stvarima onima koji dijele - kupon, preuzimanje, naljepnicu sa smiješkom na licu ili sliku dionica slatkog mačića. Danas ću vam pokazati kako stvoriti vlastiti poput / tweet / + 1 za otključavanje sustava s malo jQueryja i izvornih API-ja.

Ova je metoda namijenjena osobama koje imaju vlastite web stranice i željeli bi tamo otključati mehanizam za otključavanje. Ako to želite učiniti na svojoj Facebook stranici, osnovni vodič za obožavatelje na Facebooku Želite otključati: Kako izgraditi osnovni ulaz ventilatora Facebooka bez plaćanja hostinga, kao da otključate: Kako izgraditi osnovni ulaz ventilatora Facebooka bez plaćanja Hosting Jedna nevjerojatno učinkovita uporaba stranice robne marke s hostom na Facebooku jest potaknuti ljude da im se sviđa stranica stvaranjem nekih tajnih sadržaja samo za članove; obično naziva "ventilacijska vrata". Facebook se također udružio ... može biti korisniji.

Kako radi

Učitavat ćemo skup gumba iz različitih mreža i pridružiti se njihovim događajima ili povratnim pozivima kako bismo naznačili kada je nešto zajedničko. uzvratiti poziv je funkcija koja se izvodi kad je završilo nešto drugo, a obično se prenosi kao parametar drugoj funkciji. Na primjer, ako upotrebljavate jQuery AJAX, povratni poziv za uspjeh se pokreće kad je AJAX upit uspješan - on čini nešto s vraćenim podacima, poput potvrđivanja primitka podataka obrasca. Također ćemo se koristiti događaji - koji su malo složeniji, ali izvan okvira ovog udžbenika. Tada ćemo pokrenuti vlastiti događaj koji sadrži kôd za otkrivanje jednog ili više tajnih dijelova stranice. Samo bi nam skrivanje malo sadržaja i otkrivanje trebalo biti dovoljno, ali to možete prilagoditi tako da budete malo sigurniji koji se učitava putem AJAX-a ili sličnog.

zahtjevi:

• jQuery bi već trebao biti uključen i učitavan u zaglavlju vaše stranice. Neću to danas pokrivati.
• Trebali biste znati kako uključiti Javascript na stranicu, bilo da se radi o umetnutim oznakama skripte ili u zasebnoj .JS datoteci povezanoj u zaglavlju.

Osnovni gumbi dijeljenja

Započnimo s učitavanjem osnovnog seta gumba za dijeljenje na stranici. U to su dva dijela, prvo učitavanje JS-a za gumbe (koristimo asinkronu verziju ovih kako bismo izbjegli blokiranje učitavanja stranice). Evo kodova iz sve tri mreže - ne morate ih razdvajati u male isječke, svi oni mogu zajedno u jednu JS datoteku.

 / * Facebook * / (funkcija (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, 'skripta', 'facebook- jssdk ')); window.fbAsyncInit = function () // init FB JS SDK FB.init (status: true, xfbml: true); ; / * Twitter * / window.twttr = (funkcija (d, s, id) var t, js, fjs = d.getElementsByTagName (s) [0]; ako se (d.getElementById (id)) vrati; js = d .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); vrati prozor.twttr || ( t = _e: [], spremno: funkcija (f) t._e.push (f)); (dokument, "skripta", "twitter-wjs")); / * Google Plus * / (funkcija () 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 (' skripta ') [0]; s.parentNode.insertBefore (po, s);) ();

Zatim ih smjestite tamo gdje želite da se gumbi prikazuju:

Ne zaboravite da promijenite atribut data-via na svoj vlastiti korisnik Twittera. Također imajte na umu prisutnost parametra povratnog poziva na gumbu plusOne - ovdje se ne može priložiti nikakav događaj, samo povratni poziv kad se klikne gumb.

Na kraju, stvorite novu definiciju klase CSS za “.skriven“, i postavi display: none vlasništvo za to. Sve što želite sakriti do dijeljenja ovdje bi trebalo ući.

Provjerite jesu li se gumbi trenutno učitali.

Prilaganje za dijeljenje događaja

Evo prave magije. Započnimo s Facebookom. Nakon što FB.init funkcionirati, koristiti FB.Event.subscribe kako slijedi:

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

Ovdje tražimo da poslušate edge.create događaj (pokreće se kada korisnik voli stranicu). Tada pokrećemo vlastiti jQuery događaj koji sam pozvao pageShared, i prenošenje href vrijednosti kao URL-a koji je dijeljen. To ćemo provjeriti kasnije. Vaš kompletan kôd gumba na Facebooku sada bi trebao izgledati ovako:

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

Dalje, Twitter. twttr.events.bind ovdje se koristi (ako se želite pridružiti i pratećem događaju), ali važno je imati na umu da sve ovo treba zamotati u twttr.ready uzvratiti poziv. Opet pokrećemo isti događaj jQuery pageShared, ulazeći u ispravnu varijablu da predstavlja URL koji je dijeljen.

 twttr.ready (funkcija (twttr) twttr.events.bind ('tweet', funkcija (događaj) $ .event.trigger (vrsta: "pageShared", url: event.target.baseURI);); );

Napokon, Google Plus. Sjetite se ranije, objasnio sam da ne postoje događaji za plusOne, pa smo umjesto toga odredili funkciju povratnog poziva. Kreirajmo tu funkciju i odatle pokrenimo događaj pageShared.

 funkcija plusOned (obj) $ .event.trigger (vrsta: "pageShared", url: obj.href); 

Pokaži mi novac

Napokon, moramo na svoj prilagođeni događaj pageShared dodati prilog kako slijedi:

 / * Slušajte stranicuDodijeljeni događaj * / $ (dokument) .on ('pageShared', funkcija (e) if (e.url == window.location.href) $ (". Secret"). Show () ;);

Vrlo jednostavno, ako je proslijeđeni URL isti kao trenutna stranica, korisniku prikazujemo tajni sadržaj. U primjeru koji sam napravio, mače. Vi sretni ljudi!

Ja sam lijen. Mogu li preuzeti vaš kompletan demo?

Da biste preuzeli kompletnu demo datoteku za ovaj vodič - da, pogodili ste - samo podijelite stranicu pomoću gumba sa strane i veza za preuzimanje će vam se čarobno otkriti.

Problemi s kodom? Javite mi u komentarima, ali liberalni pad od console.log pomoći će vam da shvatite koji će vam se predmeti vraćati i tajne koje sadrže; pa svakako koristite točne kodove ovdje prikazanih jer neki formati (poput iFrame-a) ne rade s tim događajima.

Preuzmite test.html i isprobajte na vlastitom poslužitelju