Ayhan 20 Ekim 2015 Webmaster
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.

Yazar :

Elektrik-Elektronik mühendisiyim. 2 yıldır bu blogda yazıyorum. Ve 6 aydır aktif olarak internet siteleri yönetiyorum. Kişisel olarak da teknoloji ve fotoğrafçılıkla ile ilgileniyorum.



Beni sosyal medya hesaplarım üzerinden takip edin:

YORUMLAR

  1. 1 sene ago  

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

    • 1 sene ago  

      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.

      • 1 sene ago  

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

        • 1 sene ago  

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

  2. 10 ay ago  

    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

Daha fazla Webmaster
Question2Answer
Question2Answer Kurulumu

Herkese Merhaba; Uzun süredir yürüttüğüm projeme Soru Cevap bölümü ekleme fikrim vardı ve dün gece yaptığım araştırmalar sonucunda Question2Answer sistemini kurdum ve...

Adwords
Mutlaka Kulanmanız Gereken Reklam Çeşitleri

Şimdi SEO çalışmaları hakkında araştırma yaptınız ve yeteri kadar bilgi edindiğinizi düşünüyorsunuz. Bu noktadan sonraki hedefiniz reklam çalışmaları yapmak olacaktır....

Kapat