Κάντε το δικό σας Tweet / Like / + 1 για να ξεκλειδώσετε το σύστημα με το jQuery

Διαφήμιση

Πηγαίνοντας ιογενή χρησιμοποιείται για να σημάνει μια επιδημία ασθένειας, αλλά τώρα είναι κάτι που όλοι οι δημιουργοί περιεχομένου επιθυμούν. Εσείς θα μπορούσε βασιστείτε μόνο στην ποιότητα του περιεχομένου σας - αν είναι αρκετά καλό, οι άνθρωποι θα το μοιραστούν, έτσι; Μπορεί. Αλλά θα μπορούσατε επίσης να βοηθήσετε τα πράγματα μαζί λίγο, προσφέροντας κάτι επιπλέον αξίας σε εκείνους που μοιράζονται - ένα κουπόνι, ένα download, ένα smiley αυτοκόλλητο πρόσωπο στο ταχυδρομείο, ή μια εικόνα αποθεμάτων ενός χαριτωμένο γατάκι. Σήμερα θα σας δείξω πώς να δημιουργήσετε τη δική σας όπως / tweet / + 1 για να ξεκλειδώσετε το σύστημα με ένα μικρό jQuery και τα εγγενή API.

Αυτή η μέθοδος είναι για τους ανθρώπους που έχουν τους δικούς τους ιστοτόπους και θα ήθελαν τον μηχανισμό ξεκλειδώματος εκεί. Αν ψάχνετε να το κάνετε αυτό στη σελίδα σας στο Facebook, το βασικό Facebook tutorial πύλη ανεμιστήρα Όπως για να ξεκλειδώσετε: Πώς να οικοδομήσουμε μια βασική πύλη ανεμιστήρα Facebook χωρίς να πληρώνουν για τη φιλοξενία

Μια απίστευτα αποτελεσματική χρήση μιας σελίδας μάρκας που φιλοξενεί το Facebook είναι να παροτρύνει τους ανθρώπους να αρέσουν στη σελίδα δημιουργώντας κάποιο μυστικό περιεχόμενο μόνο για τα μέλη. που συνήθως αναφέρεται ως "πύλη ανεμιστήρα". Το Facebook έχει επίσης συνεργαστεί ... Διαβάστε περισσότερα μπορεί να είναι πιο χρήσιμη.

Πως δουλεύει

Θα φορτώσουμε ένα σύνολο κουμπιών από τα διάφορα δίκτυα και θα επισυνάψουμε τα αντίστοιχα συμβάντα ή τις επανάκλησεις για να υποδείξουμε πότε θα μοιραζόταν κάτι. ΕΝΑ επανάκλησης είναι μια λειτουργία που εκτελείται όταν έχει ολοκληρωθεί κάτι άλλο, συνήθως μεταβιβάζεται ως παράμετρος σε άλλη λειτουργία. Όταν χρησιμοποιείτε το jQuery AJAX για παράδειγμα, μια κλήση επιτυχίας εκτελείται όταν το ερώτημα AJAX ήταν επιτυχές - κάνει κάτι με τα επιστραφέντα δεδομένα, όπως την αναγνώριση της παραλαβής δεδομένων φόρμας. Θα χρησιμοποιήσουμε επίσης γεγονότα - τα οποία είναι λίγο πιο περίπλοκα, αλλά δεν εμπίπτουν στο πεδίο αυτού του σεμιναρίου. Στη συνέχεια θα ενεργοποιήσουμε το δικό μας γεγονός, το οποίο περιέχει τον κώδικα για να αποκαλύψει ένα ή περισσότερα μυστικά μέρη της σελίδας. Για το σκοπό μας, απλά να κρύβουμε λίγο περιεχόμενο και να το αποκαλύπτουμε θα πρέπει να είναι αρκετό, αλλά θα μπορούσατε να ρυθμίσετε αυτό για να είναι λίγο πιο ασφαλές ότι τα φορτία μέσω AJAX ή παρόμοια.

Απαιτήσεις:

• Το jQuery θα πρέπει ήδη να συμπεριληφθεί και να φορτωθεί στην κεφαλίδα της σελίδας σας. Δεν πρόκειται να το καλύψω σήμερα.
• Θα πρέπει να ξέρετε πώς να συμπεριλάβετε τη Javascript στη σελίδα, είτε πρόκειται για ενσωματωμένες ετικέτες δέσμης ενεργειών είτε σε ξεχωριστό αρχείο .JS που είναι συνδεδεμένο στην κεφαλίδα.

Βασικά κουμπιά κοινής χρήσης

Ας αρχίσουμε με τη φόρτωση ενός βασικού συνόλου κουμπιών κοινής χρήσης στη σελίδα. Υπάρχουν δύο μέρη για αυτό, πρώτα να φορτώσετε το JS για τα κουμπιά (χρησιμοποιούμε ασύγχρονη έκδοση αυτών για να αποφύγετε την παρεμπόδιση του φορτίου της σελίδας). Εδώ τους κωδικούς και από τα τρία δίκτυα - δεν χρειάζεται να τα διαχωρίσετε σε μικρά αποσπάσματα, μπορούν όλοι να πάνε μαζί σε ένα αρχείο JS.

/* Facebook */ (συνάρτηση (d, s, id) {var js, fjs = d.getElementsByTagName [0]; εάν (d.getElementById (id)) {επιστροφή;} js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore (js, fjs); } (έγγραφο, 'σενάριο', 'facebook-jssdk')). window.fbAsyncInit = συνάρτηση () {// init το FB JS SDK FB.init ({status: true, xfbml: true}); }; / * Twitter * / window.twttr = (συνάρτηση (d, s, id) {var t, js, fjs = d.getElementsByTagName [0]; αν (d.getElementById (id)) επιστρέφει; js = d.createElement (s); js.id = id; js.src = " https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); επιστροφή window.twttr || (t = {_e: [], έτοιμο: λειτουργία (f) {t._e.push (f)}}); } (έγγραφο, "script", "twitter-wjs")). / * Google Plus * / (συνάρτηση () {var po = document.createElement ('script'); po.type = 'κείμενο / javascript'. po.async = true; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('σενάριο') [0]; s.parentNode.insertBefore (po, s); })();

Στη συνέχεια, τοποθετήστε αυτά όπου σας αρέσουν τα κουμπιά που εμφανίζονται:

Θυμηθείτε να αλλάξετε το χαρακτηριστικό δεδομένων μέσω του δικού σας χρήστη στο Twitter. Επίσης, σημειώστε την παρουσία μιας παραμέτρου επανάκλησης στο κουμπί plusOne - δεν υπάρχει γεγονός που να επισυνάπτεται εδώ, απλά μια επιστροφή κλήσης όταν πατηθεί το κουμπί.

Τέλος, δημιουργήστε έναν νέο ορισμό κλάσης CSS για ".κρυμμένος"Και ορίστε το οθόνη: καμία ιδιοκτησία για αυτό. Οτιδήποτε θέλετε να κρύψετε μέχρι να μοιραστείτε πρέπει να πάει εδώ.

Βεβαιωθείτε ότι τα κουμπιά σας φορτώνονται σε αυτό το σημείο.

Επισύναψη για την κοινή χρήση εκδηλώσεων

Εδώ είναι η πραγματική μαγεία. Ας ξεκινήσουμε με το Facebook. Μετά το FB.init λειτουργία, χρήση FB.Event.subscribe ως εξής:

 FB.Event.subscribe ('edge.create', συνάρτηση (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); });

Εδώ σας ζητάμε να ακούσετε το edge.create (που εκτοξεύεται όταν ένας χρήστης θέλει τη σελίδα). Στη συνέχεια ενεργοποιούμε το δικό μας jQuery γεγονός που έχω καλέσει σελίδαΜοιραστείτε, και μεταβιβάζοντας την τιμή href ως τη διεύθυνση URL που μοιράστηκε. Θα το ελέγξουμε αργότερα. Ο πλήρης κωδικός του κουμπιού Facebook πρέπει τώρα να μοιάζει με:

 window.fbAsyncInit = συνάρτηση () {// init το FB JS SDK FB.init ({status: true, xfbml: true}); FB.Event.subscribe ('edge.create', συνάρτηση (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); }); };

Στη συνέχεια, Twitter. twttr.events.bind χρησιμοποιείται εδώ (μπορείτε να επισυνάψετε σε μια εκδήλωση που ακολουθεί επίσης, αν θέλετε), αλλά το σημαντικό πράγμα που πρέπει να θυμάστε είναι ότι όλα αυτά πρέπει να τυλιχτούν στο twttr.ready επανάκλησης. Και πάλι, ενεργοποιούμε το ίδιο συμβάν jQuery pageShared, μεταβιβάζοντας τη σωστή μεταβλητή που αντιπροσωπεύει τη διεύθυνση URL που μοιράστηκε.

 twttr.ready (λειτουργία (twttr) {twttr.events.bind ('tweet', συνάρτηση (event) {$ .event.trigger ({type: "pageShared", url: event.target.baseURI}); }); });

Τέλος, το Google Plus. Θυμηθείτε νωρίτερα εξήγησα ότι δεν υπάρχουν συμβάντα για το plusOne, οπότε έχουμε καθορίσει μια λειτουργία επανάκλησης. Ας δημιουργήσουμε αυτή τη λειτουργία και ενεργοποιήσουμε το eventShared από εκεί.

 λειτουργία plusOned (obj) {$ .event.trigger ({τύπος: "pageShared", url: obj.href}); }

Δείξε μου τα χρήματα

Τέλος, πρέπει να επισυνάψουμε στο προσαρμοσμένο μας συμβάν "Κοινόχρηστη σελίδα" ως εξής:

/ * Ακρόαση για την εκδήλωση κοινής σελίδας * / $ (document) .on ('pageShared', συνάρτηση (e) {if (e.url == window.location.href) {$ (". } });

Πολύ απλά, αν η διεύθυνση URL που περάσατε είναι ίδια με την τρέχουσα σελίδα, εμφανίζουμε το μυστικό περιεχόμενο στον χρήστη. Στο παράδειγμα που έκανα, ένα γατάκι. Είστε τυχεροί άνθρωποι!

Είμαι τεμπέλης. Μπορώ να κατεβάσω την πλήρη επίδειξη;

Για να κατεβάσετε το πλήρες αρχείο επίδειξης για αυτό το σεμινάριο - απλά το μαντέψατε - απλά μοιραστείτε τη σελίδα χρησιμοποιώντας τα κουμπιά στο πλάι εκεί και ο σύνδεσμος λήψης θα σας αποκαλυφθεί με μαγικό τρόπο.

Προβλήματα με τον κώδικα; Επιτρέψτε μου να γνωρίζω στα σχόλια, αλλά ένα φιλελεύθερο δολάριο console.log θα σας βοηθήσει να καταλάβετε ποια αντικείμενα μεταφέρονται πίσω σε εσάς και τα μυστικά που περιέχουν. και βεβαιωθείτε ότι χρησιμοποιείτε τους ακριβείς κωδικούς κουμπιών που παρέχονται εδώ, καθώς μερικές μορφές (όπως το iFrame) δεν λειτουργούν με αυτά τα συμβάντα.

Κατεβάστε το test.html και δοκιμάστε στο δικό σας διακομιστή