Kaç zamandır aklımdaydı siteme sosyal imleme mekanızması eklemek. Öcelikle sosyal imleme nedemek kabaca bunu anlatmaya çalışayım. Beğendiğiniz bir siteyi veya bir yazıyı tekrar lazım olur diye tarayıcılarımızda bulunan Sık Kullanılanlar kısmına ekliyoruz ve ne hikmetse bilgisayarımıza format atarken genellikle yedeklemeyi unutuyoruz ve hepsi birden siliniyor. Yada kendi bilgisayarımız başında değilken sık kullanılanlara erişmemiz mümkün değildir. Bağlantılarımızı saklayıp insanlarla paylaşabileceğimiz sitelere, sosyal imleme sitesi diyoruz. Özellikle Facebook gibi sosyal ağların popüler olduğu günümüzde bu ağlarda haber, resim ve video paylaşımlarıda epeyce popüler. Şimdi düşünelim kullanıcı sitemizdeki bir yazıyı çok beğendi ve Facebook’ da bunu arkadaşlarıyla paylaşmak istiyor. Eğer sitemizde paylaşım için herhangi bir bilgi yoksa %99 kullanıcı paylaşımdan vazgeçiyor, varsa bir tıkla işini hallediyor ve sitemizin ciddi anlamda ziyaretçi kazanmasını sağlıyor. Uzun lafın kısası Web 2.0 ile birlikte popüler olan bu paylaşım tarzı bize güzel şeyler sunuyor. Geçelim mekanızmamızı yapma işlemine;
Öncelikle JavaScript ile birlikte küçük bir yapı kuracağız, amacımız yeni bir imleme sitesi eklerken çıkarırken kolaylık olsun. Kodlarda anlatılacak çok fazla bir şey bulunmuyor, baktığınızda basit bir yapı olduğunu zaten anlayacaksınız.
Farklı bir imleme sitesi eklemek isterseniz, if bloklarına bir yenisini ekleyecek olduğunuz sitenin adresi ve değişken kısımları şeklinde ekleyebilirsiniz. Buradan bitmiş halini indirebilir, demosu içinse bu yazının altına bakabilirsiniz ;) bu arada dosyaları indirdiğinizde diğer sosyal paylaşım sitelerinin logolarını kendimce bonus olarak sizlere sunuyorum :)
function sosyalAdres(gelen)
{
var baslik = encodeURI('Eklencek yazının başlığı');
var adres = escape('Eklenecek yazının içeriği');
var pencereAyar = "height=700,width=800,titlebar=no,status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=1";
var sAdres='';
if(gelen==1)
sAdres="http://www.facebook.com/sharer.php?title=" + baslik + "&u=" + adres;
if(gelen==2)
sAdres="http://www.google.com/bookmarks/mark?op=edit&bkmk=" + adres+ "&title=" + baslik;
if(gelen==3)
sAdres="http://digg.com/submit?url="+adres+"&title=" + baslik;
if(gelen==4)
sAdres="http://del.icio.us/post?url="+adres+"&title=" + baslik;
if(gelen==5)
sAdres="http://reddit.com/submit?url="+adres+"&title=" + baslik;
window.open(sAdres.replace(/amp;/gi,''),null,pencereAyar);
}
Daha Sonrasında, güzel bir görüntü için style kodlarımızı ve işin görüntü olan kısmını ekliyoruz.
.sosyal{background-color:#f5f5f5;border-bottom:1px solid #ededed;width:715px;padding:5px 0 0 5px;cursor:default;margin-bottom:5px}
.sosyal span{font-family:Helvetica,sans-serif;color:#0063dd;font-size:14px;font-weight:bold}
.sosyal:hover {border-bottom:1px solid #c0c0c0}
.sosyal img{margin-left:20px;cursor:pointer;}
.sosyal img:hover{margin-bottom:-5px}
[/html]
<div class="sosyal">
<span>Bu yazıyı paylaşın;</span>
<img border="0" src="img/sosyalButton/google.png" alt="bu bağlantıyı Google' e eklemek için tıklayın" onclick="sosyalAdres(2)" />
<img border="0" src="img/sosyalButton/facebook.png" alt="bu bağlantıyı Facebook' e eklemek için tıklayın" onclick="sosyalAdres(1)" />
<img border="0" src="img/sosyalButton/reddit.png" alt="bu bağlantıyı Reddit' e eklemek için tıklayın" onclick="sosyalAdres(5)" />
<img border="0" src="img/sosyalButton/digg.png" alt="bu bağlantıyı Digg' e eklemek için tıklayın" onclick="sosyalAdres(3)" />
<img border="0" src="img/sosyalButton/delicious.png" alt="bu bağlantıyı Delicious' e eklemek için tıklayın" onclick="sosyalAdres(4)" />
</div>
Volkan arkadaşıma teşşekür ediyor ve ekliyorum.
Bu hizmeti Türkçe olarak EkleBunu sitesinden edinebilirsiniz.