Anasayfa Webmaster Sosyal Paylaşım Butonları Yapalım

Sosyal Paylaşım Butonları Yapalım

12 Dakikada Okunur
5
0
86
Masaüstü Paylaşım Butonları
Sosyal Medya
Sosyal Medya

Uzun bir zamandır kişisel blogumun tasarımı ile ilgili kafamı kurcalayan hususlar vardı. Nedendir bilmiyorum sürekli olarak kafamda tema değiştirmem gerek düşüncesi bulunuyordu. Hatta askere gidecek olmasam belki de şu anda farklı bir temayla sizle karşı karşıya olacaktım. Ama bir süre ertelemem gerekmesi nedeniyle, kendimce tasarımda oynamaya karar verdim. Uzun bir çalışma sonrasında BENCE daha okunaklı, görünüşü güzel bir tema halini aldı. Hatta diyebilirim ki artık değiştirmeyi düşünmüyorum.

Lütfen yeni tasarımım ile ilgili görüşlerinizi belirtin :) Görüşleriniz benim için çok önemli !

Blogun ana tasarımından sonra yazıların sosyal medyada paylaşımını sağlayan buyonlar hakkında da bir çalışma yapmaya karar verdim. Çünkü eski tasarımda butonlar çok ufaktı ve paylaşmaya teşvik etmiyordu. Bu konuya ek olarak mobil tasarımda artık hayatımızın değişmezi olan WhatsApp seçeneğini de eklemek istiyordum. Çünkü artık WhatsApp yadsınamaz bir hayat gerçeği halini aldı.

WhatsApp
WhatsApp

Zaten şu yazımı okuyorsanız sosyal paylaşım butonlarımı görüyorsunuz. Eğer bu yazımı RSS Okuyucu üzerinden okuyorsanız zaten görünümleri de kodların altına ekleyeceğim. Hoşunuza giderse kodları kendinize göre düzenleyerek uygulayabilirsiniz.

Öncelikle belirmek isterim ki vereceğim kodlar Bootstrap kullanan bir temayla uyumlu çalışacaktır. İçindeki class‘lar eğer Bootsrap kullanmıyorsanız etkilemeyecek ve görsel bozuk olacaktır.  Eğer siteniz Bootstrap ile kodlanmadıysa yapmanız gereken yan yana 3-4 adet div’i eşit olarak konumlandırmak olacaktır.

Diğer yandan ise vereceğim kodlar içinde Awesome Fonts İcon’ları kullanıyor. Yine bununda temanıza eklenmiş olması gerekiyor. Veya kendiniz eklemelisiniz. Eklenti olarak aratırsanız ilgili  eklentiyi kurarak sorunu çözebilirsiniz.

Hemen koda geçelim, ilk CSS dosyasına eklemeniz gereken bölüme değinelim. Aşağıdaki kodu CSS dosyanızın sonuna ekleyebilirsiniz.

#sosyal {
height:40px;
display: table;
text-align: center;
}
#sosyal p {
display: table-cell;
vertical-align: middle;
font-size:14px;
color:white;
}

Bu kodu ekledikten sonra tema dosyalarınızdaki single.php dosyasını açıp, aşağıda verdiğim kodu <?php the_content();?> kodunun üstüne ve/veya altına ekleyerek istediğiniz şekle sokabilirsiniz.

Masaüstü için Paylaş Butonları :

<div style="height:40px;" class="visible-lg">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank"> <div class="col-md-4" style="background-color:#3b5998;height:40px;margin:0 auto;text-align: center;">
<p style="color:white;padding-left:10px;padding-bottom:5px;"><i class="fa fa-facebook fa-2x"></i>Facebook'ta Paylaş</p>
</div>
</a>
<a href="http://twitter.com/share?text=<?php echo urlencode(the_title()); ?>&url=<?php echo urlencode(the_permalink()); ?>&via=ayhankorkmaz_&related=<?php the_title(); ?>" target="_blank">
<div class="col-md-4" style="background-color:#55acee;height:40px;margin:0 auto;text-align: center;">
<p style="color:white;padding-left:10px;padding-bottom:5px;"><i class="fa fa-twitter fa-2x"></i>Twitter'da Paylaş</p>
</div></a>
<a href="https://plus.google.com/share?url=<?php the_permalink();?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank">
<div class="col-md-4" style="background-color:#dc4e41;height:40px;margin:0 auto;text-align: center;">
<p style="color:white;padding-left:10px;padding-bottom:5px;"><i class="fa fa-google-plus fa-2x"></i>Google +'ta Paylaş</p>
</div></a>
</div>
Masaüstü Paylaşım Butonları
Masaüstü Paylaşım Butonları

Şimdi de mobil platformlar için kullandığım koda geçelim. buradaki farklılık WhatsApp ile paylaş seçeneğini eklemek olacak. kodlar zaten neredeyse aynı. Hemen koda geçelim.

<div style="height:40px;" class="visible-xs visible-sm">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank"> <div class="col-xs-3 col-sm-3" style="background-color:#3b5998;" id="sosyal">
<p><i class="fa fa-facebook fa-2x"></i></p>
</div>
</a>
<a href="http://twitter.com/share?text=<?php echo urlencode(the_title()); ?>&url=<?php echo urlencode(the_permalink()); ?>&via=ayhankorkmaz_&related=<?php the_title(); ?>" target="_blank">
<div class="col-xs-3 col-sm-3" style="background-color:#55acee;" id="sosyal">
<p><i class="fa fa-twitter fa-2x"></i></p>
</div></a>
<a href="https://plus.google.com/share?url=<?php the_permalink();?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank">
<div class="col-xs-3 col-sm-3" style="background-color:#dc4e41;" id="sosyal">
<p><i class="fa fa-google-plus fa-2x"></i></p>
</div></a>
<a href="whatsapp://send?text=<?php the_permalink();?>&t=<?php the_title(); ?>" data-action="share/whatsapp/share" target="blank">
<div class="col-xs-3 col-sm-3" style="background-color:#43d854;" id="sosyal">
<p><i class="fa fa-whatsapp fa-2x"></i></p>
</div></a>
</div>
Mobil Paylaşım Butonları
Mobil Paylaşım Butonları

Bu kodlar sayesinde okuyucular WhatsApp üzerinden sizin yazınızı arkadaşları ile paylaşabiliyorlar. Benim hoşuma giden bu durumu sonunda gerçekleştirmiş oldum.

Eğer sizler de bu butonları beğendiyseniz rahatlıkla sitelerinizde kullanabilirsiniz. Ama o kadar emek harcadım birazcık butonları kullanalım :) Paylaşarak daha fazla kişiye ulaşmasına yardımcı olalalım.

Daha fazla ilgili makale
Yazardan daha fazla Ayhan KORKMAZ
Load More In Webmaster

5 Yorumlar

  1. Serhat

    20 Ekim 2015 at 7:05 pm

    bu kod single.php dosyasını bulamadım nereye eklemem gerekiyor?

    Cevapla

    • Ayhan

      20 Ekim 2015 at 7:09 pm

      Temanın içindeki single.php(Tekil Yazı) dosyası içinde < ?php the_content();?> terimini arayıp üstüne eklersen içeriğin üstüne eklenir. Altına eklersen de altına eklenir.

      Cevapla

      • Serhat

        20 Ekim 2015 at 7:11 pm

        işte o terim single.php dosyasının içinde bulunmuyor.

        Cevapla

        • Ayhan

          20 Ekim 2015 at 7:24 pm

          O Yoksa sadece content olarak arama yap, benzer bir fonksiyon olacaktır. Dosyanın tamamının yedeğini alarak deneyebilirsin.

          Cevapla

  2. emrah

    31 Ocak 2016 at 1:54 am

    merhaba hocam Bootstrap ile kodlanmış bir tema kullanmıyorum belirtmiş olduğunuz div eşitleme pek bilgim yok keşke onuda hazılayıp yayınlasaydınız

    Cevapla

Cevap Yaz