Maak uw eigen Tweet / Like / + 1 om het systeem te ontgrendelen met jQuery

Advertentie

Viraal gaan betekende vroeger een ziekte-epidemie, maar nu is het iets waar alle makers van inhoud naar hunkeren. U kon vertrouw alleen op de kwaliteit van uw inhoud - als het goed genoeg is, zullen mensen het delen, toch? Kan zijn. Maar je kunt de dingen ook een beetje helpen door iets extra's aan te bieden aan degenen die wel delen - een kortingsbon, een download, een smiley-sticker op de post of een stockafbeelding van een schattig katje. Vandaag laat ik je zien hoe je je eigen kunt maken like / tweet / + 1 om het systeem te ontgrendelen met een beetje jQuery en de native API's.

Deze methode is voor mensen die hun eigen websites hebben en het ontgrendelingsmechanisme daar willen hebben. Als je dit op je Facebook-pagina wilt doen, de basis Facebook Fan Gate-zelfstudie Graag ontgrendelen: hoe u een basis Facebook Fan Gate kunt bouwen zonder te betalen voor hostingEen ongelooflijk effectief gebruik van een door Facebook gehoste merkpagina is om mensen te stimuleren om de pagina leuk te vinden door het creëren van geheime content voor leden; gewoonlijk een "ventilatorpoort" genoemd. Facebook werkt ook samen ...

Lees verder kan nuttiger zijn.

Hoe het werkt

We laden een reeks knoppen van de verschillende netwerken en voegen deze toe aan hun respectievelijke evenementen of terugbelacties om aan te geven wanneer iets is gedeeld. EEN Bel terug is een functie die wordt uitgevoerd wanneer iets anders is voltooid, meestal als parameter doorgegeven aan een andere functie. Wanneer u bijvoorbeeld jQuery AJAX gebruikt, wordt een succesvolle callback uitgevoerd wanneer de AJAX-query succesvol is geweest - het doet iets met de geretourneerde gegevens, zoals het bevestigen van ontvangst van formuliergegevens. We gebruiken ook evenementen - die iets complexer zijn, maar buiten het bereik van deze tutorial. We activeren dan ons eigen evenement, dat de code bevat om een ​​of meer geheime delen van de pagina te onthullen. Voor ons doel zou het voldoende zijn om een ​​beetje inhoud te verbergen en te onthullen, maar je zou dit kunnen aanpassen om een ​​beetje veiliger te zijn dat wordt geladen via AJAX of iets dergelijks.

Voorwaarden:

• jQuery moet al zijn opgenomen en in de koptekst van uw pagina worden geladen. Ik ga dat vandaag niet behandelen.
• U moet weten hoe u Javascript op de pagina moet opnemen, of dat nu is via inline scripttags of in een afzonderlijk .JS-bestand dat in de koptekst is gekoppeld.

Basic Share-knoppen

Laten we beginnen met het laden van een basisset knoppen voor delen op de pagina. Dit bestaat uit twee delen: ten eerste om de JS voor de knoppen te laden (we gebruiken een asynchrone versie hiervan om te voorkomen dat de pagina wordt geblokkeerd). Hier is de codes van alle drie de netwerken - u hoeft deze niet op te splitsen in kleine fragmenten, ze kunnen allemaal samenkomen in één JS-bestand.

/ * Facebook * / (functie (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); } (document, 'script', 'facebook-jssdk')); window.fbAsyncInit = function () {// init de FB JS SDK FB.init ({status: true, xfbml: true}); }; / * Twitter * / window.twttr = (functie (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; als (d.getElementById (id)) retourneren; js = d.createElement (s); js.id = id; js.src = " https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); window.twttr || retourneren (t = {_e: [], ready: function (f) {t._e.push (f)}}); } (document, "script", "twitter-wjs")); /* Google Plus */ (function () {var po = document.createElement ('script'); po.type = 'text / javascript'; po.async = waar; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0]; s.parentNode.insertBefore (po, s); })();

Plaats deze vervolgens waar u wilt dat de knoppen verschijnen:

Vergeet niet om het data-via attribuut te veranderen naar je eigen Twitter-gebruiker. Let ook op de aanwezigheid van een callback-parameter op de plusOne-knop - er is hier geen gebeurtenis om aan te koppelen, alleen een callback wanneer op de knop wordt geklikt.

Maak ten slotte een nieuwe CSS-klassendefinitie voor ".verborgen“, En stel de Geen weergeven eigendom ervoor. Alles wat je wilt verbergen totdat het wordt gedeeld, moet hier naar binnen gaan.

Zorg ervoor dat uw knoppen op dit punt worden geladen.

Bijvoegen om evenementen te delen

Hier is de echte magie. Laten we beginnen met Facebook. Na de FB.init functie, gebruik FB.Event. Abonneren als volgt:

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

Hier vragen we om te luisteren naar de edge.create gebeurtenis (geactiveerd wanneer een gebruiker de pagina leuk vindt). Vervolgens activeren we onze eigen jQuery-gebeurtenis die ik heb gebeld pagina gedeelden geef de href-waarde door als de URL die werd gedeeld. We zullen dit later controleren. Uw volledige Facebook-knopcode zou er nu als volgt uit moeten zien:

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

Vervolgens Twitter. twttr.events.bind wordt hier gebruikt (u kunt desgewenst ook een vervolggebeurtenis bijvoegen), maar het belangrijkste om te onthouden is dat deze allemaal in de twttr. klaar Bel terug. Nogmaals, we activeren dezelfde jQuery pageShared-gebeurtenis, waarbij we de juiste variabele doorgeven om de gedeelde URL weer te geven.

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

Eindelijk Google Plus. Onthoud eerder dat ik heb uitgelegd dat er geen evenementen zijn voor plusOne, dus in plaats daarvan hebben we een callback-functie gespecificeerd. Laten we nu die functie maken en vanaf daar de gebeurtenis PageShared activeren.

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

Toon mij het geld

Ten slotte moeten we als volgt aan onze custom pageShared-gebeurtenis toevoegen:

/ * Luister naar de pagina Gedeeld evenement * / $ (document) .on ('pageShared', functie (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Heel eenvoudig, als de doorgegeven URL hetzelfde is als de huidige pagina, tonen we de geheime inhoud aan de gebruiker. In het voorbeeld dat ik heb gemaakt, een kitten. Jullie gelukkige mensen!

Ik ben lui. Kan ik uw volledige demo downloaden?

Om het volledige demobestand voor deze tutorial te downloaden - ja, je raadt het al - deel de pagina gewoon met de knoppen aan de zijkant daar en de downloadlink wordt op magische wijze aan je onthuld.

Problemen met de code? Laat het me weten in de reacties, maar een liberale klodder console.log zal u helpen te begrijpen welke objecten aan u worden teruggegeven en welke geheimen ze bevatten; en zorg ervoor dat u de exacte hier opgegeven knopcodes gebruikt, aangezien sommige formaten (zoals iFrame) niet werken met deze evenementen.

Download test.html en probeer het op je eigen server