Machen Sie Ihren eigenen Tweet / Like / + 1, um das System mit jQuery freizuschalten

Werbung

Früher bedeutete das Virusieren eine Krankheitsepidemie, aber jetzt sehnen sich alle Inhaltsersteller danach. Du könnte Verlassen Sie sich allein auf die Qualität Ihrer Inhalte - wenn sie gut genug sind, werden die Leute sie teilen, oder? Könnte sein. Sie können aber auch ein wenig helfen, indem Sie denjenigen, die sie teilen, einen Mehrwert bieten - einen Gutschein, einen Download, einen Smiley-Aufkleber in der Post oder ein Archivbild eines niedlichen Kätzchens. Heute zeige ich Ihnen, wie Sie Ihre eigenen erstellen like / tweet / + 1, um das System freizuschalten mit ein wenig jQuery und den nativen APIs.

Diese Methode ist für Personen gedacht, die ihre eigenen Websites haben und dort den Entsperrmechanismus wünschen. Wenn Sie dies auf Ihrer Facebook-Seite tun möchten, ist dies die Grundvoraussetzung Facebook Fan Gate Tutorial Like Unlock: So bauen Sie ein einfaches Facebook-Fan-Gate, ohne für das Hosting zu bezahlenEine unglaublich effektive Verwendung einer von Facebook gehosteten Markenseite besteht darin, die Leute dazu zu bewegen, die Seite zu mögen, indem einige geheime Inhalte nur für Mitglieder erstellt werden. üblicherweise als "Fan Gate" bezeichnet. Facebook hat auch eine Partnerschaft geschlossen ...

Weiterlesen kann nützlicher sein.

Wie es funktioniert

Wir laden eine Reihe von Schaltflächen aus den verschiedenen Netzwerken und hängen sie an die jeweiligen Ereignisse oder Rückrufe an, um anzuzeigen, wann etwas freigegeben wurde. EIN Rückrufen ist eine Funktion, die ausgeführt wird, wenn etwas anderes beendet ist, und normalerweise als Parameter an eine andere Funktion übergeben wird. Wenn Sie beispielsweise jQuery AJAX verwenden, wird ein erfolgreicher Rückruf ausgeführt, wenn die AJAX-Abfrage erfolgreich war. Mit den zurückgegebenen Daten wird beispielsweise der Empfang von Formulardaten bestätigt. Wir werden auch verwenden Veranstaltungen - die etwas komplexer sind, aber nicht in den Rahmen dieses Tutorials fallen. Wir lösen dann unser eigenes Ereignis aus, das den Code enthält, der einen oder mehrere geheime Teile der Seite enthüllt. Für unseren Zweck sollte es ausreichen, nur ein wenig Inhalt zu verbergen und zu enthüllen. Sie können dies jedoch so anpassen, dass es etwas sicherer ist, wenn es über AJAX oder ähnliches geladen wird.

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 in die Seite einfügen, sei es über Inline-Skript-Tags oder in einer separaten .JS-Datei, die im Header verlinkt ist.

Grundlegende Freigabeschaltflächen

Beginnen wir mit dem Laden eines grundlegenden Satzes von Freigabeschaltflächen auf der Seite. Dies besteht aus zwei Teilen: Erstens dem Laden des JS für die Schaltflächen (wir verwenden eine asynchrone Version davon, um das Blockieren des Seitenladens zu vermeiden). Hier ist die Codes aus allen drei Netzwerken - Sie müssen diese nicht in kleine Schnipsel 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, 'Skript', 'Facebook-Jssdk')); window.fbAsyncInit = function () {// das FB JS SDK FB.init initiieren ({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: [], bereit: Funktion (f) {t._e.push (f)}}); } (Dokument, "Skript", "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); })();

Platzieren Sie diese als Nächstes an der Stelle, an der die Schaltflächen angezeigt werden sollen:

Denken Sie daran, das Data-via-Attribut in Ihren eigenen Twitter-Benutzer zu ändern. Beachten Sie auch das Vorhandensein eines Rückrufparameters auf der PlusOne-Schaltfläche. Hier kann kein Ereignis angehängt werden, sondern nur ein Rückruf, wenn auf die Schaltfläche geklickt wird.

Erstellen Sie abschließend eine neue CSS-Klassendefinition für „.versteckt“Und setzen Sie die Anzeige: keine Eigentum dafür. Alles, was Sie verstecken möchten, bis es geteilt wird, sollte hier hineingehen.

Stellen Sie sicher, dass Ihre Schaltflächen zu diesem Zeitpunkt geladen werden.

Anhängen zum Teilen von Ereignissen

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 ({Typ: "pageShared", URL: href}); });

Hier bitten wir darum, das anzuhören edge.create Ereignis (wird ausgelöst, wenn einem Benutzer die Seite gefällt). Wir lösen dann unser eigenes jQuery-Ereignis aus, das ich aufgerufen habe pageSharedund Übergeben des href-Werts als freigegebene URL. Wir werden dies später überprüfen. Ihr vollständiger Facebook-Button-Code sollte nun folgendermaßen aussehen:

 window.fbAsyncInit = function () {// das FB JS SDK FB.init initiieren ({status: true, xfbml: true}); FB.Event.subscribe ('edge.create', Funktion (href, Widget) {$ .event.trigger ({Typ: "pageShared", URL: href}); }); };

Als nächstes Twitter. twttr.events.bind wird hier verwendet (Sie können auch ein Follow-Ereignis anhängen, wenn Sie möchten), aber das Wichtigste, das Sie beachten sollten, ist, dass diese alle in das Ereignis eingeschlossen werden müssen twttr.ready Rückrufen. Wiederum lösen wir dasselbe jQuery pageShared-Ereignis aus und übergeben die richtige Variable, um die gemeinsam genutzte URL darzustellen.

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

Endlich Google Plus. Denken Sie daran, dass ich zuvor erklärt habe, dass es für plusOne keine Ereignisse gibt. Stattdessen haben wir eine Rückruffunktion angegeben. Erstellen wir nun diese Funktion und lösen von dort aus das pageShared-Ereignis aus.

 Funktion plusOned (obj) {$ .event.trigger ({Typ: "pageShared", URL: obj.href}); }

Zeig mir das Geld

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

/ * Auf das pageShared-Ereignis warten * / $ (document) .on ('pageShared', Funktion (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Ganz einfach, wenn die übergebene URL mit der aktuellen Seite übereinstimmt, zeigen wir dem Benutzer den geheimen Inhalt. In dem Beispiel, das ich gemacht habe, ein Kätzchen. Ihr glücklichen Menschen!

Ich bin faul. Kann ich Ihre vollständige Demo herunterladen?

Um die komplette Demo-Datei für dieses Tutorial herunterzuladen - ja, Sie haben es erraten -, teilen Sie die Seite einfach mit den Schaltflächen an der Seite, und der Download-Link wird Ihnen auf magische Weise angezeigt.

Probleme mit dem Code? Lass es mich in den Kommentaren wissen, aber ein liberaler Haufen console.log hilft Ihnen zu verstehen, welche Objekte an Sie zurückgegeben werden und welche Geheimnisse sie enthalten; Verwenden Sie unbedingt die hier angegebenen genauen Schaltflächencodes, da einige Formate (wie iFrame) mit diesen Ereignissen nicht funktionieren.

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