# Siteye WhatsApp Butonu Ekleme

**URL:** https://emreaykutalp.com/blog/siteye-whatsapp-butonu-ekleme
**Yayın Tarihi:** 1 Ağustos 2025

---

**Bilgi**

WhatsApp butonu, web sitenizde ziyaretçilerinizle direkt iletişim kurmanın en etkili yollarından biridir. Bu makale ile sitenize profesyonel görünümlü WhatsApp butonları nasıl ekleyeceğinizi öğreneceksiniz.

## **WhatsApp Butonu Neden Önemli?**

WhatsApp butonu sitenize eklemenin birçok avantajı vardır:

-   **Kolay İletişim**: Ziyaretçiler tek tıkla sizinle iletişime geçebilir
    
-   **Artan Dönüşüm**: Potansiyel müşteriler hızlıca soru sorabilir
    
-   **Mobil Uyumluluk**: Özellikle mobil kullanıcılar için son derece pratik
    
-   **Güven Artışı**: Direkt iletişim imkanı güven oluşturur
    

![Siteye WhatsApp Butonu Ekleme](/uploads/blog/siteye-whatsapp-butonu-ekleme/siteye-whatsapp-butonu-ekleme.png "Siteye WhatsApp Butonu Ekleme")

## **WordPress WhatsApp Butonu Ekleme**

Aşağıda vereceğim kodlar tüm internet yazılımlarında çalışmaktadır. WordPress websitenize WhatsApp butonu eklemek istiyorsanız tema ayarlarınızdan footer.php dosyasında "body" kapanış etiketinden önce bu kodları eklerseniz WhatsApp butonunuz aktif olmuş olur.

## **HTML ve CSS ile Basit WhatsApp Butonu**

İşte sitenize ekleyebileceğiniz basit ama etkili bir WhatsApp butonu kodu

Aşağıdaki kod bloğunda stil kodları bulunmaktadır.

```
<style>
  .fixed-whatsapp {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #25D366;
    color: white;
    padding: 12px 16px;
    width: 100%;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
  }

  .whatsapp-icon {
    width: 32px;
    height: 32px;
  }

  @media (min-width: 768px) {
    .fixed-whatsapp {
      display: none;
    }
  }
</style>
```

Burada ise html kodumuz bulunmaktadır.

```
<a
  href="https://wa.me/905458104148?text=Merhaba%2C%20bilgi%20alabilir%20miyim%3F"
  target="_blank"
  class="fixed-whatsapp"
>
  <svg
    class="whatsapp-icon"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      fill-rule="evenodd"
      d="M12 4a8 8 0 0 0-6.895 12.06l.569.718-.697 2.359 2.32-.648.379.243A8 8 0 1 0 12 4ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.96 9.96 0 0 1-5.016-1.347l-4.948 1.382 1.426-4.829-.006-.007-.033-.055A9.958 9.958 0 0 1 2 12Z"
      clip-rule="evenodd"
    />
    <path
      fill="currentColor"
      d="M16.735 13.492c-.038-.018-1.497-.736-1.756-.83a1.008 1.008 0 0 0-.34-.075c-.196 0-.362.098-.49.291-.146.217-.587.732-.723.886-.018.02-.042.045-.057.045-.013 0-.239-.093-.307-.123-1.564-.68-2.751-2.313-2.914-2.589-.023-.04-.024-.057-.024-.057.005-.021.058-.074.085-.101.08-.079.166-.182.249-.283l.117-.14c.121-.14.175-.25.237-.375l.033-.066a.68.68 0 0 0-.02-.64c-.034-.069-.65-1.555-.715-1.711-.158-.377-.366-.552-.655-.552-.027 0 0 0-.112.005-.137.005-.883.104-1.213.311-.35.22-.94.924-.94 2.16 0 1.112.705 2.162 1.008 2.561l.041.06c1.161 1.695 2.608 2.951 4.074 3.537 1.412.564 2.081.63 2.461.63.16 0 .288-.013.4-.024l.072-.007c.488-.043 1.56-.599 1.804-1.276.192-.534.243-1.117.115-1.329-.088-.144-.239-.216-.43-.308Z"
    />
  </svg>
  <span>WhatsApp ile iletişime geç</span>
</a>
```

## **WhatsApp Link Yapısını Anlama**

WhatsApp butonunun doğru çalışması için link yapısını anlamak önemlidir:

-   **Temel Format**: [**https://wa.me/TELEFON\_NUMARASI**](https://wa.me/TELEFON_NUMARASI)
    
-   **Önceden Tanımlı Mesaj**: [**https://wa.me/TELEFON\_NUMARASI?text=MESAJ**](https://wa.me/TELEFON_NUMARASI?text=MESAJ)
    
-   **Telefon Numarası**: Ülke kodu ile birlikte (Türkiye için +90)
    

Örnek: [**https://wa.me/905551234567?text=Merhaba,%20sitenizden%20geliyorum**](https://wa.me/905551234567?text=Merhaba,%20sitenizden%20geliyorum)**.**

Daha detaylı bilgi ve WhatsApp link oluşturmak için [WhatsApp Link Oluşturucu](https://emreaykutalp.com/araclar/whatsapp-link-olusturma) aracını kullanabilirsiniz.