Web Sitenize WhatsApp ve Instagram Butonları Nasıl Eklenir? (Adım Adım Rehber)

Web sitenize sosyal medya butonları eklemek, ziyaretçilerinizin size hızlı bir şekilde ulaşmasını sağlar ve sosyal medya hesaplarınızı tanıtmada etkili bir yöntemdir. Bu makalede, WhatsApp ve Instagram butonlarını web sitenize nasıl ekleyebileceğinizi adım adım göstereceğiz.

Adım 1: HTML ve CSS Kodlarını Hazırlayın

Öncelikle, HTML ve CSS kodlarını tek bir dosyada birleştirerek butonları oluşturacağız. Bu kodları doğrudan HTML dosyanıza ekleyebilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram ve WhatsApp Butonları</title>
    <style>
        .whatsapp-button,
        .instagram-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            margin-bottom: 10px;
        }

        .whatsapp-button img,
        .instagram-button img {
            width: 50px;
            height: 50px;
        }

        .instagram-button {
            margin-bottom: 70px; /* WhatsApp butonunun üstüne yerleştirmek için */
        }
    </style>
</head>
<body>

    <!-- WhatsApp Butonu -->
    <a href="https://wa.me/1234567890" class="whatsapp-button">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/WhatsApp_icon.png" alt="WhatsApp">
    </a>

    <!-- Instagram Butonu -->
    <a href="https://www.instagram.com/hesabiniz" class="instagram-button">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" alt="Instagram">
    </a>

</body>
</html>

Bu kodlar, WhatsApp ve Instagram butonlarını sağ alt köşede sabit olarak görüntüleyecektir. position: fixed; özelliği sayesinde sayfa aşağı veya yukarı kaydırılsa da butonlar sabit kalır.

Adım 2: Resmi Logoları Kullanın

Kodlarda, WhatsApp ve Instagram logoları için Wikimedia Commons’tan alınmış resmi URL’ler kullanılmıştır. Bu sayede ikonlar doğrudan yüklenir ve sayfada görüntülenir.

Adım 3: HTML Kodunu Web Sitenize Ekleyin

Hazırladığınız HTML kodunu web sitenizin uygun bir bölümüne ekleyin. Genellikle footer veya body kısmında bu kodları kullanabilirsiniz.

Sonuç

Bu adımları takip ederek web sitenize kolayca WhatsApp ve Instagram butonları ekleyebilirsiniz. Bu butonlar sayesinde ziyaretçileriniz size hızlı bir şekilde ulaşabilir ve sosyal medya hesaplarınızı takip edebilirler.

Instagram ve WhatsApp Butonları

Arif Akyüz Sistem Network Yöneticisi ve Siber Güvenlik Uzmanı

Arif Akyüz
Bilgi Teknolojileri
Sistem Network Yöneticisi
ve Siber Güvenlik Uzmanı
[email protected]