2 Ocak 2019 Çarşamba

Bloga WhatsApp Butonu Nasıl Eklenir?

Dünya üzerinde milyonlarca kullanıcıya sahip olmasına rağmen ve bir çok paylaşım sitelerine nazaran üzerinden çok fazla paylaşım yapılan WhatsApp uygulamasının resmi olarak neden bir paylaşım butonu olmadığını bilmiyorum.Ne zamandır bloguma WhatsApp üzerinde paylaşımı sağlayabilecek bir eklenti arayışına girmiş bir kaç teşebbüsün ardından arzu ettiğim sonuca ulaşamamanın verdiği hüsranla bu arzumdan vazgeçmiştim.
Bugün tekrar deneyip WhatsApp paylaşım butonunu blogumun anasayfasında görünce hem sevindim hem de sizinle de paylaşmak istedim,nicedir Blog alemi ile iligli teknik bir konu da paylaşmamıştım dolayısıyla bloguna WhatsApp paylaşım butonu eklemek isteyenler için çok yerinde bir yayın olacak diye inanıyorum..
Az biraz CSS bilgisine sahip olanlar butonu bloglarına eklemeyi hemen başaracaktır tabii ki ama olur da teknik anlamda sıkıntı çeken olursa lütfen çekinmeden bana yazın ben elimden geldiği kadar yardımcı olmaya çalışacağım :)

TEMANIZI YEDEKLEMEYİ UNUTMAYIN!

Şimdi sıra bu kodu blogumuza ekleme aşamalarına geldi;
Kumanda Panelimizde Tema sekmesine gidiyoruz,Kodlar yüklendikten sonra ALT+F diyerek Enter tuşuna basıp çıkan boş kutucuğa </head> yazıp tekrar Enter tuşuna basıyoruz.



Temadaki konumu </head> diyerek belirlemiştik şimdi de tam da bu kodun üstüne gelecek şekilde aşağıdaki kodun tümünü ekleyelim.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>  
 <script>  
 // Whatsapp share button  
 $(document).ready(function() {  
 $(document).on("click", '.tist', function() {  
 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {  
 var text = $(this).attr("data-text");  
 var url = $(this).attr("data-href");  
 var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);  
 var whatsapp_url = "whatsapp://send?text=" + message;  
 window.location.href = whatsapp_url;}   
 else {alert("This function works on Mobile Device only");}});  
 });  
 </script>  

Arama kutucuğuna ]]></b:skin> yazarak Enter tuşuna basıyoruz,bu aşamada butonumuzun görünüm kodunu ekliyoruz arzuya göre renkler değiştirilebilir,ben WhatsApp uygulamasının klasik yeşil rengini koyu gri ile değiştirdim.
Kodu bulduktan sonra hemen üstüne aşağıdaki kod eklenir.
 /* Whatsapp css setting */  
 .tist{background:#35BA47; color:#fff; padding:2px 6px; border-radius:3px;}  
 a.tist:hover{color:#fff !important;}  

Son olarak da post-footer yazarak tekrar Enter tuşuna basıyoruz,aşağıdaki kodu bunun altına da üstüne de eklenebilir,nerede görüntüleceği tamamen temanıza bağlı.
(Temanın içinde birden fazla post-footer yazısı yani kodu vardır post footer yayının alt kısmı demek yani zemini butonu buraya ekleyeceğiz.
Olur da post-footer kodlarının ardından buton hala blogunuzda görünmüyorsa bu durumda data:post.body diye aratarak aşağıdaki kodu bu kodun altı veya üstüne ekleyip butonun görünmesini sağlayabilirsiniz,elbette Kaydet dediğiniz takdirde)


 <a class='tist' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#'>Share on whatsapp</a>  

Blogumdaki WhatsApp paylaşım butonu bugünden itibaren aşağıdak igörselde olduğu gibi görünüyor:


Tatlı şey :)
Butonunuzu şimdiden severek kullanmanızı dilerim daha da çok başkaları tarafından güzel yayınalrınızın bolca paylaşılmasını temenni ediyorum..
Unutmadan şunu da söylemekte fayda var,buton sadece cep telefonu üzerinde paylaşım yapıyor sebeb ide dediğim gibi WhatsApp'ın resmi bir paylaşım butonu olmayışından ileri geliyor.
Kolaylıklar dilerim.
Sorularınızı yorum kutusuna bırakabilirsiniz.Bu yayını da paylaşırsanız sevinirim.
Allah'a emanet olun.


Kiremithanem
Kiremithanem

”Bu Dünyada Çiçeklere Bakmak İçin Cehennemin Çatısında Yürüyoruz,Haydi Gelin,Çatıya Çıkalım!”

20 yorum:

  1. Faydalı olmuş emeğine saglik.Bende ekleyeyim

    YanıtlaSil
  2. Bilmiyordum sayenizde öğrendim

    YanıtlaSil
  3. Faydalı bir yazı olmuş teşekkür ederim... Bende de WhatsApp butonu var ama bazen çıkıyor bazen çıkmıyor anlamadım gitti... Selam ve Dua ile...

    YanıtlaSil
    Yanıtlar
    1. Zaman zaman görünmeyen eklentiler başka siteden veri alarak çalışan eklentilerdir,belki yeniden veya başka bir eklenti eklememişse fayda olabilir bazen de internet bağlantısından veya temadaki eklenti çokluğundan da ileri olabilir.
      Ben teşekkür ederim.

      Sil
  4. Ben de bilmiyordum �� çok kullanışlı olur ben de eklemeye çalışacağım ��

    YanıtlaSil
  5. benim kafa durdu yeminlen nasıl bir faydası olucak ne olur cahilliğime verin birazcık bilgi verebilirseniz çok mutlu olurum ....sevgilerimle...

    YanıtlaSil
    Yanıtlar
    1. Kıyamam:)
      Blogumuzdaki bir yayın kolayca Whatsapp gruplarında paylaşılabilir örneğin hızlıca;)

      Sil
    2. çok teşekkür ederim..şimdi oturdu olay kafamda...

      Sil
  6. İlk seferinde görünüyordu sonra kayboldu üstüne düşmedim. Bir de telefonda CSS zor oluyor:)

    Ama eklemekte yarar var tabi

    Selamlar

    YanıtlaSil
    Yanıtlar
    1. Telefondan Css gerçekten zor,ceza gibi bisey😊

      Sil
  7. Markalaşmak ve satış yapmak isteyenler için yararlı bir eklenti eliniz sağlık :) sevgili kiremithanem

    YanıtlaSil
    Yanıtlar
    1. Yok yok Öyle büyük gayelerim yok şahsen ama faydalı bir yazıyı veya bir fotoğrafı paylaşıma daha kolay hale getirmeyi isterim.

      Sil
  8. Whatsapp butonu eklenebildiğini ilk kez duydum. Emeğine sağlık abla.

    YanıtlaSil
  9. "Allah sabredenleri sever"
    Camiüs sağir 1.cilt (249)

    YanıtlaSil
  10. Uğraştım ancak bir türlü ekleyemedim. Çok teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Verdiğim kodun sonuncusunu post footer bölümlerine eklemeyi deneyin b8r de,bazen şablon farkından dolayı aynı yerde görünmeyebilir.

      Sil