Machen Sie Ihr eigenes Tweet / Like / + 1, um das System mit jQuery freizuschalten

Going viral bedeutete früher eine Krankheitsepidemie, aber jetzt ist es etwas, wonach sich alle Content-Ersteller sehnen. Sie könnte Verlassen Sie sich allein auf die Qualität Ihrer Inhalte. Wenn es gut genug ist, teilen die Leute es, richtig? Könnte sein. Sie können jedoch auch etwas helfen, indem Sie denjenigen, die Aktien teilen, einen Mehrwert bieten - einen Gutschein, einen Download, einen Smiley-Aufkleber in der Post oder ein Bild eines niedlichen Kätzchens. Heute zeige ich Ihnen, wie Sie Ihre eigenen erstellen können wie / tweet / + 1, um das System freizuschalten mit ein wenig jQuery und den nativen APIs.

Diese Methode ist für Benutzer gedacht, die ihre eigene Website haben und den Entsperrmechanismus dort möchten. Wenn Sie dies auf Ihrer Facebook-Seite tun möchten, können Sie das grundlegende Facebook-Fan-Gate-Tutorial "Like Unlock" (Freischalten): So erstellen Sie ein einfaches Facebook-Fan-Gate ohne für Hosting zu bezahlen Hosting Eine äußerst effektive Nutzung einer von Facebook gehosteten Markenseite besteht darin, die Leute dazu zu bewegen, die Seite zu mögen, indem sie geheimen, nur für Mitglieder bestimmten Inhalt erstellen. allgemein als "Fächergatter" bezeichnet. Facebook hat auch eine Partnerschaft eingegangen… Lesen Sie mehr kann nützlicher sein.

Wie es funktioniert

Wir laden eine Reihe von Schaltflächen aus den verschiedenen Netzwerken und fügen ihre jeweiligen Ereignisse oder Rückrufe hinzu, um anzuzeigen, wann etwas freigegeben wurde. EIN Ruf zurück ist eine Funktion, die ausgeführt wird, wenn etwas anderes abgeschlossen ist, und normalerweise als Parameter an eine andere Funktion übergeben wird. Wenn Sie beispielsweise jQuery AJAX verwenden, wird nach erfolgreicher AJAX-Abfrage ein erfolgreicher Rückruf ausgeführt. Er führt etwas mit den zurückgegebenen Daten aus, z. B. den Empfang von Formulardaten bestätigen. Wir werden auch verwenden Veranstaltungen - die etwas komplexer sind, jedoch außerhalb des Umfangs dieses Tutorials. Wir lösen dann unser eigenes Ereignis aus, das den Code enthält, um einen oder mehrere geheime Teile der Seite anzuzeigen. Es genügt für uns, nur ein paar Inhalte zu verbergen und zu enthüllen, aber Sie können dies etwas sicherer einstellen als das Laden mit AJAX oder ähnlichem.

Bedarf:

• jQuery sollte bereits in der Kopfzeile Ihrer Seite enthalten sein und geladen werden. Ich werde das heute nicht behandeln.
• Sie sollten wissen, wie Sie Javascript auf der Seite einfügen, sei es durch Inline-Skript-Tags oder in einer separaten .JS-Datei, die in der Kopfzeile verlinkt ist.

Grundlegende Share-Schaltflächen

Beginnen wir mit dem Laden eines einfachen Satzes von Share-Schaltflächen auf der Seite. Es gibt zwei Teile, erstens, um den JS für die Schaltflächen zu laden (wir verwenden eine asynchrone Version davon, um das Laden der Seite zu verhindern). Hier sind die Codes aus allen drei Netzwerken - Sie müssen diese nicht in kleine Snippets aufteilen, sie können alle in einer JS-Datei zusammengefasst werden.

 / * 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, 'script', 'facebook- jssdk ')); window.fbAsyncInit = function () // führe das FB JS SDK ein FB.init (status: true, xfbml: true); ; / * Twitter * / window.twttr = (Funktion (d, s, id) var t, js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) return; 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: [], ready: Funktion (f) t._e.push (f)); (Dokument, "Skript", "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);) ();

Platzieren Sie diese an den Stellen, an denen die Schaltflächen erscheinen sollen:

Vergessen Sie nicht, das data-via-Attribut für Ihren eigenen Twitter-Benutzer zu ändern. Beachten Sie auch das Vorhandensein eines Rückrufparameters auf der PlusOne-Schaltfläche. Hier müssen Sie kein Ereignis anhängen, sondern nur einen Rückruf, wenn Sie auf die Schaltfläche klicken.

Erstellen Sie schließlich eine neue CSS-Klassendefinition für “.versteckt“, und setze das Anzeige: keine Eigentum dafür. Alles, was Sie bis zur Freigabe verbergen möchten, sollte hier eingehen.

Stellen Sie sicher, dass Ihre Schaltflächen an dieser Stelle geladen werden.

Anhängen, um Ereignisse zu teilen

Hier ist die wahre Magie. Beginnen wir mit Facebook. Nach dem FB.init Funktion verwenden FB.Event.subscribe wie folgt:

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

Hier bitten wir, das zu hören edge.create Ereignis (ausgelöst, wenn ein Benutzer die Seite mag). Wir lösen dann unser eigenes jQuery-Ereignis aus, das ich angerufen habe pageShared, und Übergeben des Href-Werts als gemeinsam genutzte URL. Wir werden das später überprüfen. Ihr vollständiger Facebook-Button-Code sollte jetzt so aussehen:

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

Als nächstes Twitter. twttr.events.bind wird hier verwendet (Sie können sich auch an ein Folgeereignis anschließen, wenn Sie möchten), aber das Wichtigste, das Sie beachten sollten, ist, dass diese alle in das Feld " twttr.ready Ruf zurück. Wir lösen erneut dasselbe jQuery pageShared -Ereignis aus und übergeben die richtige Variable, um die gemeinsam genutzte URL darzustellen.

 twttr.ready (Funktion (twttr) twttr.events.bind ('twittern', Funktion (Ereignis) $ .event.trigger (type: "pageShared", url: event.target.baseURI);); );

Zum Schluss noch Google Plus. Ich erinnere mich an früher, dass ich erklärt habe, dass es keine Ereignisse für plusOne gibt. Deshalb haben wir stattdessen eine Rückruffunktion angegeben. Lassen Sie uns nun diese Funktion erstellen und von dort das pageShared-Ereignis auslösen.

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

Zeigen Sie mir das Geld

Schließlich müssen wir unser benutzerdefiniertes pageShared-Ereignis wie folgt anhängen:

 / * Hören Sie auf das pageShared-Ereignis * / $ (document) .on ('pageShared', Funktion (e) if (e.url == window.location.href) $ (". Secret"). Show () ;);

Wenn die übergebene URL der aktuellen Seite entspricht, zeigen wir dem Benutzer den geheimen Inhalt. In dem Beispiel habe ich ein Kätzchen gemacht. Du glückliche Leute!

Ich bin faul. Kann ich Ihre komplette Demo herunterladen??

Um die vollständige Demo-Datei für dieses Tutorial herunterzuladen - yep, Sie haben es erraten - teilen Sie einfach die Seite mit den Schaltflächen auf der Seite dort und der Download-Link wird Ihnen auf magische Weise offenbart.

Probleme mit dem Code? Lass es mich in den Kommentaren wissen, aber ein liberaler Schnaps von console.log wird Ihnen helfen zu verstehen, welche Objekte an Sie zurückgegeben werden und welche Geheimnisse sie enthalten; Stellen Sie sicher, dass Sie die hier angegebenen genauen Tastencodes verwenden, da einige Formate (wie iFrame) mit diesen Ereignissen nicht funktionieren.

Laden Sie test.html herunter und probieren Sie es auf Ihrem eigenen Server

Erfahren Sie mehr über: jQuery, Programmierung, Webentwicklung.