WordPress Blogumuza Sosyal Paylaşım Butonu Yapalım. (Eklentisiz)

Merhaba arkadaşlar.  Uzun zamandır WordPress kullanmaktayım.  WordPress’te benimde kullandığım birkaç eklenti var. Fakat bu eklentiler DB’nin şişmesine,  mysql ram kullanımına ve sisteme birazda olsa yük getiriyor.  Elimden geldiğince minimum eklenti ile maksimum iş yapmaya çalışıyorum.

Blogum için Sosyal Paylaşım butonları  eklemeyi düşünüyordum. Tabiki eklentisiz olarak.  Bu işi yapan birçok WordPress eklentisi mevcut.  Bunlardan en çok kullanılanıda Share This eklentisi.  Fakat pek beğenmediğimi itiraf etmeliyim.  Birçoğunuda malesef ki özelleştirebilmeniz zor.  Kendi eklentimizi yazmaktansa kendimize ait özel butonlar oluşturmamız daha kolayıma geliyor..

Sizlere bu yazımda paylaşım butonlarını nasıl yapacağımızdan bahsedeceğim.  Öncelikle Friendfeed Facebook ve Twitter‘i göze alarak başlıyorum. Tekil sayfalarımın içine yerleştirdim kodlarımızı  “single.php” içerisinde uygun bir yere eklememiz gerekiyor.

Twitter ;

Twitter için gerekli olan twitter resmi ve twitter paylaşım bağlantısı yani API bağlantısı.

Resim: http://www.teakolik.com/images/twitter.png

APi: http://twitter.com/home?status=BAŞLIK+BAĞLANTI ADRESİ

Şimdi bunu blogumuza uyarlayacağız. Öncelikle BAŞLIK ve BAĞLANTI ADRESİ şeklinde APi ‘nin bizden istediği verileri blog içerisinden alabilmemiz gerekiyor.  WordPress içerisinde BAŞLIK için <?php wp_title(”); ?> fonksiyonunu kullanarak sayfa başlığını (Title) veri olarak çekebiliriz.  Ayrıca sayfanın bağlantı adresinide  <?php the_permalink(); ?> fonksiyonunu kullanarak çekebiliriz.

<a href=”http://twitter.com/home?status=<?php wp_title(”); ?> <?php the_permalink(); ?>” /></a>  şekline gelen Api bağlantısını Twitter resmimize bağlantı verdiğimizde Twitter paylaşım butonu ortaya çıkacaktır.

<a href=”http://twitter.com/home?status=<?php wp_title(”); ?> <?php the_permalink(); ?>” target=”_blank” />
<img src=”http://www.teakolik.com/images/twitter.png” alt=”Twitter ile paylaş…” /></a>

Gördüğünüz gibi Twitter için paylaşım butonumuz oluştu.  Şimdi bu butonu tekil sayfa (single.php) içerisinde uygun bir yere yerleştirirseniz butona tıklandığı zaman Twitter’e gönderilerimiz hazır hale geliyor.

Friendfeed ;

Friendfeed için gerekli olan bir paylaşım butonu resmi ve Api bağlantısı.

Resim : http://www.teakolik.com/images/friendfeed.png

APi : http://friendfeed.com/?title=BAŞLIK&url=BAĞLANTI

Yine Twitter butonunda olduğu gibi Api içerisine BAŞLIK ve BAĞLANTI ADRESİ’ni otomatik olarak çektirmemiz gerekiyor. Bunun için <?php wp_title(”); ?>  fonksiyonumuzdan ve  <?php the_permalink(); ?> fonksiyonumuzdan yararlanıyoruz.  Friendfeed resmimize bu Api’yi bağlantıladığımız zaman kodumuz tamamlanmış olacaktır.

<a href=”http://friendfeed.com/?title=<?php wp_title(”); ?>&url=<?php the_permalink(); ?>”  target=”_blank” />
<img src=”http://www.teakolik.com/images/friendfeed.png” alt=”Friendfeed ile paylaş…” /></a>

Facebook ;

Facebook için gerekli olan yine bir paylaşım butonu ve Facebook paylaşım Apisi.

Resim : http://www.teakolik.com/images/facebook.jpg

Api : http://www.facebook.com/share.php?u=BAĞLANTIADRESİMİZ

Api’de dikkatinizi çekmiştir bağlantı adresimiz mevcut fakat title yok.  Gerekte yok. Çünkü Facebook bunu bizim yerimize bağlantı içerisinden çekiyor. Hatta yazı içerisinde resim kullandıysanız bu resmide küçük resim olarak alabiliyor.  Sadece yapmamız gereken Api içerisindeki bağlantı adresimizi  <?php the_permalink(); ?>  fonksiyonunu kullanarak çektirmek.

<a href=”http://www.facebook.com/share.php?u=<?php the_permalink(); ?>”  target=”_blank” />
<img src=”http://www.teakolik.com/images/facebook.jpg” alt=”FaceBook ile paylaş…” /></a>

Yukarıda gördüğünüz gibi facebook apisi ile facebook butonumuzu linkledik.  Artık herşey hazır.  Bu kodlarımızı Single.php içerisinde uygun bir yere yerleştirdiğiniz zaman yazılarınız için paylaşım butonlarımız bitmiş olacak.

Bu apileri yada resimleri dilediğiniz gibi değiştirebilir kafanıza göre takılabilirsiniz.  Dikkat ederseniz  bağlantı içerisine target=”_blank” ekledim bu sayede yeni bir sayfa açılarak paylaşım sağlanabilecektir.  Yada bir fotograf efekti vererek çok daha güzel bir görünüm sağlayabilirsiniz.  Hadi kolay gelsin….

NOT: Ücretsiz sosyal paylaşım butonları : http://webdesignledger.com

Yönetici Notu :
#0
Lütfen yapacağınız yorumlarda kişi ve kurumlara hakaret etmeden, kişilik haklarına zarar vermeden görüşlerinizi bildiriniz. Oluşabilecek zararlarda ve gözden kaçabilecek durumlarda tüm sorumluluk yorumu yapan kişiye aittir. Gizlilik sayfamızda bu bilgiler açıkça belirtilmiştir.
  1. Ali Demirtaş
    Mart 11th, 2010 18:29

    Hamza abi çok güzel bir yazı olmuş.Çok yakında kendi blogumada ekleyeceğim. ;-)

  2. LauthreS
    Mart 11th, 2010 22:35

    çok faydalı bi yazıydı şuan kullandığım temanın bu özelliği olduğu için kullanamıyorum ama temayı değiştirince çok işime yarayacak..

    teşekkürler..

  3. Çağrı
    Mart 13th, 2010 15:20

    Bu yöntemi bende kullanıyorum, html kodları yeterli bu tür şeyler için, heleki benim tema full img olunca kodlardan nasl yırtarım hesabını yapıyorum :)

    Faydalı bilgi…. :)

  4. mabeL
    Mart 16th, 2010 13:43

    ben blogumda ki hemen herşeyi kendim oluşturdum. bileşensiz sidebar, üst kısım sosyal ağ iconları, imajlar… böylesi daha bir hoşuma gidiyor :) mysql hızını pek bilmem ama, elinle yapınca daha bir güzel görünüyor gözüne. teşekkürler teakolik.

  5. Mahsun ÖNDER
    Mart 16th, 2010 17:43

    Gerçekten çok güzel bir yazı olmuş. Teşekkür ederim. Hemen kendi bloguma eklicem bunları.

  6. trgy
    Mart 20th, 2010 18:41

    En güzeli eklentisiz yapmak, yanılmıyorsam cpu miktarını artırıyor. Güzel bir anlatım olmuş.

  7. Yakup
    Mart 20th, 2010 23:47

    Yazı için teşekkürler. Aynı şekilde benzer yazılar gösterme eklentisini sadece kodlarla yapılabilir bilgi : http://www.yakuter.com/wordpresste-eklenti-kullanmadan-benzer-yazilari-gosterin/

    Paylaşayım dedim, beğendim belki sizde kullanırsınız.

  8. Can Dirgen
    Nisan 22nd, 2010 19:03

    Kodlarda bir sorunmu var. Paylaş dediğimde istediğim şekilde paylaşmıyor?

  9. TEAkolik
    Nisan 22nd, 2010 21:00

    @Can Dirgen
    Kodda sorun yok. Tırnak işaretlerinden yapıyor tırnak işaretlerini silip tekrar koyar mısın? WordPress tırnak işaretlerini XHTML’e göre düzenliyor. Bu yüzden çalışmayabilir. Tırnakları sil yeniden ekle.

  10. Can Dirgen
    Nisan 22nd, 2010 21:21

    Peki öylede deneyeyim. Birde yeri gelmişken sormak istiyorum wp_commentmeta tablosunun yararı zararı nedir dün sildimde? hata kayıtlarında bu tablo yok diyor acaba ne yapabilirim?

  11. TEAkolik
    Nisan 22nd, 2010 21:53

    @Can Dirgen
    Bu tablo gerekliydi :) Sisteme yapılan yorumlar için idler tutuyor. Eğer sildiysen WP güncellemesi yapamassın büyük ihtimal yeni versiyon çıktığında güncelleme yapamayacak ve hata alacaksın. Phpmyadmin açıp SQL sorgusuna gelip

    CREATE TABLE wp_commentmeta (
    meta_id bigint(20) unsigned NOT NULL auto_increment,
    comment_id bigint(20) unsigned NOT NULL default ’0′,
    meta_key varchar(255) default NULL,
    meta_value longtext,
    PRIMARY KEY (meta_id),
    KEY comment_id (comment_id),
    KEY meta_key (meta_key)
    )

    Sorgusunu gir tablo tekrar oluşmuş olacaktır. NOT: Tırnaklara dikkat :)

  12. Can Dirgen
    Nisan 23rd, 2010 11:09

    @TEAkolik
    Teşekkürler commentmeta oluştu :) Kafama takılanları sorayım rahatlayayım Güncellemede sorun yaşayacakmıyım? Kaybım nedir?

  13. TEAkolik
    Nisan 23rd, 2010 20:35

    @Can Dirgen
    Kaybın yok. Güncellemede sıkıntı çıkarmaz.

  14. uğur
    Mayıs 13th, 2010 18:53

    TEAkolik merhabalar yazınız gerçekten çok işime yaradı diyemeyeceğim :D çünkü wordpress’e yeni katıldım ve single.php dosyasında kodları nereye ekleyeceğimi bilmiyorum senin yazındaki gibi yazı sonunda paylaşım butonlarını göstermek için bu kodları nereye eklemeliyim eğer yardımcı olursan sevinirim

  15. TEAkolik
    Mayıs 13th, 2010 21:07

    Single.php içerisinde istediğin bir yere ekleyebilirsin.

Yorum sayfalarımız;

Güvenlik Sorusu;



QR Code Business Card