Eklentisiz Paylaş Butonları Yapımı

Eklentisiz Paylaş Butonları Yapımı

Eveet sade, hızlı ve eklentiye ihtiyaç duymadan site oluşturmadaki adımlarımıza eklentisiz paylaş butonları ekleyerek devam ediyoruz.

Öncelikle iconları çekeceğimiz bu css dosyasını <head> tagı arasına ekliyoruz.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css” />
Genelde sosyal ağların belirli bir paylaşım yapma linki vardır. Bunlara bakacak olursak;

1. Öncelikle "Facebook'ta paylaş" ile başlayalım.
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Facebookta Paylas."><i class="fa fa-facebook"></i>

Kırmızı alanda ister "Facebook'ta paylaş yazınızı yazabilir ister var olan iconu kullanabilirsiniz.

2. Twitter'da Paylaş Kodu 
<a href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Twitle!"><i class="fa fa-twitter"></i></a>

Burada da yine aynı şekilde kırmızı ile belirttiğim alanı dilediğinizce kullanabilirsiniz.
3. Google+'da Paylaş Kodu
<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;"><i class="fa fa-google"></i></a>
 4. Pinterest'te Paylaş Kodu
<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>"><i class="fa fa-pinterest"></i></a>
 5. Whatsapp'ta Paylaş Kodu
<a href="whatsapp://send?text=<?php echo ($title ." ". $url);?>"> <i class="fa fa-whatsapp"></i></a>
6. Linkedin'de Paylaş Kodu
<a class="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;title=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" title="LinkedIn de Paylas." rel="external nofollow" rel="nofollow" target="_blank"><i class="fa fa-linkedin"></i></a>
7. Bonus: Sayfa linkini çıkartma kodu
<a href="<?php echo get_permalink( $post->ID ); ?>" title="icerik linki"><i class="fa fa-link"></i></a><br /><code><?php echo get_permalink( $post->ID ); ?></code>

EDİT: Benim düzenleyip kullandığım wordpress eklentisiz paylaşım kodları bunlar
Kendi istediğinize göre düzenleyebilirsiniz. İsteyen kendi kullandığı fotoları atsın isteyen üstte css dosyasından çeksin.

<div class="alert alert-info" role="alert">
Bilgi güçtür, paylaştıkça büyür! :) <br />
<a title="Facebook'ta Paylas" href="http://www.facebook.com/share.php?u=<?php the_permalink('') ?>" target=”_news” rel="nofollow">
<img src="<?php bloginfo('template_directory');?>/img/sos/face.png" title="Facebookta Paylaş" /></a>
<a title="Twitter'da Paylas" href="http://twitter.com/home/?status= <?php the_title(''); ?>+<?php the_permalink('') ?>" target=”_news” rel="nofollow">
<img src="<?php bloginfo('template_directory');?>/img/sos/twit.png" title="Tweetle" /></a>
<a title="Google+'da Paylas" href="https://plus.google.com/share?url= <?php the_permalink('') ?>" target=”_news” rel="nofollow">
<img src="<?php bloginfo('template_directory');?>/img/sos/google+.png" title="Google+'da Paylaş" /></a>
<a title="Pinterest'te Paylas" href="http://pinterest.com/pinthis?url=<?php the_permalink('') ?>" target=”_news” rel="nofollow">
<img src="<?php bloginfo('template_directory');?>/img/sos/pint.png" title="Pinle" /></a>
<a href="whatsapp://send?text=<?php the_permalink();?>&t=<?php the_title(); ?>” data-action=”sharewhatsapp/share" rel="nofollow">
<img src="<?php bloginfo('template_directory');?>/img/sos/whats.png" title="Whatsapp ile Arkadaşına Gönder" /></a>
<br /><i><?php echo get_permalink( $post->ID ); ?></i>
</div>

KAYNAKLAR:

  • barattalo.it/coding/fastest-social-shares-without-plugins-in-wordpress

17 yorum

  1. Çok yararlı bir makale olmuş hocam. Yani insanlar artık bıktı Jetpack gibi eklentiler kullanarak sitelerini yavaşlatmaktan. Bu tür kodlar sayesinde kısa sürede işimizi halledebiliyoruz. Bir de bu kodlarla otomatik olarak tüm sosyal medyada yazılarımızı paylaşabilsek 🙂 Faydalı makale teşekkürler..

    • Hakkı Cengiz
      Cevapla

      Yorum için teşekkürler İsmail. Önemli olan sadelik ve hızlı site yapmak oldu artık. Bilgiye ne kadar hızlı erişilirse ziyaretçi o kadar mutlu olur 🙂
      Bu arada otomatik sosyal ağlarda paylaşma yapan eklenti mevcut onun hakkında yakında bir yazı yazacağım.

  2. Kadir Emre Parlak
    Cevapla

    İhtiyacım olan bilgiyi net bir şekilde gereksiz bilgi olmadan edindim. Teşekkür ederim.

  3. Batuhan Kılınç
    Cevapla

    Eklentisiz paylaşmanız güzel olmuş, basit şeyleri bile eklenti olarak eklediğimizde bir zaman sonra eklenti faciası oluşarak siteyi yavaşlatıyor 🙁 Güzel bir bilgilendirme olmuş, elinize sağlık 🙂

  4. Volkan Sarıdağ
    Cevapla

    Guzel paylasim ancak gorsellige daha cok onem verenler icin eklentiler vazgecilmez olacaktir 🙂

    • Hakkı Cengiz
      Cevapla

      Görselliği kendi yaratıcılığını kullanarak elde etmek varken eklentilerden yararlanmak başkasının izinden gitmek olur.

  5. umut can
    Cevapla

    Peki bu kodlar ile nasıl göründüğünü görebilme imkanımız var mıdır?

    • Hakkı Cengiz
      Cevapla

      Tasarım değişikliği yeni bitti yorumunu şimdi cevaplamış oldum

  6. Hayri Kırşan
    Cevapla

    Fazla sorgu tasarrufu yapmak için eklenti kullanmamak gerekiyor, gayet faydalı bir rehber

  7. Kerim Tuncer
    Cevapla

    WordPress geliştiricileri için oldukça bilgi verici bir yazı olmuş. Teşekkürler.

  8. Mehmet Ali
    Cevapla

    Eklenti siteyi fazla yoruyor, eklentisiz kod ile bu işlem yapıldığında site için yarar sağlıyor.

  9. şafak güler
    Cevapla

    güzel bir paylaşım olmuş. eklenti ile yapılan paylaşımla, paylaşımın yapılacağı yere link çıkışı yapıyor. bu sepetden dolayı eklenti ile paylaş butonları eklemeyi hiç tercih etmemiştim.

  10. Bekir
    Cevapla

    Makalenizi harfi harfine okudum ve en ince ayrıntısına kadar anlatmışsınız. Benim gibi görselliğe önem verenlerin kaçırmaması gereken bir konu…

  11. etüthane
    Cevapla

    Oldukça güzel bir kod paylaşımı olmuş siteme ekleyeceğim.

  12. etüthane
    Cevapla

    Oldukça güzel bir kod paylaşımı olmuş siteme ekleyeceğim..

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

tema hakkında: Filozof

Gelişme aşamasındaki (%40) bu yeni temamızı birlikte kodlayacağız. Ayrıntılar çok yakında blogda yer alacak.