Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

WordPress için Sosyal Paylaşım Butonları (Responsive ve Eklentisiz)


FacebookTwitterPinterestTumblrYazdır


WordPress için Sosyal Paylaşım Butonları (Responsive ve Eklentisiz)Bir önceki içeriğimde hazırlamış olduğum Blogger için sosyal paylaşım butonları üzerine kodlar paylaşmıştım sizler için. Şimdi ise WordPress için eklentisiz sosyal paylaşım butonları kodlarını paylaşıyor olacağım. ShareThis v.b. uygulamalar çok sorgu çalıştırdığı için, bu yüzden WordPress için Facebook, Twitter, Pinterest, Tumblr ve Yazdır (Print) butonları hazırladım. İlgili kodlar otomatik olarak yazı başlığı, görsel, açıklama v.b. çekiyor ve sosyal medya paylaşım bağlantılarına ekliyor. Dolayısı ile çok hızlı çalışan bu kodları, farklı servisler kullanmak yerine, tercih edebilirsiniz. Sayfa yüklenme hızınızı hiçbir şekilde etkilemeyecektir. Herkes için faydalı olmasını temenni ediyorum.

AYRICA: WordPress'te RSS Sayfalarındaki Sürüm Bilgilerini Kaldıralım

WordPress için Sosyal Paylaşım Butonları (Responsive ve Eklentisiz)

1) Aşağıdaki kodları temanızın CSS dosyasına ekleyiniz.

@media screen and (max-width:300px){a.facebookyazici{width:100%!important;margin:0!important;display:block!important}a.twitteryazici{width:100%!important;margin:0!important;display:block!important}a.pinterestyazici{width:100%!important;margin:0!important;display:block!important}a.tumblryazici{width:100%!important;margin:0!important;display:block!important}a.yazdiryazici{width:100%!important;margin:0!important;display:block!important}}.socialyazici{margin-bottom:0}a.facebookyazici{background-color:#4267B2;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.facebookyazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.twitteryazici{background-color:#55ACEE;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.twitteryazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.pinterestyazici{background-color:#CB2027;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.pinterestyazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.tumblryazici{background-color:#32506D;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.tumblryazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.yazdiryazici{background-color:#222;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.yazdiryazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}

2) Aşağıdaki kodları ise temanızın single.php dosyasına ekleyiniz.

<div class="socialyazici">
<a class="facebookyazici" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink());?>" target="_blank"><img title="Facebook" src="https://www.teknobeyin.com/dosyalar/2011/08/facebook.png" alt="Facebook"/></a><a class="twitteryazici" href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title());?>&amp;url=<?php echo urlencode(get_permalink());?>" target="_blank"><img title="Twitter" src="https://www.teknobeyin.com/dosyalar/2011/08/twitter.png" alt="Twitter"/></a><a class="pinterestyazici" href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink());?>&amp;media=<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID()));?>&amp;description=<?php echo urlencode(get_the_title());?>" target="_blank"><img title="Pinterest" src="https://www.teknobeyin.com/dosyalar/2011/08/pinterest.png" alt="Pinterest"/></a><a class="tumblryazici" href="https://www.tumblr.com/widgets/share/tool?posttype=link&amp;title=<?php echo urlencode(get_the_title());?>&amp;caption=<?php echo urlencode(get_the_title());?>&amp;content=<?php echo urlencode(get_permalink());?>&amp;canonicalUrl=<?php echo urlencode(get_permalink());?>" target="_blank"><img title="Tumblr" src="https://www.teknobeyin.com/dosyalar/2011/08/tumblr.png" alt="Tumblr"/></a><a class="yazdiryazici" href="javascript:window.print()"><img title="Yazdır" src="https://www.teknobeyin.com/dosyalar/2011/08/yazdir.png" alt="Yazdır"/></a>
</div>

Örnek Görünüm

WordPress için Sosyal Paylaşım Butonları (Responsive ve Eklentisiz)

  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık