Demosunu Veteknoloji.com'da uyguladığım gayet stabil çalışan Google'ın (Buzz it) sayaçlı buzz butonunu özel paylaşıyorum. İster özel sitesi olanlar isterse wordpress, blogger ve blog kullananlar bu facebook paylaş butonuna benzer buzz butonunu web sitelerine koyabilecekler.
Çalışma mantığı şu şekildedir. Bit.ly adındaki url kısaltıcı servisi kullanan buton her tıklamada görsel sayacı arttırıyor. Api'leri kullanan buton bit.ly'den aldığınız api ile çalışır.
1. Adım
Bit.ly adresinden yeni bir hesap açıp kendimize bit.ly api key alıyoruz. sonra kullanıcı adı ve apiyi gerekli gereklere yazarak sayfamızın <head> tagından sonra hemen ekliyoruz.
HTML:
<script type="text/javascript" src="http://bit.ly/javascript-api.js?version=latest&login=kullaniciadiniz&apiKey=apikeyiniz"></script>Aşağıdaki stil dosyalarını sayfanızın <head> ile </head> arası ekliyoruz.
HTML:
<style type='text/css'>
.btn {
background:url("http://www.veteknoloji.com/images/buzz-button.jpg") no-repeat center center;
width:50px;
height:58px;
position:relative;
text-align:center;
}
.btn a {
position:absolute;
bottom:0;
left:0;
display:block;
height:17px;
width:50px;
}
.btn span {
position:absolute;
right:0;
left:0;
top:5px;
font-size:14px;
font-weight:bold;
letter-spacing:0.1em;
padding:3px;
color:#ffffff;
}
</style>Sayfanızda buzz butonunu göstereceğiniz yere aşağıdaki kodu ekliyorsunuz
HTML:
<div class='btn'>
<a href='google_buzz_paylas_linkiniz' class="buzzbutton"></a>
</div>Veteknoloji.com'da kullandığımız paylaşım butonunun mantığı şu şekildir.
HTML:
<div class='btn'>
<a
class="buzzbutton" href='http://www.google.com/reader/link?url=http://www.veteknoloji.com/<?= $haberlink ?>&title=<?php echo $title; ?>&srcURL=http://www.veteknoloji.com/" target="_blank" rel="nofollow external"' hspace="5" align="left" target="_blank"></a>
</div>
PHP:
<div class='btn'>
<a
class="buzzbutton" href='http://www.google.com/reader/link?url=http://www.veteknoloji.com/<?= $haberlink ?>&title=<?php echo $title; ?>&srcURL=http://www.siteadi.com/" target="_blank" rel="nofollow external"' hspace="5" align="left" target="_blank"></a>
</div>Buraya sitenizin php olarak bulunduğu sayfanın linkinin değerini vereceksiniz.
<?php echo $title; ?>
Buraya genelde aynıdır ama farklı bir fonksiyon veya değer verilmiş ise sayfanızın title değerini veriyorsunuz.
http://www.siteadi.com/
Burayada site adinizi yaziyorsunuz.
Blogger Kullananlar İçin
Yeni Blogger için
PHP:
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcURL=" + data:blog.homepageUrl '><img src="http://4.bp.blogspot.com/_FX3RmPElUpc/S3VkcrkMk4I/AAAAAAAAAzc/XkmkEsom8OQ/s144/googlebuzz.png" /></a>Klasik Blogger için
PHP:
<a href='http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcURL=YOURBLOG.blogspot.com'><img src="http://4.bp.blogspot.com/_FX3RmPElUpc/S3VkcrkMk4I/AAAAAAAAAzc/XkmkEsom8OQ/s144/googlebuzz.png" /></a>
PHP:
<a
target="_blank" href="http://www.google.com/reader/link?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&srcURL=<?php bloginfo('url'); ?>" ><img
src="http://img2.pict.com/15/da/3e/2809374/0/googlebuzz.png" width="50" height="58" /></a>
Read more: http://jaxov.com/2010/02/add-buzz-this-button-count-wordpress/#ixzz0hYslKnznSon olarak sayfanızın </body> tagından hemen önce aşağıdaki script dosyasını ekliyorsunuz.
HTML:
<script type='text/javascript'>
/***
veteknoloji buzz buton cybokron
***/
//get all anchor tags with buzzbutton as the class
urlContainer = {};
hashContainer = {};
function getAllButtons() {
anchrs = document.getElementsByTagName("a");
btns = new Array();
for(i=0; i<anchrs.length; i++) {
if(anchrs[i].className == "buzzbutton") {
btns.push(anchrs[i]);
}
}
return btns;
}
var btns = getAllButtons();
for(i=0;i<btns.length;i++) {
long_url = btns[i].href;
urlContainer[long_url] = i;
BitlyClient.shorten(long_url, 'replace_link');
}
function replace_link(data) {
for (var r in data.results) {
doc = data.results[r];
break;
}
short_url = doc['shortUrl'];
hash = doc['hash'];
hashContainer[hash] = urlContainer[r];
btns[urlContainer[r]].href = "http://bit.ly/"+hash;
BitlyClient.stats(hash, 'getStat');
}
function getStat(data) {
var clicks = data.results.clicks;
var hash = data.results.hash;
span = document.createElement("span");
span.innerHTML = clicks;
btns[hashContainer[hash]].parentNode.insertBefore(span, btns[hashContainer[hash]]);
}
</script>