Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Media sosial telah menjadi bagian integral dari kehidupan kita sehari-hari dan merupakan platform hebat bagi bisnis untuk menjangkau pelanggan mereka. Menambahkan tombol berbagi sosial ke aplikasi React Anda dapat membantu Anda meningkatkan jangkauan dan visibilitas Anda di platform media sosial. Dalam artikel ini, Anda akan mempelajari cara menambahkan tombol berbagi sosial dengan mudah di aplikasi React Anda.

Menambahkan Tombol Berbagi Sosial ke Aplikasi React Anda

Sebelum memulai, Anda harus memiliki pemahaman dasar tentang React dan caranya mengatur aplikasi Bereaksi. Anda juga harus memiliki akun di platform media sosial yang ingin Anda tambahkan tombol berbagi.

Memasang Modul react-share

Ada beberapa opsi yang tersedia untuk menambahkan tombol berbagi sosial ke aplikasi React Anda. Salah satu opsi adalah menggunakan reaksi-bagikan

instagram viewer
modul, yang merupakan pustaka ringan dan mudah digunakan untuk menambahkan tombol berbagi sosial ke aplikasi Anda. Untuk menginstal reaksi-bagikan modul, Anda perlu menjalankan perintah berikut:

npm Install reaksi-membagikan

Membuat Tombol Bagikan ke Facebook

Setelah Anda memiliki reaksi-bagikan terinstal, Anda dapat mulai menambahkan tombol berbagi sosial ke aplikasi Anda. Untuk melakukan ini, Anda harus mengimpor komponen yang diperlukan dari reaksi-bagikan modul. Misalnya, untuk menambahkan tombol bagikan ke Facebook, Anda perlu menggunakan kode berikut:

impor {FacebookShareButton} dari'bereaksi-berbagi';

Anda kemudian dapat menggunakan Tombol Bagikan Facebook komponen dalam kode Anda untuk menambahkan tombol bagikan ke Facebook ke aplikasi Anda.

impor Reaksi dari'reaksi';
impor {FacebookShareButton, FacebookIcon} dari'bereaksi-berbagi';
const Aplikasi = () => {
kembali (
<div>
 url={' https://www.example.com'}
 kutipan={'Teks palsu!'}
 tagar="#muo"
 >
<Ikon Facebookukuran={32}bulat />
Tombol Bagikan Facebook>
div>
 );
};
eksporbawaan Aplikasi;

Di bawah ini adalah output yang menampilkan tombol bagikan ke Facebook:

Dalam kode ini, pertama-tama Anda harus mengimpor komponen yang diperlukan dari reaksi-bagikan modul. Setelah itu, buat komponen fungsional bernama Aplikasi yang berisi tombol berbagi Facebook. Itu Tombol Bagikan Facebook komponen digunakan untuk membuat tombol berbagi dan Ikon Facebook komponen digunakan untuk menampilkan logo Facebook pada tombol.

Itu Tombol Bagikan Facebookkomponen memiliki beberapa alat peraga yang dapat digunakan untuk menyesuaikan tombol bagikan. Dalam contoh ini, kami telah menentukan url, mengutip, Dan tanda pagar Atribut.

Terakhir, Anda perlu mengekspor file Aplikasi komponen, sehingga dapat digunakan di tempat lain di aplikasi kita. Ketika tombol bagikan ke Facebook diklik, itu akan membuka dialog berbagi yang telah diisi sebelumnya dengan yang ditentukan url, mengutip, Dan tanda pagar.

Selain facebook, reaksi-bagikan modul juga menyediakan komponen untuk menambahkan tombol berbagi sosial untuk beberapa platform lain, termasuk Instagram, Twitter, LinkedIn, dan lainnya.

Untuk menambahkan tombol berbagi sosial untuk platform lain, Anda harus mengimpor komponen yang diperlukan dari reaksi-bagikan modul. Misalnya, untuk menambahkan tombol berbagi Twitter, Anda harus mengimpor yang berikut ini terlebih dahulu:

impor { TwitterShareButton, TwitterIcon } dari'bereaksi-berbagi';

Anda kemudian dapat menggunakan Tombol Bagikan Twitter Dan Ikon Twitter komponen dalam kode Anda untuk menambahkan tombol bagikan ke Twitter ke aplikasi Anda.

 url={' https://www.example.com'}
 kutipan={'Teks palsu!'}
 tagar="#muo"
>
<Ikon Twitterukuran={32}bulat />
Tombol Bagikan Twitter>

Di bawah ini adalah keluaran yang menampilkan tombol bagikan ke Facebook dan bagikan ke Twitter:

Ketika Anda mengklik tombol berbagi Twitter, itu akan membuka dialog berbagi yang telah diisi sebelumnya dengan URL dan kutipan yang ditentukan.

Menyesuaikan Tombol

Komponen tombol berbagi sosial memiliki beberapa alat peraga yang dapat Anda gunakan untuk menyesuaikan tombol. Beberapa alat peraga yang tersedia antara lain:

  • url: URL yang akan dibagikan di Facebook
  • mengutip: kutipan untuk dibagikan di Facebook
  • tanda pagar: tagar yang akan ditambahkan ke pos yang dibagikan di Facebook

Anda dapat menemukan daftar lengkap tombol dan properti berbagi sosial yang tersedia di reaksi-bagikan dokumentasi resmi.

Dapatkan Lebih Banyak Tampilan Halaman Dengan Tombol Berbagi Sosial

Menambahkan tombol berbagi sosial ke aplikasi React Anda dapat membantu Anda meningkatkan jangkauan dan visibilitas Anda di platform media sosial. Dengan memudahkan pengguna untuk membagikan konten Anda, Anda berpotensi menjangkau audiens yang lebih besar dan mendorong lebih banyak lalu lintas ke aplikasi Anda. Selain itu, tombol berbagi sosial juga dapat membantu meningkatkan kredibilitas dan otoritas merek Anda, karena berbagi dapat berfungsi sebagai rekomendasi untuk aplikasi Anda.