Luo oma twiitti / tykkää / + 1 avataksesi järjestelmä jQueryn avulla

Mainos

Viruksella leviäminen tarkoitti taudin epidemiaa, mutta nyt se on jotain, jota kaikki sisällön luojat haluavat. Sinä voisi luottaa pelkästään sisältösi laatuun - jos se on tarpeeksi hyvä, ihmiset jakavat sen, eikö niin? Voi olla. Voit kuitenkin auttaa myös asioita vähän tarjoamalla jotain lisäarvoa jakajille - kuponki, lataus, hymiötarra postissa tai varastossa oleva kuva söpöstä kissanpennusta. Tänään näytän sinulle kuinka luoda omat kuten / tweet / + 1 järjestelmän lukituksen avaamiseksi pienellä jQueryllä ja natiivilla sovellusliittymillä.

Tämä menetelmä on tarkoitettu ihmisille, joilla on omat verkkosivut ja jotka haluaisivat siellä olevan lukituksen. Jos haluat tehdä tämän Facebook-sivullasi, perus Facebook-faniportin opetusohjelma Haluat avata: Kuinka rakentaa perus Facebook-tuuletinportti maksamatta hosting-palvelustaYksi uskomattoman tehokas Facebook-isännöimän brändisivun käyttö on kannustaa ihmisiä pitämään sivusta luomalla salaista sisältöä vain jäsenille. yleisesti kutsutaan "tuuletinportiksi". Facebook on myös ollut kumppanina ... Lue lisää

voi olla hyödyllisempää.

Kuinka se toimii

Lataamme joukon painikkeita eri verkoista ja liitämme niihin tapahtumiin tai takaisinsoittoihin osoittaaksesi, milloin jotain jaettiin. soita takaisin on toiminto, joka suoritetaan, kun jokin muu on valmis, yleensä siirretään parametriksi toiselle toiminnolle. Esimerkiksi, kun käytetään jQuery AJAX: tä, menestyssoitto ajetaan, kun AJAX-kysely on onnistunut - se tekee jotain palautetuilla tiedoilla, kuten kuittaa lomaketiedon vastaanottamisen. Me myös käytämme Tapahtumat - jotka ovat hieman monimutkaisempia, mutta jotka eivät kuulu tämän oppaan piiriin. Sitten käynnistämme oman tapahtuman, joka sisältää koodin paljastamaan yhden tai useamman sivun sivun. Tarkoituksemme mukaan riittää vain pienen sisällön piilottaminen ja paljastaminen, mutta voit säätää tämän olevan hieman turvallisempi, että latautuu AJAX: n tai vastaavan kautta.

vaatimukset:

• jQuery pitäisi jo sisällyttää ja ladata sivusi otsikkoon. En aio käsitellä sitä tänään.
• Sinun tulisi tietää, miten Javascript sisällytetään sivulle joko sisäisten komentosarjojen kautta tai erilliseen otsikkoon linkitetyssä .JS-tiedostossa.

Basic-painikkeet

Aloitetaan lataamalla perus- jakopainikkeet sivulle. Tässä on kaksi osaa, ensinnäkin JS: n lataamiseksi painikkeille (käytämme näiden asynkronista versiota sivukuormituksen estämiseksi). tässä kaikkien kolmen verkon koodit - sinun ei tarvitse erottaa niitä pieniksi katkelmiksi, ne voivat kaikki koota yhteen JS-tiedostoon.

/* Facebook */ (funktio (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); } (dokumentti, 'käsikirjoitus', 'facebook-jssdk')); window.fbAsyncInit = function () {// aloita FB JS SDK FB.init ({tila: totta, xfbml: tosi}); }; / * Twitter * / window.twttr = (toiminto (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) palaa; js = d.luotaElementti (t); js.id = id; js.src =" https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); palauta ikkuna.twttr || (t = {_e: [], valmis: toiminto (f) {t._e.push (f)}}); } (dokumentti, "käsikirjoitus", "twitter-wjs")); /* Google plus */ (function () {var po = document.createElement ('script'); po.type = 'teksti / javascript'; po.async = totta; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0]; s.parentNode.insertBefore (po, s); })();

Seuraavaksi aseta nämä kohtaan, jossa haluat painikkeiden näkyvän:

Muista vaihtaa data-via -attribuutti omalle Twitter-käyttäjällesi. Huomaa myös, että plusOne-painikkeessa on soittopyyntöparametri - tähän ei ole kiinnitettävää tapahtumaa, vaan vain takaisinsoitto, kun painiketta napsautetaan.

Lopuksi luo uusi CSS-luokan määritelmä käsitteelle “.hiddenJa aseta näyttö: ei mitään omaisuutta sille. Kaiken mitä haluat piilottaa, kunnes jaetaan, pitäisi mennä tänne.

Varmista, että painikkeet latautuvat tässä vaiheessa.

Liittäminen tapahtumien jakamiseen

Tässä on todellinen taikuus. Aloitetaan Facebookista. Jälkeen FB.init toiminto, käytä FB.Event.subscribe seuraavasti:

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

Täällä pyydämme kuuntelemaan edge.create tapahtuma (potkut, kun käyttäjä tykkää sivusta). Sitten käynnistämme oman jQuery-tapahtuman, johon olen kutsunut pageShared, ja välittää href-arvon jaetuna URL-osoitteena. Tarkistamme tämän myöhemmin. Täydellisen Facebook-painikekoodisi pitäisi nyt näyttää seuraavalta:

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

Seuraavaksi Twitter. twttr.events.bind käytetään täällä (voit myös liittää seuraavaan tapahtumaan, jos haluat), mutta tärkeä muistaa, että nämä kaikki on käärittävä twttr.ready soita takaisin. Olemme jälleen käynnistäneet saman jQuery pageShared -tapahtuman lähettämällä oikean muuttujan edustamaan jaettua URL-osoitetta.

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

Viimeiseksi Google Plus. Muista aiemmin selitin, että plusOne-tapahtumassa ei ole tapahtumia, joten määrittelimme sen sijaan takaisinsoitto-toiminnon. Luotaan nyt kyseinen toiminto ja käynnistetään sivunjaettu tapahtuma sieltä.

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

Näytä minulle rahat

Viimeinkin meidän on liitettävä mukautettuun sivunjaettuun tapahtumiimme seuraavasti:

/ * Kuuntele sivua Jaettu tapahtuma * / $ (document) .on ('pageShared', funktio (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Hyvin yksinkertaisesti, jos sisään kulkeva URL on sama kuin nykyinen sivu, näytämme käyttäjän salaisen sisällön. Tekemässäni esimerkissä kissanpentu. Sinä onnekkaita ihmisiä!

Olen laiska. Voinko ladata täydellisen demon?

Jos haluat ladata tämän opetusohjelman täydellisen demon tiedoston - kyllä, arvasit sen - jaa sivu vain sivun painikkeilla, niin latauslinkki paljastetaan sinulle maagisesti.

Onko sinulla ongelmia koodin kanssa? Haluaisin tietää kommenteissani, mutta liberaali kukka console.log auttaa sinua ymmärtämään, mitä esineitä sinulle palautetaan, ja niiden sisältämiä salaisuuksia; ja muista käyttää täsmällisesti täällä toimitettuja painikkeiden koodeja, koska jotkin muodot (kuten iFrame) eivät toimi näiden tapahtumien kanssa.

Lataa test.html ja kokeile omalla palvelimellasi