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

Annons

Att vara viral brukade betyda 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 tillräckligt bra kommer folk att dela det, eller hur? Kanske. Men du kan också hjälpa till med lite saker genom att erbjuda något extra av värde för dem som delar - en kupong, en nedladdning, ett smiley-ansikts klistermärke i posten eller en stockbild av en söt kattunge. Idag visar jag dig hur du skapar din egen gilla / tweet / + 1 för att låsa upp systemet med lite jQuery och de ursprungliga API: erna.

Den här metoden är för personer som har sina egna webbplatser och vill låsa upp mekanismen där. Om du vill göra detta på din Facebook-sida är det grundläggande Facebook fans gateväg Gillar att låsa upp: Hur man bygger en grundläggande Facebook-fanport utan att betala för värdEn otroligt effektiv användning av en varumärkessida som är värd på Facebook är att stimulera människor att gilla sidan genom att skapa hemligt innehåll för medlemmar; vanligtvis kallad en "fan gate". Facebook har också gått med ...

Läs mer kan vara mer användbart.

Hur det fungerar

Vi laddar en uppsättning knappar från de olika nätverken och kopplar till deras 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 är klart, som vanligtvis skickas in som en parameter till en annan funktion. När du till exempel använder jQuery AJAX, körs en framgångssuppringning när AJAX-frågan har lyckats - det gör något med den returnerade datan, som att bekräfta mottagande av formulärdata. Vi kommer också att använda evenemang - som är lite mer komplexa, men utanför denna tutorials räckvidd. Vi startar sedan 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 borde det bara räcka med att dölja lite innehåll och avslöja det, 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. Jag tänker inte täcka det idag.
• Du bör veta hur du inkluderar Javascript på sidan, oavsett om det sker via inline-skripttaggar eller i en separat .JS-fil som är länkad i rubriken.

Grundläggande delningsknappar

Låt oss börja med att ladda en grundläggande uppsättning delningsknappar på sidan. Det finns två delar till detta, för det första för 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ätverk - du behöver inte separera dessa i små utdrag, de kan alla gå samman 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/en_US/all.js"; fjs.parentNode.insertBefore (js, fjs); } (dokument, 'skript', 'facebook-jssdk')); windows.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]; 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); tillbaka fönster.twttr || (t = {_e: [], klar: funktion (f) {t._e.push (f)}}); } (dokument, "skript", "twitter-wjs")); /* Google Plus */ (funktion () {var po = document.createElement ('skript'); po.type = 'text / javascript'; po.async = sant; 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 vill att knapparna ska visas:

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

Slutligen, skapa en ny CSS-klassdefinition för ".dold“, Och ställ in display: ingen egendom för det. Allt du vill gömma tills delat ska gå in här.

Se till att dina knappar laddas vid denna punkt.

Bifoga för att dela händelser

Här är den verkliga magin. 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 om att lyssna på edge.create händelse (avfyras när en användare gillar sidan). Vi utlöser sedan vår egen jQuery-händelse som jag har ringt pageShared, och lämna in href-värdet som den URL som delades. Vi kommer att kontrollera det senare. Din kompletta Facebook-knappkod ska nu se ut:

 windows.fbAsyncInit = funktion () {// 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 ansluta till en följhändelse också om du vill), men det viktiga att komma ihåg är att alla dessa måste förpackas i twttr.ready ring tillbaka. Återigen utlöser vi samma jQuery-sidaShared-händelse och överför rätt variabel för att representera URL 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 att jag tidigare förklarade att det inte finns några händelser för plusOne, så istället har vi angett en återuppringningsfunktion. Låt oss nu skapa den funktionen och trigga sidanShared-händelsen därifrån.

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

Visa mig pengarna

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

/ * Lyssna på sidan Shared event * / $ (dokument) .on ('pageShared', funktion (e) {if (e.url == windows.location.href) {$ (". hemlighet"). visa (); } });

Helt enkelt, om den URL som skickats in är densamma som den aktuella sidan, visar vi det hemliga innehållet för användaren. I exemplet jag gjorde, en kattunge. Ni lyckliga människor!

Jag är lat. Kan jag ladda ner din kompletta demonstration?

För att ladda ner den fullständiga demofilen för den här tutorialen - ja, du gissade det - bara dela sidan med hjälp av knapparna på sidan där och nedladdningslänken kommer magiskt att avslöjas för dig.

Problem med koden? Låt mig veta i kommentarerna, men en liberal dupp av console.log hjälper dig att förstå vilka objekt som skickas tillbaka till dig och hemligheterna de innehåller; och se till att du använder de exakta knappkoderna som levereras här, eftersom vissa format (som iFrame) inte fungerar med dessa händelser.

Ladda ner test.html och försök på din egen server