IRCRehberi.Net- Türkiyenin En iyi IRC ve Genel Forum Sitesi  
 sohbet
derya sohbet


Webmaster Genel Webmasterların fikir alışverişi yapabileceği konulara bu başlık altından ulaşabilirsiniz.

11Beğeni(ler)
  • 5 Post By Mix
  • 1 Post By Reyhan
  • 1 Post By WildCat
  • 1 Post By Murat
  • 1 Post By YiLDiZ
  • 1 Post By ZeyNa
  • 1 Post By birsevda


 
 
Seçenekler Stil
Alt 07 Mart 2022, 11:32   #1
Mix
★ GeneraL ★
Mix - ait Kullanıcı Resmi (Avatar)

Standart Siteye Web Share API ile Paylaş Butonu Ekleme

Web Share API, ilk kez Android için Chrome 61’de tanıtılan ve halen bir çok tarayıcı tarafından geliştirilmesi süren bir Web API‘sidir. Temelde, doğrudan bir web sitesinden veya web uygulamasından içerik paylaşırken bir aygıtın (veya Safari kullanılıyorsa masaüstünün) yerel paylaşım iletişim kutusunu tetiklemek için bir yol sağlar.

Bir kullanıcının bir web sayfasındaki içeriği yerel yollarla paylaşması zaten mümkün olsa da, tarayıcı menüsündeki seçeneği bulması gerekir ve bu durumda bile neyin paylaşılacağı üzerinde herhangi bir kontrol yoktur.

Bu API’nin tanıtımı, geliştiricilerin, bir kullanıcının cihazındaki yerel içerik paylaşım özelliklerinden yararlanarak uygulamalara veya web sitelerine paylaşım işlevi eklemelerine olanak tanır.

Bu yaklaşım, geleneksel yöntemlere göre bir dizi avantaj sağlar:

~Kullanıcıya, uygulamanızda sahip olabileceğiniz sınırlı sayıya kıyasla, içerik paylaşmak için çok çeşitli seçenekler sunulur.

~Bireysel sosyal platformlardan üçüncü taraf komut dosyalarını kaldırarak sayfa yükleme sürelerinizi iyileştirebilirsiniz.

~Farklı sosyal medya siteleri ve e-posta için bir dizi düğme eklemenize gerek yoktur. Cihazın yerel paylaşım seçeneklerini tetiklemek için tek bir düğme yeterlidir.

~Kullanıcılar, yalnızca önceden tanımlanmış seçeneklerle sınırlanmak yerine tercih ettikleri paylaşım hedeflerini kendi cihazlarında özelleştirebilirler.

~API’nin nasıl çalıştığının ayrıntılarına girmeden önce, tarayıcı desteği sorununu ortadan kaldıralım. Dürüst olmak gerekirse, tarayıcı desteği şu anda harika değil. Yalnızca Android için Chrome ve Safari (masaüstü ve iOS) ile kullanılabilir.

Web Share API Kullanımı

API’nin kullanımına geçmeden önce hazırlanan belgenin HTTPS ile iletilmesi gerektiğini belirtmek isterim.

Öncelikli olarak tarayıcının Web API uyumu olup olmadığını kontrol ederek başlıyoruz.


PHP- Kodu

    if (navigator.share) {
        
//tarayıcı desteği var
    
} else {
        
//tarayıcı desteği yok
    

yada


PHP- Kodu

    if (navigator.canShare) {
        
//tarayıcı desteği var
    
} else {
        
//tarayıcı desteği yok
    

Web Share API promise-based tabanlı çalışmaktadır. En temel görevi de Share nesnesini tarayıcıya iletmektir. Bir share nesnesi en az bir metin başlığı(title), bir metin(text) ve adres(url) içermelidir.


Örnek:

Örneği yaparken ilk olarak bir tane buton oluşturup butonun tıklama olayına anonim fonksiyon aktaralım.

PHP- Kodu

<button id="paylas">Paylaş</button>
    <
script>
    const 
paylasButon document.getElementById("paylas");
    
paylasButon.addEventListener("click"async () =>{
 
        
//butona tıklayınca çalışacak bölüm
 
    
});
 
    
</script> 


Örneği yaparken ilk olarak bir tane buton oluşturup butonun tıklama olayına anonim fonksiyon aktaralım.


PHP- Kodu

    <button id="paylas">Paylaş</button>
    <
script>
    const 
paylasButon document.getElementById("paylas");
    
paylasButon.addEventListener("click"async () =>{
 
        
//butona tıklayınca çalışacak bölüm
 
    
});
 
    
</script> 

Artık butona tıkladığımızda çalışacak kodları yazmaya başlayabiliriz. Öncelikli olarak tarayıcının paylaşma özelliğinin olup olmadığını kontrol edelim.


PHP- Kodu

    <button id="paylas">Paylaş</button>
    <
script>
    const 
paylasButon document.getElementById("paylas");
    
paylasButon.addEventListener("click"async () =>{
 
        if (
navigator.canShare) {
            
//Web share api çalışıyor.
        
} else {
            
//Web share api çalışmıyor.
        
}
    });
 
    
</script> 

Yukarıda bir paylaş butonunda en az title, text ve url öğleerinin olması gerektiğini belirtmiştik. Bu şekilde bir öğe oluşturup navigator.share metoduna parametre olarak iletiyoruz.

Oluşturulan fonksiyon Promise tabanlı olduğu için **ait bildiğirimi ile navigator.share metodunu çalıştırıyoruz.

PHP- Kodu

<button id="paylas">Paylaş</button>
    <
script>
    const 
paylasButon document.getElementById("paylas");
    
paylasButon.addEventListener("click"async () =>{
 
        if (
navigator.canShare) {
            
            try {
                
//paylaşma özelliği
                
**ait navigator.share({
                    
title:"Tasarım Kodlama",
                    
text:"Programlama ve Web tasarımı konularında bilgiler sunar.",
                    
url:"https://www.tasarimkodlama.com" //window.location.href mevcut url
                
})
                
console.log("Paylaş çalıştı")
            } catch (
error) {
                
console.log("Bir sorun oldu")
            }
 
        } else {
            
Console.log("Tarayıcı desteklemiyor")
        }
    });
 
    
</script> 

Web Share API Kullanımı ile Resim Paylaşımı
İstersek Web Share API ile dosya paylaşımı da yapabiliriz. Örnek FILE nesnesi ile dosya gönderimi yapılabilir. Yukarıdaki share nesnesine bir tane de dosya nesnesi ekleyerek uygulamayı yeniden düzenliyoruz. Güvenlik gerekçesi ile sadece mp3 ve resim dosyalarına izin verdiğini belirtmek isterim. 2021 Mart tarihli olarak Chrome tarayıcısında dosya paylaşımı mümkün olurken Opera ve diğer tarayıcılarda sorunlar yapanmaktatir.

PHP- Kodu

<input type="file" id="dosya">
    <
button id="paylas">Paylaş</button>
    
    <
script>
    const 
paylasButon document.getElementById("paylas");
    
paylasButon.addEventListener("click"async () =>{
 
        var 
dosya document.getElementById('dosya').files;
        
console.log(dosya[0]); //mevcut dosya
 
        
if (navigator.canShare) {
            
            try {
                
//paylaşma özelliği
                
**ait navigator.share({
                    
files:dosya//mevcut resim da paylaşıma ekler
                    
title:"Tasarım Kodlama",
                    
text:"Programlama ve Web tasarımı konularında bilgiler sunar.",
                    
url:"https://www.tasarimkodlama.com" //window.location.href mevcut url
                
})
                
console.log("Paylaş çalıştı")
            } catch (
error) {
                
console.log("Bir sorun oldu")
            }
 
        } else {
            
Console.log("Tarayıcı desteklemiyor")
        }
    });
 
    
</script> 



Kaynak : [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Konu ExCaLuBuR tarafından (12 Mart 2023 Saat 22:49 ) değiştirilmiştir..
 
Alt 08 Mart 2022, 01:00   #2
Cumhuriyet Kadını
Reyhan - ait Kullanıcı Resmi (Avatar)

Standart

Emeğine sağlık Mix, paylaşım için teşekkür ederiz

________________

ellerinde bir güldüm ,
soldum .
 
Alt 08 Mart 2022, 01:23   #3
Standart

emegine saglik

________________

No MoRe DramA
 
Alt 08 Mart 2022, 02:01   #4
Emektar
Murat - ait Kullanıcı Resmi (Avatar)

Standart

Emeğine Sağlık @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] Brom Güzel Paylaşım İçin teşekkürler

 
Alt 08 Mart 2022, 03:17   #5
YiLDiZ - ait Kullanıcı Resmi (Avatar)

Standart

@[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] hiç bişey anlamamış shshshshs Türkçe özet geç sabah

 
Alt 08 Mart 2022, 06:16   #6
Standart

Paylaşım için teşekkür ederiz, emeğine sağlık

 
Alt 08 Mart 2022, 18:15   #7
Standart

emeğine saglık gayet güzel ve açklayıcı bir yazı olmuş.

________________

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
 


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı





Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 17:54.