Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Sosyal medya günlük hayatımızın ayrılmaz bir parçası haline geldi ve işletmelerin müşterilerine ulaşmak için harika bir platform. React uygulamanıza sosyal paylaşım düğmeleri eklemek, sosyal medya platformlarında erişiminizi ve görünürlüğünüzü artırmanıza yardımcı olabilir. Bu makalede, React uygulamanıza kolayca sosyal paylaşım butonlarını nasıl ekleyebileceğinizi öğreneceksiniz.

React Uygulamanıza Sosyal Paylaşım Düğmeleri Ekleme

Başlamadan önce, temel bir React anlayışına sahip olmanız ve nasıl bir React uygulaması kurun. Paylaş butonu eklemek istediğiniz sosyal medya platform(lar)ında da bir hesabınız olmalıdır.

tepki paylaşım Modülünü yükleme

React uygulamanıza sosyal paylaşım düğmeleri eklemek için çeşitli seçenekler mevcuttur. Bir seçenek kullanmaktır tepki paylaş Uygulamanıza sosyal paylaşım düğmeleri eklemek için hafif ve kullanımı kolay bir kitaplık olan modül. yüklemek için

instagram viewer
tepki paylaş modülü, aşağıdaki komutu çalıştırmanız gerekir:

npm düzenlemek tepki-paylaşmak

Facebook'ta Paylaş Düğmesi Oluşturma

sahip olduğunuzda tepki paylaş modülü yükledikten sonra uygulamanıza sosyal paylaşım butonları eklemeye başlayabilirsiniz. Bunu yapmak için, gerekli bileşenleri sistemden içe aktarmanız gerekir. tepki paylaş modül. Örneğin, Facebook'ta paylaş düğmesi eklemek için aşağıdaki kodu kullanmanız gerekir:

içe aktarmak { FacebookPaylaşDüğmesi } itibaren"tepki paylaş";

daha sonra kullanabilirsiniz FacebookPaylaşDüğmesi Facebook'ta paylaş düğmesini uygulamanıza eklemek için kodunuzdaki bileşen.

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { FacebookShareButton, FacebookIcon } itibaren"tepki paylaş";
sabit uygulama = () => {
geri dönmek (
<div>
 url={' https://www.example.com'}
 alıntı={'Kukla metin!'}
 hashtag="#muo"
 >
<Facebook Simgesiboyut={32}yuvarlak />
FacebookPaylaşDüğmesi>
div>
 );
};
ihracatvarsayılan Uygulama;

Facebook'ta paylaş düğmesini gösteren çıktı aşağıdadır:

Bu kodda, önce gerekli bileşenleri içe aktarmanız gerekir. tepki paylaş modül. Bundan sonra, adlı işlevsel bir bileşen oluşturun. Uygulama Facebook paylaş düğmesini içeren. bu FacebookPaylaşDüğmesi bileşeni, paylaş düğmesini oluşturmak için kullanılır ve Facebook Simgesi Facebook logosunu buton üzerinde görüntülemek için kullanılan bileşendir.

bu FacebookPaylaşDüğmesibileşenin birkaç özelliği vardır paylaş düğmesini özelleştirmek için kullanılabilir. Bu örnekte, url, alıntı, Ve başlık etiketi sahne.

Son olarak, dışa aktarmanız gerekir. Uygulama bileşen, böylece uygulamamızın diğer yerlerinde kullanılabilir. Facebook'ta paylaş düğmesine tıklandığında, belirtilenlerle önceden doldurulmuş bir paylaşım iletişim kutusu açılacaktır. url, alıntı, Ve başlık etiketi.

Facebook'a ek olarak, tepki paylaş modülü ayrıca Instagram, Twitter, LinkedIn ve daha fazlası dahil olmak üzere diğer birçok platform için sosyal paylaşım düğmeleri eklemek için bileşenler sağlar.

Farklı bir platform için bir sosyal paylaşım düğmesi eklemek için gerekli bileşenleri uygulamadan içe aktarmanız gerekir. tepki paylaş modül. Örneğin, bir Twitter paylaş düğmesi eklemek için önce aşağıdakileri içe aktarmanız gerekir:

içe aktarmak { TwitterShareButton, TwitterIcon } itibaren"tepki paylaş";

daha sonra kullanabilirsiniz TwitterPaylaşDüğmesi Ve Twitter Simgesi Twitter'da paylaş düğmesini uygulamanıza eklemek için kodunuzdaki bileşenler.

 url={' https://www.example.com'}
 alıntı={'Kukla metin!'}
 hashtag="#muo"
>
<Twitter Simgesiboyut={32}yuvarlak />
TwitterPaylaşDüğmesi>

Facebook'ta paylaş ve Twitter'da paylaş düğmelerini gösteren çıktı aşağıdadır:

Twitter paylaş düğmesine tıkladığınızda, belirtilen URL ve alıntı ile önceden doldurulmuş bir paylaşım iletişim kutusu açılır.

Düğmeleri Özelleştirme

Sosyal paylaşım düğmesi bileşenlerinde, düğmeyi özelleştirmek için kullanabileceğiniz çeşitli donanımlar bulunur. Mevcut donanımlardan bazıları şunları içerir:

  • url: Facebook'ta paylaşılacak URL
  • alıntı: Facebook'ta paylaşılacak alıntı
  • başlık etiketi: Facebook'ta paylaşılan gönderiye eklenecek hashtag

Mevcut sosyal paylaşım düğmelerinin ve donanımların tam listesini şurada bulabilirsiniz: tepki paylaş resmi belgeler.

Sosyal Paylaşım Butonları ile Daha Fazla Sayfa Görüntülenmesi Alın

React uygulamanıza sosyal paylaşım düğmeleri eklemek, sosyal medya platformlarında erişiminizi ve görünürlüğünüzü artırmanıza yardımcı olabilir. Kullanıcıların içeriğinizi paylaşmasını kolaylaştırarak potansiyel olarak daha geniş bir kitleye ulaşabilir ve uygulamanıza daha fazla trafik çekebilirsiniz. Ek olarak, sosyal paylaşım düğmeleri, paylaşımlar uygulamanız için tavsiye görevi görebileceğinden markanızın güvenilirliğini ve otoritesini artırmaya da yardımcı olabilir.