Web Sitelesine Sosyal İkonlar Ekleme Kodu

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Sosyal medya, modern çevrimiçi varlığın ayrılmaz bir parçasıdır ve web sitelerine sosyal medya ikonları eklemek, ziyaretçilerin markanızla sosyal platformlarda etkileşime girmesini teşvik eder. Bu makalede, web sitenize sosyal medya ikonları nasıl ekleyebileceğinizi adım adım anlatacağım.

1. Sosyal Medya İkonlarını Seçme


İlk adım, kullanmak istediğiniz sosyal medya platformlarının ikonlarını seçmektir. Popüler seçenekler arasında Facebook, Twitter, Instagram, LinkedIn ve YouTube bulunmaktadır. Bu ikonları çeşitli kaynaklardan elde edebilirsiniz:

  1. Ücretsiz İkon Kitaplıkları: FontAwesome, Flaticon ve Iconmonstr gibi siteler, çeşitli sosyal medya ikonları sunar.
  2. Özel Tasarım İkonlar: Markanıza özel bir stil istiyorsanız, özel tasarlanmış ikonlar kullanabilirsiniz.

2. Kendi İkonlarınız ve Hazır İkonlarla Yapı Oluşturmak


Kendi İkonlarınız ile Oluşturma

Kendi ikonlarınızı web sitenize eklemek için, HTML yapınızda uygun yerlere aşağıdaki gibi bağlantılar ekleyin:


<div class="social-icons">
    <a href="https://www.facebook.com/yourpage" target="_blank">
        <img src="facebook-icon.png" alt="Facebook">
    </a>
    <a href="https://www.x.com/yourpage" target="_blank">
        <img src="x-icon.png" alt="X">
    </a>
    <a href="https://www.instagram.com/yourpage" target="_blank">
        <img src="instagram-icon.png" alt="Twitter">
    </a>
</div>
Kendi İkonlarınıza CSS ile Stil Verme

Kendi ikonlarınıza stil vermek için CSS kullanın. Bu, ikonların boyutunu, aralığını ve diğer görsel özelliklerini ayarlamanıza olanak tanır:


.social-icons img {
    width: 40px; /* İkon boyutu */
    margin: 0 10px; /* İkonlar arası mesafe */
    opacity: 0.7;
}

.social-icons img:hover {
    opacity: 1;
}
FontAwesome ile İkon Ekleme

Font Awesome kullanarak web sitenize sosyal medya ikonları eklemek, modern ve stil sahibi bir yaklaşımdır. Font Awesome, bir dizi ikonu kolaylıkla entegre etmenizi sağlayan popüler bir web font ve ikon kitaplığıdır. İşte bu işlemi nasıl gerçekleştirebileceğinize dair bir örnek:

Font Awesome'ı Dahil Etme

İlk olarak, web sitenize Font Awesome'ı dahil etmeniz gerekecek. Bunu yapmak için, Font Awesome'ın CDN linkini <head> etiketi içerisine yerleştirebilirsiniz:


<head>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
HTML Yapısını Oluşturma

Daha sonra, sosyal medya ikonlarınızı yerleştirmek istediğiniz yere aşağıdaki gibi HTML kodunu ekleyin:


<div class="social-icons">
            <a href="https://www.facebook.com/yourpage" target="_blank">
                 <i class="fa-brands fa-facebook">
             </a>
            <a href="https://www.x.com/yourpage" target="_blank">
                 <i class="fa-brands fa-square-x-twitter"></i>
             </a>
            <a href="https://www.instagram.com/yourpage" target="_blank">
                 <i class="fa-brands fa-instagram"></i>
             </a>
</div>
CSS Yapısını Oluşturma

/* Sosyal İkonların Konteyner Stili */
.social-icons {
    text-align: center; /* İkonları merkeze al */
    padding: 10px; /* Konteyner için iç boşluk */
}

/* Sosyal İkonlar için Genel Stil */
.social-icons i {
    font-size: 24px; /* İkon boyutu */
    margin: 0 10px; /* İkonlar arası mesafe */
    color: #333; /* İkon rengi */
    transition: color 0.3s; /* Renk değişim animasyonu */
}

/* Facebook İkonu Özel Stili */
.social-icons .fa-facebook {
    color: #4267B2; /* Facebook mavi rengi */
}

/* X İkonu Özel Stili 
.social-icons .fa-square-x-twitter { 
    color: #000000; /* X siyah rengi */
}

/* Instagram İkonu Özel Stili */
.social-icons .fa-instagram {
    color: #E1306C; /* Instagram pembe/mor rengi */
}

/* İkonlara Fare ile Üzerine Gelindiğinde Stil */
.social-icons i:hover {
    color: #555; /* Fare ile üzerine gelindiğinde renk */
}
  1. İkonların renkleri, tipik sosyal medya platformu renklerine göre ayarlanmıştır. Bunları markanızın renk şemasına uyacak şekilde özelleştirebilirsiniz.
  2. transition özelliği, renk değişiminde yumuşak bir animasyon sağlar.
  3. Bu CSS kodları, ikonların boyutunu, aralığını ve temel renklerini ayarlar. Daha fazla özelleştirme yapmak istiyorsanız, kodları ihtiyacınıza göre değiştirebilirsiniz.

Bu CSS stillemeleri, web sitenizin genel tasarımına ve marka kimliğine uygun olarak daha da özelleştirilebilir.

Font Awesome ile sosyal medya ikonları eklemek, web sitenize modern ve profesyonel bir görünüm kazandırır. Bu ikonlar, kullanıcıların sosyal medya hesaplarınızla etkileşime geçmesini teşvik eder ve markanızın çevrimiçi varlığını genişletir.

3. İkonları Doğru Yere Yerleştirme


İkonları, web sitenizin kullanıcıların kolayca görebileceği bir yere yerleştirin. Genellikle, bu ikonlar footer bölümünde veya başlıkta bulunur.

Erişilebilirlik ve SEO


Alt Metinler: Her ikonun alt özelliğini doldurarak erişilebilirliği artırın.

target="_blank" Kullanımı: Bu özellik, bağlantının yeni bir sekmede açılmasını sağlar.

4. İkonlara Etkileşim Eklemek


İkonlarınıza basit CSS ve JavaScript efektleri ekleyerek daha dikkat çekici hale getirebilirsiniz. Örneğin, fare ile üzerine gelindiğinde bir animasyon veya renk değişimi ekleyebilirsiniz.

Sonuç


Web sitenize sosyal medya ikonları eklemek, ziyaretçilerinizi sosyal medya hesaplarınızla kolayca bağlantı kurmaya teşvik eder ve markanızın çevrimiçi varlığını güçlendirir. Kullanıcıların ilgisini çeken ve markanızın tarzını yansıtan ikonlar seçmek, bu stratejinin başarısında önemli bir rol oynar.

Sizin İçin Önerdiklerimiz

Blog Resim
Web Sitelesine Sosyal İkonlar Ekleme Kodu

HTML

Sosyal medya, modern çevrimiçi varlığın ayrılmaz bir parçasıdır ve web sitelerine sosyal medya ikonları eklemek, ziyaretçilerin markanızla sosyal platformlarda etkileşime girmesini teşvik eder.

Devamını Oku
Blog Resim
HTML (h1, h2, h3) Başlık Etiketleri ve Kullanımı

HTML

HTML başlık etiketleri, bir web sayfasının içeriği hakkında bilgi verir ve arama motorlarına içeriğin neyle ilgili olduğunu açıklar. Bu nedenle, başlık etiketlerinin..

Devamını Oku
Blog Resim
HTML Dosyaları Nasıl Oluşturulur? (Ders-1)

HTML

HTML (Hyper Text Markup Language), web sitelerinin yapısal temelini oluşturan bir programlama dilidir. Bu programlama dili, web tasarımına yeni..

Devamını Oku
Blog Resim
HTML (Hypertext Markup Language) Nedir?

HTML

HTML, web sayfalarının tasarlanması ve tanımlanması için kullanılan bir etiket dili olarak tanımlanabilir. HTML, web sayfalarındaki metinleri, ..

Devamını Oku