Lav din egen Tweet / Synes godt om / + 1 for at låse op med jQuery

Reklame

At være viral plejede at betyde en sygdomepidemi, men nu er det noget, alle indholdsskabere beder om. Du kunne stole på kvaliteten af ​​dit indhold alene - hvis det er godt nok, vil folk dele det, ikke? måske. Men du kan også hjælpe tingene lidt ved at tilbyde noget ekstra af værdi for dem, der deler - en kupon, en download, et smiley-ansigts-klistermærke i posten eller et lagerbillede af en sød killing. I dag viser jeg dig, hvordan du opretter dine egne kan lide / tweet / + 1 for at låse op for systemet med lidt jQuery og de oprindelige API'er.

Denne metode er til personer, der har deres egne websteder og gerne vil have oplåsningsmekanismen der. Hvis du ønsker at gøre dette på din Facebook-side, er det grundlæggende Facebook fan gate tutorial Ligesom at låse op: Sådan bygger du en grundlæggende Facebook-fanport uden at betale for hostingEn utrolig effektiv brug af en Facebook-vært-mærkeside er at tilskynde folk til at kunne lide siden ved at oprette noget hemmeligt indhold med medlemmer; ofte benævnt en "fan gate". Facebook har også samarbejdet ... Læs mere

kan være mere nyttigt.

Hvordan det virker

Vi indlæser et sæt knapper fra de forskellige netværk og tilknytter deres respektive begivenheder eller tilbagekald for at indikere, hvornår noget blev delt. EN ring tilbage er en funktion, der kører, når noget andet er afsluttet, som normalt overføres som en parameter til en anden funktion. Når du f.eks. Bruger jQuery AJAX, køres en succes-tilbagekald, når AJAX-forespørgslen har været vellykket - det gør noget med de returnerede data, som at bekræfte modtagelse af formulardata. Vi bruger også begivenheder - som er lidt mere komplekse, men uden for denne tutorials rækkevidde. Vi udløser derefter vores egen begivenhed, der indeholder koden til at afsløre en eller flere hemmelige dele af siden. Til vores formål skulle det bare være nok at skjule lidt indhold og afsløre det, men du kan justere dette til at være lidt mere sikkert, der indlæses via AJAX eller lignende.

Krav:

• jQuery skal allerede inkluderes og indlæses i overskriften på din side. Det vil jeg ikke dække i dag.
• Du skal vide, hvordan du inkluderer Javascript på siden, hvad enten det sker gennem inline script-tags eller i en separat .JS-fil, der er knyttet i overskriften.

Grundlæggende delingsknapper

Lad os starte med at indlæse et grundlæggende sæt deleknapper på siden. Der er to dele til dette, for det første at indlæse JS for knapperne (vi bruger asynkron version af disse for at undgå at blokere sideindlæsset). Her er koderne fra alle tre netværk - du behøver ikke opdele disse i små uddrag, de kan alle gå sammen i en JS-fil.

/ * Facebook * / (funktion (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/da_US/all.js"; fjs.parentNode.insertBefore (js, fjs); } (dokument, 'script', 'facebook-jssdk')); window.fbAsyncInit = funktion () {// init FB JS SDK FB.init ({status: true, xfbml: true}); }; / * Twitter * / windows.twttr = (funktion (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; hvis (d.getElementById (id)) vender tilbage; js = d.createElement (s); js.id = id; js.src =" https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); return vindue.twttr || (t = {_e: [], klar: funktion (f) {t._e.push (f)}}); } (dokument, "script", "twitter-wjs")); / * Google Plus * / (funktion () {var po = document.createElement ('script'); po.type = 'tekst / javascript'; po.async = sandt; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0]; s.parentNode.insertBefore (po, s); })();

Derefter skal du placere disse, hvor du gerne vil have, at knapperne skal vises:

Husk at ændre data-via attributten til din egen Twitter-bruger. Bemærk også tilstedeværelsen af ​​en tilbagekaldsparameter på plusOne-knappen - der er ingen begivenhed at knytte til her, bare et tilbagekald, når der klikkes på knappen.

Til sidst oprette en ny CSS-klassedefinition til “.skjult“, Og indstil display: ingen ejendom til det. Alt, hvad du vil skjule, indtil det deles, skal gå ind her.

Sørg for, at dine knapper indlæses på dette tidspunkt.

Vedhæftning til deling af begivenheder

Her er den virkelige magi. Lad os starte med Facebook. Efter FB.init funktion, brug FB.Event.subscribe som følger:

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

Her beder vi om at lytte til edge.create begivenhed (fyret, når en bruger kan lide siden). Vi udløser derefter vores egen jQuery-begivenhed, som jeg har kaldt pageShared, og indtastning af href-værdien som den URL, der blev delt. Vi tjekker dette senere. Din komplette Facebook-knapkode skal nu se ud:

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

Næste, Twitter. twttr.events.bind bruges her (du kan også knytte til en følgehændelse, hvis du vil), men det vigtige at huske er, at disse alle skal pakkes ind i twttr.ready ring tilbage. Igen udløser vi den samme jQuery-sideShared-begivenhed og indtaster den korrekte variabel til at repræsentere den URL, der blev delt.

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

Endelig Google Plus. Husk tidligere, at jeg forklarede, at der ikke er nogen begivenheder for plusOne, så i stedet har vi specificeret en tilbagekaldsfunktion. Lad os nu oprette denne funktion og udløse sideShared-begivenheden derfra.

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

Vis mig pengene

Endelig skal vi vedhæfte til vores brugerdefinerede sideShared-begivenhed som følger:

/ * Lyt til sideShared event * / $ (dokument) .on ('pageShared', funktion (e) {if (e.url == windows.location.href) {$ (". hemmelighed"). show (); } });

Meget enkelt, hvis den valgte URL er den samme som den aktuelle side, viser vi det hemmelige indhold til brugeren. I eksemplet lavede jeg en killing. I heldige mennesker!

Jeg er doven. Kan jeg downloade din komplette demonstration?

For at downloade den komplette demofil til denne tutorial - ja, du gættede det - bare del siden ved hjælp af knapperne på siden der, og download-linket vil blive magisk afsløret for dig.

Problemer med koden? Fortæl mig det i kommentarerne, men en liberal dukke af console.log vil hjælpe dig med at forstå, hvilke genstande der sendes tilbage til dig og de hemmeligheder, de indeholder; og sørg for at bruge de nøjagtige knapkoder, der leveres her, da nogle formater (som iFrame) ikke fungerer med disse begivenheder.

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