Naredite svoj lastni Tweet / Like / + 1 za odklepanje sistema z jQuery

Oglas

Gre za virus, ki je nekoč pomenil epidemijo bolezni, zdaj pa ustvarjalci vsebine hrepenijo. Ti bi lahko zanašajte se samo na kakovost vaše vsebine - če bo dovolj dobra, jo bodo ljudje delili, kajne? Mogoče. Lahko pa tudi pomagate k temu, da tistim, ki si jih delite, ponudite nekaj dodatnega pomena - kupon, prenos, nalepko z nasmehom na obrazu ali zalogo simpatičnega mucka. Danes vam bom pokazal, kako lahko ustvarite svojo kot / tweet / + 1 za odklepanje sistema z malo jQueryja in izvornimi API-ji.

Ta metoda je namenjena ljudem, ki imajo lastna spletna mesta in bi radi, da bi bil tam odklenjen mehanizem. Če želite to storiti na svoji Facebook strani, osnovno Vodič za Facebook ventilatorja Kot odklepanje: Kako sestaviti osnovna vrata ventilatorja Facebooka, ne da bi plačali gostovanjeEna neverjetno učinkovita uporaba strani blagovne znamke, ki jo gosti Facebook, je spodbuditi ljudi, da jim je všeč stran, tako da ustvarijo nekaj skrivnih vsebin, namenjenih samo članom; običajno imenovana "ventilatorski prehod". Facebook je sodeloval tudi ... Preberi več morda bolj koristno.

Kako deluje

Naložili bomo niz gumbov iz različnih omrežij in pritrdili na njihove dogodke ali povratne klice, da bi navedli, kdaj je bilo nekaj v skupni rabi. A poklicati nazaj je funkcija, ki se zažene, ko se konča nekaj drugega, običajno se kot parameter prenese v drugo funkcijo. Če na primer uporabljate jQuery AJAX, se uspešen povratni klic zažene, ko je poizvedba AJAX uspešna - z vrnjenimi podatki naredi nekaj, na primer potrditev prejema podatkov obrazca. Uporabljali bomo tudi dogodki - ki so nekoliko bolj zapleteni, vendar izven obsega te vaje. Nato bomo sprožili svoj lastni dogodek, ki vsebuje kodo, da razkrijemo enega ali več tajnih delov strani. Za naš namen bi moralo zadostovati le malo skrivanja vsebine in razkritja, vendar bi to lahko prilagodili tako, da je nekoliko bolj varen, ki se nalaga prek AJAX-a ali podobnega.

Zahteve:

• jQuery bi moral biti že vključen in naložen v glavo vaše strani. Danes tega ne bom pokrival.
• Morali bi vedeti, kako vključiti Javascript na stran, naj bo to skozi vdelane skripte ali v ločeno datoteko .JS, povezano v zaglavju.

Osnovni gumbi skupne rabe

Začnimo z nalaganjem osnovnega nabora gumbov za skupno rabo na stran. Na to sta dva dela, najprej naložiti JS za gumbe (uporabljamo asinhrono različico le-teh, da ne preprečimo nalaganja strani). Tukaj je kode iz vseh treh omrežij - teh ne smete ločevati v majhne odrezke, vse skupaj lahko gredo v eno datoteko JS.

/ * 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/sl_US/all.js"; fjs.parentNode.insertBefore (js, fjs); } (dokument, 'skripta', 'facebook-jssdk')); window.fbAsyncInit = funkcija () {// init FB JS SDK FB.init ({status: res, xfbml: true}); }; / * Twitter * / window.twttr = (funkcija (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) se vrne; js = d.createElement (s); js.id = id; js.src = " https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); vrni okno.twttr || (t = {_e: [], pripravljeno: funkcija (f) {t._e.push (f)}}); } (dokument, "skript", "twitter-wjs")); / * Google Plus * / (funkcija () {var po = document.createElement ('skripta'); po.type = 'text / javascript'; po.async = res; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('skript') [0]; s.parentNode.insertBefore (po, s); })();

Nato jih postavite tam, kjer želite, da se prikazujejo gumbi:

Ne pozabite spremeniti atributa data-via za svojega uporabnika Twitterja. Upoštevajte tudi prisotnost parametra povratnega klica na gumbu plusOne - tukaj ni nobenega dogodka, ki bi ga lahko pritrdili, temveč samo povratni klic, ko kliknete gumb.

Končno ustvarite novo definicijo razreda CSS za ».hidden", In nastavite zaslon: noben lastnina za to. Vse, kar želite skriti, dokler jih ne daste v skupno rabo, bi moralo priti sem.

Prepričajte se, da se na tem mestu vaši gumbi nalagajo.

Pripenjamo k skupni rabi dogodkov

Tu je prava čarovnija. Začnimo s Facebookom. Po FB.init funkcija, uporaba Naročite se na FB.Event kot sledi:

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

Tukaj vas prosimo za poslušanje edge.create dogodek (sproži se, kadar je uporabniku stran všeč). Nato sprožimo svoj dogodek jQuery, ki sem ga poklical skupna raba strani, in v href vrednosti kot URL, ki je bil v skupni rabi. To bomo preverjali pozneje. Vaša celotna koda gumba na Facebooku mora zdaj izgledati tako:

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

Nato še Twitter. twttr.events.bind je uporabljen tukaj (po želji se lahko pripnete tudi na naslednji dogodek), vendar je pomembno, da se spomnite, da je treba vse to zaviti v twttr.ready poklicati nazaj. Ponovno sprožimo isti dogodek jQuery pageShared, pri čemer posredujemo pravilno spremenljivko in predstavlja URL, ki je bil v skupni rabi.

 twttr.ready (funkcija (twttr) {twttr.events.bind ('tweet', funkcija (dogodek) {$ .event.trigger ({vrsta: "pageShared", url: event.target.baseURI}); }); });

Končno tudi Google Plus. Ne pozabite, da sem prej razložil, da za plusOne ni dogodkov, zato smo določili funkcijo povratnega klica. Ustvarimo to funkcijo in od nje sprožimo dogodek v skupni rabi strani.

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

Pokaži mi denar

Nazadnje moramo na naš dogodek po meri dati skupno rabo na naslednji način:

/ * Poslušajte stranPreden dogodek * / $ (document) .on ('pageShared', funkcija (e) {if (e.url == window.location.href) {$ (". skrivnost"). show (); } });

Zelo preprosto, če je posredovani URL enak trenutni strani, uporabniku pokažemo skrivno vsebino. V primeru, ki sem ga naredila, mucka. Srečni ljudje!

Jaz sem len Ali lahko prenesem celoten prikaz?

Če želite prenesti celotno predstavitveno datoteko za to vadnico - ja, uganili ste - samo delite stran s pomočjo gumbov ob strani in povezava za prenos vam bo čarobno razkrita.

Težave s kodo? Sporočite mi v komentarjih, toda liberalni niz console.log vam bo pomagal razumeti, kateri predmeti se vam vračajo in skrivnosti, ki jih vsebujejo; in ne pozabite uporabiti točnih kod gumbov, ki so tukaj podane, saj nekateri formati (na primer iFrame) ne delujejo s temi dogodki.

Prenesite test.html in poskusite na svojem strežniku