Javascript Share Özelliği Kullanımı

Mobil cihazlarda kullanıcı deneyimini artıran önemli özelliklerden biri de paylaşma işlemidir. Bu özellik, kullanıcının web sayfasındaki içeriği kolayca paylaşmasını sağlar. Ancak bu özelliği tetiklemek için sayfa açılır açılmaz çalıştıramazsınız. Bunun yerine, bir butona tıklandığında paylaş özelliğini aktifleştirebilirsiniz. Bu kılavuzda, bu işlemi nasıl gerçekleştireceğinizi adım adım açıklayacağım.

Adım 1:HTML Butonunu Oluşturma: Öncelikle, kullanıcıların paylaşma işlemini başlatmak için tıklayacağı bir buton oluşturun. Bu butona paylas classını ekleyerek, JavaScript ile erişilebilir hale getirin. Örneğin:

<button data-text="İçerik" data-title="Başlık" class="paylas">PAYLAŞ</button>

Adım 2:JavaScript Kodunu Oluşturma: Butona tıklandığında paylaşma özelliğini tetikleyen JavaScript kodunu oluşturun. Bu kod, öncelikle tarayıcının navigator.share özelliğinin mevcut olup olmadığını kontrol eder. Eğer varsa, paylaşma verilerini (title, text, url) alır ve paylaşma işlemini başlatır. Örneğin:

  <script>
    $(document).on('click','.paylas',function(e){
      e.preventDefault();
      if(navigator.share){
        const shareData = {
          title: $(this).attr("data-title"),
          text: $(this).attr("data-text"),
          url: window.location //Bu kısımda auto sayfa linkini aldık
        };
        navigator.share(shareData)
          .then(()=>{
          	console.log('Paylaşıldı')
          })
          .catch(e => {
            alert(e)
          });
      }
    });
  </script>

Adım 3:Paylaşma İşlemini Deneyin: Butona tıklayarak paylaşma işlemini deneyin. Tarayıcınızın paylaşma özelliğini destekliyorsa, belirtilen başlık, içerik ve URL ile paylaşma işlemi başarılı olacaktır.

Sonuç: Bu adımları takip ederek, web sitenizdeki içeriği mobil cihazlarda kolayca paylaşılabilir hale getirebilirsiniz. Kullanıcıların içeriklerinizi daha geniş kitlelere ulaştırmasını sağlayarak, sitenizin erişilebilirliğini artırabilirsiniz.