Wordpress & Webbutveckling

Gör din egen Tweet / Gilla / + 1 för att låsa upp systemet med jQuery

Gör din egen Tweet / Gilla / + 1 för att låsa upp systemet med jQuery / Wordpress & Webbutveckling

Going viral brukade innebära en sjukdomsepidemi, men nu är det något som alla innehållsskapare önskar. Du skulle kunna lita på kvaliteten på ditt innehåll ensam - om det är bra nog, kommer folk att dela det, rätt? Kanske. Men du kan också hjälpa saker längs lite genom att erbjuda något extra värde för dem som delar - en kupong, en nedladdning, en smiley face sticker i posten eller en stock bild av en söt kattunge. Idag visar jag dig hur du skapar din egen gillar / tweet / + 1 för att låsa upp systemet med lite jQuery och de inbyggda API: erna.

Den här metoden är för personer som har egna webbplatser och vill låsa upp mekanismen där. Om du vill göra detta på din Facebook-sida, är den grundläggande Facebook-fanportens handledning gilla att låsa upp: Hur man bygger en grundläggande Facebook Fan Gate utan att betala för Hosting som att låsa upp: Hur man bygger en grundläggande Facebook Fan Gate utan att betala för Hosting En otroligt effektiv användning av en Facebook-värdig varumärkessida är att incitamenta människor att tycka om sidan genom att skapa något hemligt medlemmars enda innehåll. vanligen kallad "fan gate". Facebook har också samarbetat ... Läs mer kan vara mer användbart.

Hur det fungerar

Vi laddar en uppsättning knappar från de olika näten och bifogar respektive händelser eller återuppringningar för att indikera när något delades. en ring tillbaka är en funktion som körs när något annat har slutförts, vanligtvis passerat som en parameter till en annan funktion. När du till exempel använder jQuery AJAX körs en återuppringning av framgång när AJAX-frågan har blivit framgångsrik - det gör något med den returnerade data, som att bekräfta mottagandet av formulärdata. Vi ska också använda evenemang - som är lite mer komplexa, men utan ramen för denna handledning. Då utlöser vi vår egen händelse, som innehåller koden för att avslöja en eller flera hemliga delar av sidan. För vårt syfte, bara att gömma lite innehåll och avslöja det ska vara tillräckligt, men du kan justera detta för att vara lite säkrare som laddas via AJAX eller liknande.

Krav:

  • jQuery bör redan inkluderas och laddas i sidhuvudet på din sida. Jag kommer inte att täcka det idag.
  • Du borde veta hur man inkluderar Javascript på sidan, oavsett om det är via inline-skriptkoder eller i en separat .JS-fil som är länkad i rubriken.

Knappar Basic Share

Låt oss börja med att ladda en grundläggande uppsättning delknappar på sidan. Det finns två delar till detta, för det första att ladda JS för knapparna (vi använder asynkron version av dessa för att undvika att blockera sidbelastningen). Här är koderna från alla tre nätverken - du behöver inte skilja dem i små bitar, de kan alla gå ihop i en JS-fil.

 / * Facebook * / (funktion (d, s, id) var js, fjs = d.getElementsByTagName (s) [0], om (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 = (funktion (d, s, id) var t, js, fjs = d.getElementsByTagName (s) [0], om (d.getElementById (id)) returnerar; js = d .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); returnera window.twttr || ( t = _e: [], redo: funktion (f) t._e.push (f)); (dokument, "script", "twitter-wjs")); / * Google Plus * / (funktion () 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);) ();

Placera sedan dessa där du gillar knapparna som ska visas:

Kom ihåg att ändra data-via-attributet till din egen Twitter-användare. Observera också närvaron av en återuppringningsparameter på plus-knappen - det finns ingen händelse att bifoga här, bara en återuppringning när knappen klickas.

Slutligen skapa en ny CSS klassdefinition för “.dold“, och ställa in display: none egendom för den. Allt du vill gömma tills delat ska gå in här.

Se till att dina knappar laddas på den här tiden.

Bifoga för att dela händelser

Här är den verkliga magiken. Låt oss börja med Facebook. Efter FB.init funktion, användning FB.Event.subscribe som följer:

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

Här ber vi att lyssna på edge.create händelse (avbruten när en användare gillar sidan). Vi utlöser då vår egen jQuery-händelse som jag har ringt pageShared, och passerar i href-värdet som den URL som delades. Vi kommer att kolla här senare. Din fullständiga Facebook-knapp kod ska nu se ut:

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

Nästa Twitter. twttr.events.bind används här (du kan också bifoga en händelse händelse om du vill), men det viktiga att komma ihåg är att alla måste vikas in i twttr.ready ring tillbaka. Återigen utlöser vi samma jQuery pageShared-händelse, som passerar i rätt variabel för att representera webbadressen som delades.

 twttr.ready (funktion (twttr) twttr.events.bind ('tweet', funktion (händelse) $ .event.trigger (typ: "pageShared", url: event.target.baseURI);); );

Slutligen, Google Plus. Kom ihåg tidigare jag förklarade att det inte finns några händelser för plusOne, så istället har vi angivit en återuppringningsfunktion. Låt oss nu skapa den funktionen och utlösa händelsen pageShared därifrån.

 funktion plusOnvänd (obj) $ .event.trigger (typ: "pageShared", url: obj.href);

Visa mig pengarna

Slutligen måste vi bifoga till vår anpassade pageShared-händelse enligt följande:

 / * Lyssna på sidan Delad händelse * / $ (dokument) .on ('pageShared', funktion (e) if (e.url == window.location.href) $ (". Secret"). ;);

Mycket enkelt, om webbadressen passerade in är densamma som den aktuella sidan visar vi det hemliga innehållet till användaren. I det exempel jag gjorde, en kattunge. Du lyckliga människor!

Jag är lat. Kan jag ladda ner din fullständiga demo?

För att ladda ner den fullständiga demofilen för denna handledning - du gissade det - bara dela sidan med knapparna på sidan där och nedladdningslänken kommer att bli avslöjad för dig.

Problem med koden? Låt mig veta i kommentarerna, men en liberal dollop av console.log hjälper dig att förstå vilka föremål som skickas tillbaka till dig och de hemligheter de innehåller; och var noga med att använda exakta knappkoder som levereras här, eftersom vissa format (som iFrame) inte fungerar med dessa händelser.

Hämta test.html och försök på din egen server

Utforska mer om: jQuery, programmering, webbutveckling.