Sosyal Ağda Paylaşım Bağlantıları
Ziyaretçilerinizin site içeriğinizi paylaşmasını sağlayarak popüleritenizi artırabilirsiniz.
Facebook, Twitter, FriendFeed...Sosyal ağlar artık günümüz internetinin vazgeçilmezi olmuş durumda. Haber sitelerinden, forumlara, bloglardan video sitelerine kadar birçok site içeriğinin sosyal ağlarda paylaşılması için bağlantılar sunuyor. Hatta sırf bu iş için Wordpress, Joomla vs. eklentileri bile var.
Bu yazıyı okuduktan sonra ister ziyaretçilerinizin sizi takip etmesini sağlamak amacıyla RSS beslemelerinize veya Facebook ve Twitter hesaplarınza bağlantı verebilir, isterseniz de "Facebook'ta Paylaş" şeklinde düğmeler hazırlayabilirsiniz.
Anlatacağım paylaşım bağlantıları Jquery ile hazırlanmış ve basit bir kullanımı var.
Neler Gerekli?
- Sosyal Ağ Siteleri Simgeleri
Kurulum:
Aşağıdaki dosyaları sitenizin ana dizinine kopyalayın.
- jquery.bubbleup.js
- jquery-1.4.2.min.js
- paylas.css
- facebook.png
- feed.png
- twitter.png
Ben sadece 3 adet simge kullanacağım ve ziyaretçinin siteyi veya site sahibini takip etmesi amaçlı bir uygulama yapacağım.
Kullanım:
Aşağıdaki kodu bağlantıları kullanacağınız sayfanın <head></head> etkileri arasına ekleyin:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.bubbleup.js"></script>
<link href="paylas.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("div#paylas ul#menu li img").bubbleup({tooltip: true, scale:64});
});
});
</script>
Fonksiyondaki "tooltip" değeri simgenin "alt" özelliğinde bulunan metnin ipucu olarak gösterilip gösterilmeyeceğini, "scale" değeri ise simgenin üzerine gelindiğinde son boyutunun büyüklüğünü ifade ediyor.
Dosyanızda <body></body> etkileri arasında olmak kaydıyla paylaşım linklerini kullanacağınız alana aşağıdaki satırları ekleyin:
<div id="paylas">
<ul id="menu">
<li><a href="http://www.biltek.info/rss.xml"><img src="feed.png" alt="Haber akışına abone ol"/></a></li>
<li><a href="http://www.facebook.com/ahmetfx"><img src="facebook.png" alt="Facebook'ta takip et"/></a> </li>
<li><a href="http://twitter.com/ahmetfx"><img src="twitter.png" alt="Twitter'da takip et"/></a></li>
</ul>
</div>
Burada <li></li> etiketlerini çoğaltarak kendi bağlantılarını oluşturmak sizin elinizde.
Aynı şekilde site içeriğini sosyal ağlarda paylaştırmak istiyorsanız:
<div id="paylas">
<ul id="menu">
<li><a href="http://www.facebook.com/share.php?v=4&src=bm&u=BAĞLANTI LİNKİ&t=BAŞLIK"><img src="facebook.png" alt="Facebook'ta paylaşt"/></a> </li>
<li><a href=http://twitter.com/home?status=BAŞLIK - BAĞLANTI LİNKİ"><img src="twitter.png" alt="Twitter'da paylaş"/></a></li>
</ul>
</div>
Paylaşım bağlantılarının önizlemesini görüntülemek için buraya, gerekli dosyaları indirmek içinse buraya tıklayın.