Wordpress og webutvikling

Lag din egen Tweet / Like / + 1 for å låse opp systemet med jQuery

Lag din egen Tweet / Like / + 1 for å låse opp systemet med jQuery / Wordpress og webutvikling

Going viral pleide å bety en sykdomsepidemi, men nå er det noe som alle innholdsskapere krever. Du kunne stole på kvaliteten på innholdet ditt alene - hvis det er bra nok, vil folk dele det, riktig? Kan være. Men du kan også hjelpe ting langs litt ved å tilby noe ekstra av verdi for de som deler - en kupong, en nedlasting, et smilende ansiktsmerke i posten, eller et lagerbilde av en søt kattunge. I dag skal jeg vise deg hvordan du lager din egen liker / tweet / + 1 for å låse opp systemet med litt jQuery og de innfødte APIene.

Denne metoden er for folk som har egne nettsteder og ønsker å låse opp mekanismen der. Hvis du ønsker å gjøre dette på Facebook-siden din, gjør den grunnleggende Facebook-fanportlæringen som å låse opp: Slik bygger du en grunnleggende Facebook Fan Gate uten å betale for Hosting som å låse opp: Hvordan bygge en grunnleggende Facebook Fan Gate uten å betale for Hosting En utrolig effektiv bruk av en Facebook-hostet merkevareside er å incentivisere folk til å like siden ved å skape noe hemmelig, eneste, eneste innhold. vanligvis referert til som en "fan gate". Facebook har også samarbeidet med ... Les mer kan være mer nyttig.

Hvordan det fungerer

Vi laster inn et sett med knapper fra de ulike nettverkene og legger til deres respektive hendelser eller tilbakeringinger for å indikere når noe ble delt. EN Ring tilbake er en funksjon som går når noe annet er ferdig, vanligvis overført som en parameter til en annen funksjon. Når du bruker jQuery AJAX for eksempel, kjøres en tilbakekalling av tilbakemelding når AJAX-spørringen har vært vellykket - det gjør noe med de returnerte dataene, som å bekrefte kvittering for skjemadata. Vi bruker også arrangementer - som er litt mer komplekse, men utenfor omfanget av denne opplæringen. Vi utløser da vår egen begivenhet, som inneholder koden for å avsløre en eller flere hemmelige deler av siden. For vår hensikt, bare å skjule litt innhold og avsløre det, bør det være tilstrekkelig, men du kan justere dette for å være litt sikrere som laster via AJAX eller lignende.

Krav:

  • jQuery bør allerede være inkludert og lastes inn i overskriften til siden din. Jeg kommer ikke til å dekke det i dag.
  • Du bør vite hvordan å inkludere Javascript på siden, enten det er via inline script-tagger eller i en egen .JS-fil som er koblet i overskriften.

Grunnleggende deleknapper

La oss starte med å laste inn et grunnleggende sett med deleknapper på siden. Det er to deler til dette, for det første å laste inn JS for knappene (vi bruker asynkron versjon av disse for å unngå å blokkere sidebelastningen). Her er koderne fra alle tre nettverkene - du trenger ikke å skille disse inn i små utdrag, de kan alle gå sammen i en JS-fil.

 / * Facebook * / (funksjon (d, s, id) var js, fjs = d.getElementsByTagName (s) [0]; hvis (d.getElementById (id)) return; js = d.createElement ); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore (js, fjs); (dokument, 'script', 'facebook- jssdk ')); window.fbAsyncInit = function () // init FB JS SDK FB.init (status: true, xfbml: true); ; / * Twitter * / window.twttr = (funksjon (d, s, id) var, js, fjs = d.getElementsByTagName (s) [0], hvis (d.getElementById (id)) returnerer; js = d .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertFor (js, fjs); return window.twttr || ( t = _e: [], klar: funksjon (f) t._e.push (f)); (dokument, "script", "twitter-wjs")); / * Google Plus * / (funksjon () 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);) ();

Deretter plasserer du disse hvor du liker knappene som skal vises:

Husk å endre data-via attributtet til din egen Twitter-bruker. Legg også merke til tilstedeværelsen av en tilbakeringingsparameter på plussOn-knappen - det er ingen hendelse å knytte til her, bare en tilbakeringing når knappen klikkes.

Endelig opprett en ny CSS-klasses definisjon for “.skjult“, og sett display: none eiendom for det. Alt du ønsker å skjule til delte, bør gå inn her.

Pass på at knappene dine lastes på dette punktet.

Feste til å dele hendelser

Her er den virkelige magien. La oss starte med Facebook. Etter FB.init funksjon, bruk FB.Event.subscribe som følger:

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

Her ber vi om å lytte til edge.create Hendelse (sparket når en bruker liker siden). Vi utløser deretter vår egen jQuery-hendelse som jeg har ringt pageShared, og passerer i href-verdien som nettadressen som ble delt. Vi sjekker dette senere. Din komplette Facebook-knappkode skal nå se ut som:

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

Neste, Twitter. twttr.events.bind brukes her (du kan også legge til en følgebevinst hvis du vil), men det viktige å huske er at disse alle må pakkes inn i twttr.ready Ring tilbake. Igjen utløser vi den samme jQuery sideShared-hendelsen, og passerer den riktige variabelen for å representere nettadressen som ble delt.

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

Endelig, Google Plus. Husk tidligere jeg forklarte at det ikke er noen hendelser for plusOne, så i stedet har vi angitt en tilbakeringingsfunksjon. La oss nå opprette den funksjonen og utløse sidenSvart hendelse derfra.

 funksjon plusOnnet (obj) $ .event.trigger (type: "pageShared", url: obj.href);

Vis meg pengene

Til slutt må vi legge ved vår tilpassede sideSvart hendelse som følger:

 / * Lytt til sidenAndret hendelse * / $ (dokument) .on ('pageShared', funksjon (e) hvis (e.url == window.location.href) $ (". Hemmelig"). ;);

Veldig enkelt, hvis nettadressen er sendt inn, er den samme som den nåværende siden, viser vi det hemmelige innholdet til brukeren. I eksemplet jeg laget, en kattunge. Du er heldig folk!

Jeg er lat. Kan jeg laste ned din komplette demonstrasjon?

For å laste ned den komplette demofilen for denne opplæringen - du gjettet det - bare dele siden ved hjelp av knappene på siden der, og nedlastingskoblingen vil bli åpenbart for deg.

Problemer med koden? Gi meg beskjed i kommentarene, men en liberal dollop av console.log vil hjelpe deg å forstå hvilke gjenstander som sendes tilbake til deg og hemmelighetene de inneholder; og vær sikker på at du bruker de nøyaktige knappekodene som følger med her, da noen formater (som iFrame) ikke fungerer med disse hendelsene.

Last ned test.html og prøv på din egen server

Utforsk mer om: jQuery, programmering, webutvikling.