Siteniz için şık CSS paylaş butonları

Bu yazı 2016 yılından. Anlatılan sürümler, fiyatlar ve adresler o günden bu yana değişmiş olabilir.

Sitenize ekleyebileceğiniz şık bir CSS paylaş butonu çalışmasıyla karşınızdayım. Ziyaretçileriniz bu butonlarla yazınızı sosyal medyada paylaşabilir. Simgeler için Font Awesome kullanacağız; henüz sitenizde yoksa <head> içine şu satırı ekleyerek bağlayabilirsiniz:

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

1. HTML

Butonları sayfanızda uygun bir yere ekleyin. Buradaki # işaretlerinin yerine birazdan paylaşım linklerini koyacağız:

HTML

<a class="paylasbuton facebook" href="#" data-share><i class="fa-brands fa-facebook-f"></i> Paylaş</a>
<a class="paylasbuton x" href="#" data-share><i class="fa-brands fa-x-twitter"></i> Paylaş</a>
<a class="paylasbuton whatsapp" href="#" data-share><i class="fa-brands fa-whatsapp"></i> WhatsApp</a>
<a class="paylasbuton telegram" href="#" data-share><i class="fa-brands fa-telegram"></i> Telegram</a>
<a class="paylasbuton linkedin" href="#" data-share><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a>
<a class="paylasbuton pinterest" href="#" data-share><i class="fa-brands fa-pinterest-p"></i> Pinle</a>

Eski yazıda Google+ ve StumbleUpon butonları da vardı; ikisi de kapandığı için çıkardım ve yerlerine bugün çok kullanılan WhatsApp ile Telegram'ı ekledim. Twitter'ın adı da X oldu, onu da güncelledim.

2. CSS

Bu kodları style.css dosyanıza ekleyin. Renkleri her platformun güncel markasına göre ayarladım:

CSS

.paylasbuton {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 4px 4px 0;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  transition: 0.2s;
}
.paylasbuton:hover { opacity: 0.85; }

.facebook  { background-color: #1877f2; }
.x         { background-color: #000000; }
.whatsapp  { background-color: #25d366; }
.telegram  { background-color: #0088cc; }
.linkedin  { background-color: #0a66c2; }
.pinterest { background-color: #e60023; }

3. Paylaşım linkleri

Her butonun href="#" kısmına, ilgili platformun paylaşım adresini koyun. Adreslerdeki URL yerine sayfanızın adresini, BASLIK yerine yazının başlığını yazın (bunları genelde kodla otomatik doldurursunuz):

Kod

Facebook   https://www.facebook.com/sharer/sharer.php?u=URL
X          https://twitter.com/intent/tweet?text=BASLIK&url=URL
WhatsApp   https://wa.me/?text=BASLIK%20URL
Telegram   https://t.me/share/url?url=URL&text=BASLIK
LinkedIn   https://www.linkedin.com/sharing/share-offsite/?url=URL
Pinterest  https://pinterest.com/pin/create/button/?url=URL&description=BASLIK

4. Pencereyi popup açmak

Son olarak, paylaş linklerine tıklandığında koca bir sayfa yerine küçük bir popup pencere açılsın. Eski yazıda bunu jQuery ile yapıyordum; artık bir kütüphaneye gerek yok, sade JavaScript yeterli:

HTML

<script>
  document.querySelectorAll('[data-share]').forEach(function (link) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      window.open(this.href, '', 'width=600,height=500,menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
    });
  });
</script>

Butonların data-share özelliği bu script'in onları tanımasını sağlıyor; yeni bir buton eklerken ona da data-share yazmanız yeterli.