Whatsapp Butonu Ekleme (eklentisiz)

0 109

Merhaba Arkadaşlar

Ne kadar çok eklenti olursa sitemiz o kadar yavaşlıyor ve bu seo açısından hiç iyi bir şey değil. Yavaş yüklenen web siteleri aynı zamanda ziyaretçi de kaybediyor. O yüzden bu yazımızda eklentisiz olarak sayfanın herhangi bir yerinde kayan whatsapp butonu nasıl eklenir onu anlatacağız.

Öncelikle css kodlarımız şöyle:

.fixed-whatsapp {
position: fixed;
bottom:3%; left:0; z-index:999;}

.fixed-whatsapp yazan yere (css sınıfı) siz  dilediğiniz başka bir şeyi de yazabilirsiniz. Bu kodları görünüm>özelleştir>ek css yoluna kopyalayıp yapıştırabilirsiniz. Eklediğiniz görsele bu sınıfı tanımlarsanız sayfanızda sabit yüzer bir whatsapp butonu oluşacaktır.  (Bu kısım biraz css bilenler içindi)

Eğer css bilginiz çok az ise yukarıda yazılanları boşverin ve lütfen okumaya devam edin 🙂 Çünkü daha kolay bir yöntem olan satır içi css yazarak nasıl yapacağınızı anlatacağım. (Ek bilgi: seo açısından satır içi css yerine, genel css yazarak yapmak bir tık daha avantajlıdır.)

Whatsapp butonunun görünmesini istediğiniz sayfa ve yazıya bir buton fotoğrafı ekliyoruz. Bu butonu kendimiz de oluşturabiliriz, internetteki iconfinder.com gibi sitelerden veya google görsellerden de indirebilrisiniz. Görseli sayfamıza yükledikten sonra whatsapp linki vereceğiz.

Butona tıklayınca whatsapp’a bağlanması için şu linki tanımlayacağız: https://wa.me/905357139511

Buradaki 9 rakamı ülke kodudur (Türkiye). Eğer otomatik bir yazı girilmesini istiyorsanız da şu şekilde link veriyorsunuz:

https://wa.me/905357139511?text=Merhaba%20wphocasi.net%20web-sitenizden%20ulaşıyorum.%20Web%20Tasarım%20ücretleriniz%20hakkında%20bilgi%20alabilir%20miyim

Kısaca anlatacak olursak; vereceğiniz link ve css sınıfı ile birlikte kodları şu şekilde olmalı:

<a href=”https://wa.me/905357139511?text=Merhaba%20wphocasi.net%20web-sitenizden%20ulaşıyorum.%20Web%20Tasarım%20ücretleriniz%20hakkında%20bilgi%20alabilir%20miyim”><img style=”position: fixed;
bottom:3%; left:0; z-index:999″ src=”https://www.wphocasi.net/wp-content/uploads/2019/10/Untitled-1.png” alt=”” width=”43″ height=”268″ />

Buradaki kodları kendinize göre düzenleyebilirsiniz. Sağda mı olacak solda mı, köşeye ne kadar yakın olacak, boyutu ne olacak, whatsapp açıldığında hazır yazı olarak ne yazacak vs. hepsini yukarıdaki kodları düzenleyerek kendinize özel butonunuzu oluşturabilirsiniz.

Bu şekilde eklentisiz whatsapp iletişim butonu oluşturmanın bir diğer güzel yanı da, her sayfa ve yazıya farklı bir telefon numarası tanımlayabilmeniz. Örneğin esnaf.pro gibi bir projeniz varsa ve firmaların sayfalarında, firmalara özel telefon bağlantısı vermek istiyorsanız, bu şekilde eklentisiz buton eklemek çok faydalı olacaktır.

Herhangi bir soru ya da tavsiyeniz olursa whatsapp butonuna tıklayabilir ya da aşağıya yorum olarak yazabilirsiniz.

Bir sonraki yazımızda görüşmek ümidiyle şimdilik hoşçakalın.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.

WordPress Desteğe mi İhtiyacınız Var ?