HTML Paylaş Butonları

Yükleniyor

share-buttons

Sayfa açılış hızı günümüzde her şey demek. Hal böyleyken Facebook, Twitter ve Google+ gibi sosyal medyaların blog yazılarımızı paylaşmamız için bize sunduğu paylaşım butonu scriptleri sitelerimize büyük ağırlık olabiliyor. Neyse ki bu durumu düzeltmek elimizde.

Sosyal medya script’lerinin sitemize yük olduğundan bahsetmiştik, bir de bir tablo ile bu durumu gözler önüne sermekte fayda var.

Site Dosya Sayısı Boyut
Google+ 1 15.1KB
Facebook 3 73.3KB
Pinterest 3 12.9KB
Twitter 4 52.7KB
Toplam 11 154KB

Kaynak: jonsuh.com

Görüldüğü üzere sitenize yalnızca 4 sosyal medya için paylaş butonu koymak ekstra 11 HTTP isteği ve ziyaretçi 154kb trafiğe sebep olur. Bu da sitenizin yaklaşık 3 saniye geç açılmasına neden olur.

İşi HTML’ye bırakın

Yukarıda saydığımız 4 sosyal medya sitesi de bağlantı paylaşmamız için özel sayfalara sahip. Bu sayfalar HTTP GET parametrelerinden yola çıkarak hangi url’yi, hangi resimle/yazıyla paylaşılacağına karar verir. Örnek vermek gerekirse Facebook’un paylaşım url’sini ele alalım:

Aşağıdaki linki tarayıcınızda açın.
http://www.facebook.com/sharer/sharer.php

Paylaşmak istediğiniz sayfa url’sini soruyor değil mi? Bu sayfaya u (url’in kısaltması) parametresiyle bir url verelim. Aşağıdaki linki tarayıcınızda açmayı deneyin:

Şimdi de bu linki açın.
http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F1fincan.com

İşin mantığını anladıysak kod örneğimize geçebiliriz.

Örnek Paylaş Butonları

Aşağıda Facebook, Twitter, Pinterest ve Google+’nın paylaşım linklerini kullanarak ve CSS ile biçimlendirdiğim örnek paylaşım butonları yer alıyor. Kodları istediğiniz gibi düzenleyip kendi sitenizde kullanabilirsiniz.

Düzenlerken dikkat etmeniz gerekenler:

  • WordPress kullanıyorsanız kod sorunsuz bir şekilde çalışacaktır. Ancak başka bir içerik yönetim sistemi kullanıyorsanız (ya da içerik yönetim sistemi kullanmıyorsanız) kod çalışmayacaktır. Bu yüzden $url, $desc ve $img_url değişkenlerini sitenize göre tanımlayın.
  • Paylaştığım css’de Font Awesome ikonları kullanılmakta. Eğer sitenizde Font Awesome’ın css’ini kullanmıyorsanız aşağıdaki kodu sitenizin head kısmına eklemeniz gerekli.
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Ve kod:

Aşağıdaki demodan butonları deneyebilirsiniz.

See the Pen HTML Paylaş Butonları by Muhammet Arslantaş (@MhtArs) on CodePen.

Kapanış

Paylaştığım örnek kodla ilgili soru ve önerilerinizi aşağıdaki yorum alanına yazmaktan çekinmeyin. Kodlara katkıda bulunmak istiyorsanız da GitHub üzerinden Gist’leri fork’layıp pull request yollarsanız çok mutlu olurum.

HTML Paylaş Butonları” için 2 yorum

    Author’s gravatar

    Selam benim web sitemi
    pingdovn hiz testi yaptigimda

    sitemde en gec acilan
    maxcdn.bootstapcdn seklinde bir yazi var
    Sizce bunu kaldirmalimiyim

    Kaldirmamm gerekirse nasil yaparim

    Bunun icin yardimci olabilirseniz cok tesekkur ederim

    Cevapla

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir