Sosyal Medya Paylaşım Butonları Ekleme

Mart 17 22:54 2014 Yazar: A.Gökhan, M.Sc. Bu yazıyı yazdır

Tekrar Merhaba!

Bu yazıda oldukça basit ama çok da yaygın kullanılan önemli eklentilerden, sosyal medya paylaşım butonlarından bir basit örnek yaparak birbirinden farklı görüntüler elde edeceğiz. Sosyal medya sitelerini artık kullanmayanımız yoktur. Biliyorsunuz, Facebooki Twitter, Instagram, Pinterest gibi büyük sosyal paylaşım siteleri, kendilerine entegre olan bir çok araç yayınlamaktalar. Beğenme, takip etme, paylaşma gibi özellikleri kendi blog, web site ya da portallarımızda kullanabilmemiz için bir takım hazır kodlar mevcut. Bu yazıda bu HTML kodları sizinle paylaşıp ekran görüntülerini göreceğiz. Lafı uzatmadan hemen başlayalım:

<div class="pw-widget pw-counter-vertical">
	<a class="pw-button-facebook pw-look-native"></a>
	<a class="pw-button-twitter pw-look-native"></a>
	<a class="pw-button-googleplus pw-look-native"></a>
	<a class="pw-button-pinterest pw-look-native"></a>
</div>
<script src="http://i.po.st/static/v3/post-widget.js#publisherKey=ree2tvdnq33tbm2u2lfh" type="text/javascript">
</script>

</div>

</script>

Yukarıda verilen kodlar, şu şekilde bir görüntüye sahip olacaktır. Bir örneğini de bu sitede görebilirsiniz: Uygulamalarla PHP Resmi Tanıtım Sayfası

Diğer bir kullanımı aşağıdaki şekilde verebiliriz:

<div class="pw-widget pw-size-large">
	<a class="pw-button-facebook"></a>
	<a class="pw-button-twitter"></a>
	<a class="pw-button-googleplus"></a>
	<a class="pw-button-pinterest"></a>
	<a class="pw-button-tumblr"></a>
</div>
<script src="http://i.po.st/static/v3/post-widget.js#publisherKey=ree2tvdnq33tbm2u2lfh" type="text/javascript"></script>

</div>

Yukarıda verilen HTML kodları şu şekilde bir çıktı verecektir:

Buna ek olarak oldukça fazla seçenek sahibi olduğunuzu bilmeniz gerekmektedir. Sosyal medya sitelerinin kendi web sitelerinde bu konu ile ilgili paylaşımları incelemeniz en sağlıklısı olacaktır.

Umarım yararlı olmuştur. Görüşmek dileğiyle!