Cuma, Ağustos 7
Shadow

Google Buzz Sayaçlı Paylaş Butonu | Buzz it | Sitelere / Blogger ve WordPress’e Koyun

Demosunu Veteknoloji.com’da uyguladığım stabil çalışan ’ın (Buzz it) sayaçlı buzz butonunu özel paylaşıyorum. İster özel sitesi olanlar isterse wordpress, 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’ 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.

<=”text/javascript” src=”http://bit.ly/javascript-api.js?version=latest&login=kullaniciadiniz&apiKey=apikeyiniz”></script>

2. Adım

Aşağıdaki stil dosyalarını sayfanızın <head> ile </head> arası ekliyoruz.

<=’text/css’>
. {
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>

3. Adım

Sayfanızda buzz butonunu göstereceğiniz aşağıdaki kodu ekliyorsunuz

<=’btn’>
<a href=’google_buzz_paylas_linkiniz’ class=”buzzbutton”></a>
</div>

Kesinlikle değerini kaldırmıyorsunuz. en önemli yere geldik. Özel kodlamalarda google buzz paylaş linkide farklı oluyor. İster var olan içerisinde yeni popup açtırır veya _blank ile yeni açtırarak buzz paylaşım penceresini kullanıcılara gösterebilirsiniz.

Veteknoloji.com’da kullandığımız paylaşım butonunun mantığı şu şekildir.

<div class=’btn’>
<a
class=”buzzbutton” href=’http://www.google.com/reader/link?url=http://www.veteknoloji.com/<?= $haberlink ?>&amp;title=<?php echo $title; ?>&amp;srcURL=http://www.veteknoloji.com/” target=”_blank” rel=”nofollow external”‘ hspace=”5″ align=”left”  target=”_blank”></a>
</div>

Yani Özel Kodlamaları Kullanan Kişiler şunları editleyecek

<div class=’btn’>
<a
class=”buzzbutton” href=’http://www.google.com/reader/link?url=http://www.veteknoloji.com/<?= $haberlink ?>&amp;title=<?php echo $title; ?>&amp;srcURL=http://www.siteadi.com/” target=”_blank” rel=”nofollow external”‘ hspace=”5″ align=”left”  target=”_blank”></a>
</div>

http://www.veteknoloji.com/<?= $haberlink ?>

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


<a expr:href=’&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ‘><img src=”http://4.bp.blogspot.com/_FX3RmPElUpc/S3VkcrkMk4I/AAAAAAAAAzc/XkmkEsom8OQ/s144/googlebuzz.png” /></a>


Klasik Blogger için

<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>

WordPress için

<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/#ixzz0hYslKnzn

veya WPBUZZER pluginini kullanın.


Son olarak sayfanızın </body> tagından hemen önce aşağıdaki script dosyasını ekliyorsunuz.


<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>

kaynak www.veteknoloji.com

2 Comments

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.