Wordpress en webontwikkeling

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

Maak je eigen Tweet / Like / + 1 om systeem te ontgrendelen met jQuery / Wordpress en webontwikkeling

Onder viral verstaan ​​betekende een ziekte-epidemie, maar nu is het iets waar alle makers van content naar hunkeren. U kon vertrouw alleen op de kwaliteit van uw inhoud - als het goed genoeg is, zullen mensen het delen, goed? Kan zijn. Maar je kunt ook de dingen een beetje helpen door iets waardevols aan te bieden aan degenen die wel delen - een coupon, een download, een smiley-gezichtssticker in de post of een stockfoto van een schattig kitten. 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 die het ontgrendelingsmechanisme daar willen hebben. Als u op zoek bent om dit op uw Facebook-pagina te doen, dan is de eenvoudige Facebook-fanpoort-tutorial Leuk om te ontgrendelen: Hoe een eenvoudige Facebook-fanpoort bouwen zonder te betalen voor hosting Leuk om te ontgrendelen: hoe u een eenvoudige Facebook-fanpoort kunt bouwen zonder te betalen voor Hosting Een ongelooflijk effectief gebruik van een door Facebook gehoste merkpagina is mensen stimuleren om de pagina leuk te vinden door een aantal geheime leden-alleen inhoud te creëren; meestal aangeduid als een "ventilatorpoort". Facebook is ook een partner ... Lees meer kan meer nuttig zijn.

Hoe het werkt

We laden een aantal knoppen uit de verschillende netwerken en koppelen aan hun respectieve evenementen of callbacks om aan te geven wanneer iets werd gedeeld. EEN Bel terug is een functie die wordt uitgevoerd als iets anders is voltooid, meestal als parameter doorgegeven aan een andere functie. Wanneer u bijvoorbeeld jQuery AJAX gebruikt, wordt een succesterugroep uitgevoerd wanneer de AJAX-query is geslaagd: deze doet iets met de geretourneerde gegevens, zoals het bevestigen van de ontvangst van formuliergegevens. We zullen ook gebruiken events - die een beetje ingewikkelder zijn, maar buiten het bereik van deze tutorial. We activeren dan onze eigen gebeurtenis, die de code bevat om een ​​of meer geheime delen van de pagina te onthullen. Voor ons doel zou alleen al het verbergen van een beetje inhoud en het onthullen voldoende moeten zijn, maar je zou dit kunnen aanpassen om een ​​beetje veiliger te zijn dat laadt via AJAX of vergelijkbaar.

Vereisten:

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

Basic Share-knoppen

Laten we beginnen met het laden van een basisset deelknoppen op de pagina. Dit bestaat uit twee delen, ten eerste om de JS voor de knoppen te laden (we gebruiken de asynchrone versie hiervan om te voorkomen dat de pagina wordt geladen). Hier zijn de codes van alle drie netwerken - je hoeft deze niet te scheiden in kleine stukjes, ze kunnen allemaal samengaan 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]; if (d.getElementById (id)) terug; js = d .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); return window.twttr || ( t = _e: [], gereed: functie (f) t._e.push (f)); (document, "script", "twitter-wjs")); / * Google Plus * / (function () 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);) ();

Plaats deze vervolgens waar u de knoppen wilt laten verschijnen:

Vergeet niet om het kenmerk data-via te veranderen in uw eigen Twitter-gebruiker. Let ook op de aanwezigheid van een callback-parameter op de plusOne-knop - er is geen event om hier aan te hechten, 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 je het deelt, moet hier in gaan.

Zorg ervoor dat je knoppen op dit moment worden geladen.

Bijlagen om evenementen te delen

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

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

Hier vragen we om te luisteren naar de edge.create evenement (afgevuurd wanneer een gebruiker de pagina leuk vindt). We triggeren vervolgens ons eigen jQuery-evenement dat ik heb gebeld pageShared, en het doorgeven van de href-waarde als de URL die werd gedeeld. We zullen dit later controleren. Uw complete Facebook-knopcode moet er nu als volgt uitzien:

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

Volgende, Twitter. twttr.events.bind wordt hier gebruikt (u kunt ook een follow-gebeurtenis toevoegen als u dat wilt), maar het belangrijkste om te onthouden is dat deze allemaal moeten worden ingepakt in de twttr.ready Bel terug. Nogmaals, we triggeren dezelfde jQuery-pagina Gedeelde gebeurtenis en geven de juiste variabele door om de gedeelde URL aan te duiden.

 twttr.ready (functie (twttr) twttr.events.bind ('tweet', functie (evenement) $ .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 hebben we in plaats daarvan een callback-functie gespecificeerd. Laten we nu die functie maken en de pageShared-gebeurtenis vanaf daar activeren.

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

Toon me het geld

Ten slotte moeten we als volgt aan onze aangepaste gebeurtenis pageShared hechten:

 / * Luister naar de pagina Gedeelde gebeurtenis * / $ (document) .on ('pageShared', functie (e) if (e.url == window.location.href) $ (". Secret"). Show () ;);

Heel eenvoudig, als de doorgegeven URL dezelfde is als de huidige pagina, tonen we de geheime inhoud aan de gebruiker. In het voorbeeld dat ik heb gemaakt, een kitten. Jij gelukkigen!

Ik ben lui. Kan ik uw complete demo downloaden??

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

Problemen met de code? Laat het me weten in de comments, maar een flinke klodder console.log zal u helpen te begrijpen welke voorwerpen aan u worden doorgegeven en welke geheimen ze bevatten; en zorg ervoor dat u de exacte knopcodes gebruikt die hier worden verstrekt, omdat sommige indelingen (zoals iFrame) niet werken met deze gebeurtenissen.

Download test.html en probeer het op uw eigen server

Ontdek meer over: jQuery, Programming, Web Development.