Sosyal Paylaşım Butonları Yapalım

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.

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ı.

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>

Ş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>

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.