Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

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

Προσθήκη κουμπιών κοινής χρήσης κοινωνικών δικτύων στην εφαρμογή React σας

Πριν ξεκινήσετε, θα πρέπει να έχετε μια βασική κατανόηση του React και πώς να το κάνετε ρυθμίστε μια εφαρμογή React. Θα πρέπει επίσης να έχετε έναν λογαριασμό στην πλατφόρμα(ες) κοινωνικών μέσων για τον οποίο θέλετε να προσθέσετε κουμπιά κοινής χρήσης.

instagram viewer

Εγκατάσταση της μονάδας react-share

Υπάρχουν πολλές διαθέσιμες επιλογές για την προσθήκη κουμπιών κοινής χρήσης κοινωνικών δικτύων στην εφαρμογή React. Μια επιλογή είναι να χρησιμοποιήσετε το αντιδρώ-μοιράζομαι μονάδα, η οποία είναι μια ελαφριά και εύχρηστη βιβλιοθήκη για την προσθήκη κουμπιών κοινής χρήσης κοινωνικών δικτύων στην εφαρμογή σας. Για να εγκαταστήσετε το αντιδρώ-μοιράζομαι ενότητα, πρέπει να εκτελέσετε την ακόλουθη εντολή:

npm εγκαθιστώ αντιδρώ-μερίδιο

Δημιουργία κουμπιού κοινής χρήσης στο Facebook

Μόλις έχετε το αντιδρώ-μοιράζομαι εγκατεστημένη μονάδα, μπορείτε να αρχίσετε να προσθέτετε κουμπιά κοινής χρήσης κοινωνικών δικτύων στην εφαρμογή σας. Για να το κάνετε αυτό, θα χρειαστεί να εισαγάγετε τα απαιτούμενα στοιχεία από το αντιδρώ-μοιράζομαι μονάδα μέτρησης. Για παράδειγμα, για να προσθέσετε ένα κουμπί κοινής χρήσης στο Facebook, πρέπει να χρησιμοποιήσετε τον ακόλουθο κώδικα:

εισαγωγή { FacebookShareButton } από'αντίδραση-κοινή χρήση';

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε το FacebookShareButton στοιχείο στον κώδικά σας για να προσθέσετε το κουμπί κοινής χρήσης στο Facebook στην εφαρμογή σας.

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { FacebookShareButton, FacebookIcon } από'αντίδραση-κοινή χρήση';
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (
<div>
 url={' https://www.example.com'}
 quote={"Παράτυπο κείμενο!"}
 hashtag="#muo"
 >
<Εικονίδιο FacebookΜέγεθος={32}γύρος />
FacebookShareButton>
div>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ακολουθεί η έξοδος που εμφανίζει το κουμπί κοινής χρήσης στο Facebook:

Σε αυτόν τον κώδικα, πρέπει πρώτα να εισαγάγετε τα απαιτούμενα στοιχεία από το αντιδρώ-μοιράζομαι μονάδα μέτρησης. Μετά από αυτό, δημιουργήστε ένα λειτουργικό στοιχείο που ονομάζεται App που περιέχει το κουμπί κοινής χρήσης του Facebook. ο FacebookShareButton συστατικό χρησιμοποιείται για τη δημιουργία του κουμπιού κοινής χρήσης και του Εικονίδιο Facebook συστατικό χρησιμοποιείται για την εμφάνιση του λογότυπου του Facebook στο κουμπί.

ο FacebookShareButtonσυστατικό έχει πολλά στηρίγματα που μπορεί να χρησιμοποιηθεί για την προσαρμογή του κουμπιού κοινής χρήσης. Σε αυτό το παράδειγμα, έχουμε καθορίσει το url, παραθέτω, αναφορά, και hashtag στηρίγματα.

Τέλος, πρέπει να εξάγετε το App στοιχείο, ώστε να μπορεί να χρησιμοποιηθεί σε άλλα σημεία της εφαρμογής μας. Όταν κάνετε κλικ στο κουμπί κοινής χρήσης στο Facebook, θα ανοίξει ένα προσυμπληρωμένο παράθυρο διαλόγου κοινής χρήσης με το καθορισμένο url, παραθέτω, αναφορά, και hashtag.

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

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

εισαγωγή { TwitterShareButton, TwitterIcon } από'αντίδραση-κοινή χρήση';

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε το TwitterShareButton και TwitterIcon στοιχεία στον κώδικά σας για να προσθέσετε το κουμπί κοινής χρήσης στο Twitter στην εφαρμογή σας.

 url={' https://www.example.com'}
 quote={"Παράτυπο κείμενο!"}
 hashtag="#muo"
>
<TwitterIconΜέγεθος={32}γύρος />
TwitterShareButton>

Παρακάτω είναι η έξοδος που εμφανίζει τα κουμπιά κοινής χρήσης στο Facebook και κοινής χρήσης στο Twitter:

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

Προσαρμογή των κουμπιών

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

  • url: τη διεύθυνση URL που θα κοινοποιηθεί στο Facebook
  • παραθέτω, αναφορά: το απόσπασμα που θα κοινοποιηθεί στο Facebook
  • hashtag: το hashtag που θα προστεθεί στην κοινή ανάρτηση στο Facebook

Μπορείτε να βρείτε μια πλήρη λίστα με τα διαθέσιμα κουμπιά κοινοποίησης κοινωνικών δικτύων και στηρίγματα στο αντιδρώ-μοιράζομαι επίσημη τεκμηρίωση.

Λάβετε περισσότερες προβολές σελίδας με τα κουμπιά κοινής χρήσης κοινωνικών δικτύων

Η προσθήκη κουμπιών κοινής χρήσης κοινωνικών δικτύων στην εφαρμογή React μπορεί να σας βοηθήσει να αυξήσετε την προσέγγιση χρηστών και την προβολή σας στις πλατφόρμες κοινωνικών μέσων. Διευκολύνοντας τους χρήστες να μοιράζονται το περιεχόμενό σας, μπορείτε ενδεχομένως να προσεγγίσετε μεγαλύτερο κοινό και να προσελκύσετε περισσότερη επισκεψιμότητα στην εφαρμογή σας. Επιπλέον, τα κουμπιά κοινοποίησης μέσων κοινωνικής δικτύωσης μπορούν επίσης να συμβάλουν στην αύξηση της αξιοπιστίας και της εξουσίας της επωνυμίας σας, καθώς οι κοινοποιήσεις μπορούν να λειτουργήσουν ως προτάσεις για την εφαρμογή σας.