Blogger Sabit Sayfalar ve Yayınlar İçin İzleme Sayacı Eklentisi

26.4.17
Blogger Count Views Plugin

Ziyaretçilerimizden Blogger yayın izleme sayacı ile ilgili yoğun talep aldık. Tabii ki Blogger Eklentileri yöneticisi olarak bu talebi karşılamak görevimiz ve blogumuz için de bir onurdur.

Bu yazımızda blog sitesine yayın izleme sayacı ekleme ve uygulama oluşturma ile ilgili ipuçları paylaşacağım. Bu uygulamanın amacı, blog okuyucularının blogda bulunan yazı veya yayınların ziyaretçiler tarafından ne kadar okunduğu, tıklandığı yada görüntülendiği hakkında bilgi vermesidir. Ayrıca blog yöneticilerinin, bu uygulama ile ziyaretçilerin hangi yayınlara ilgi gösterdiğini ve ilgi alanları hakkında da bilgi sahibi olmasını sağlayacaktır.

Blogger İçin Yayın İzleme Sayacı Nasıl Çalışır?

Blogger blogspot sitelerinde bulunan sabit sayfalar ve yayınlar için tek tek görüntülemelerini veya tıklanmalarını izleme sayacı ile takip edebileceksiniz. Blog yayın izleme sayacı aslında bir eklenti değil Google Firebase ile oluşturduğumuz bir uygulamadır. Kurulumu ve kullanımı çok basit olan bu uygulama sizin de oluşturabileceğiniz Firebase projesidir.

Blogger Sayfa ve Yayın İzleme Sayacı Uygulaması Nasıl Eklenir?


Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın. Şimdi izleme sayacını eklemek için aşağıdaki adımları takip edin.

Birinci adım: CTRL+F yardımıyla kodunu bulun ve aşağıdaki HTML kodu kopyalayıp <data:post.body/> kodunun bir satır üzerine ekleyin.

HTML
<span><a expr:name='data:post.id'/><span class='postviews'><span class='eye'/> <span id='postviews'/> Görüntüleme</span></span>

Blogunuzda <data:post.body/> kodu birden fazla olabilir, bu nedenle bu kodların üzerine tek tek ekleyerek deneyebilirsiniz.

İkinci adım: Aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

CSS
.postviews {
    float: right;
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 12px;
    color: gray;
    border-radius: 2px
}
.postviews .eye {
    top: 1px;
    display: inline-grid;
    opacity: .54;
    background: gray;
    margin: 0 3px 0 0;
    width: 13px;
    height: 13px;
    border: solid 1px #666;
    border-radius: 75% 15%;
    position: relative;
    transform: rotate(45deg)
}
.postviews .eye:before {
    background: #555;
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    border: solid 1px #fff;
    border-radius: 50%;
    left: 3px;
    top: 3px
}

Üçüncü adım: Aşağıdaki javaScript kodlarını blogunuzda bulunan </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

Javascript
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script> 
$.each($(&#39;a[name]&#39;), function(i, e) { 
var elem = $(e).parent().find(&#39;#postviews&#39;); 
var blogStats = new Firebase(&quot;https://bloggereklentileri-b87be.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
blogStats.once(&#39;value&#39;, function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr(&#39;name&#39;); 
isnew = true; 
} 
elem.text(data.value); 
data.value++; 
if(window.location.pathname!=&#39;/&#39;) 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>

Uygulamayı kontrol etmek için blogunuzda herhangi bir sayfayı ziyaret edin.

Blogger İçin Firebase Hesabınızı Oluşturun

Firebase sayfasına giderek hesap oluşturun veya varolan hesabınız ile giriş yapın. Hesabınızı oluşturduktan sonra ana sayfada bulunan Proje ekleye tıklayın. Açılan pencerede Proje adı ile Ülke/bölge ekleyin ve butona tıklayın. Sol menüde yer alan Database ardından üst araç çubuğunda bulunan Kurallar'a tıklayın. Kod aynasında aşağıdaki gibi bir kod görünecektir.

Örnek Kod
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Yukarıdaki kodu aşağıdaki kod ile değiştirin ve Yayınla butonuna tıklayın.

Javascript
// These rules give anyone, even people who are not users of your app,
// read and write access to your database
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Sol menüde üst tarafta bulunan Ayarlar (icon) > Proje ayarlarına tıklayın. Ve oluşturmuş olduğunuz Proje kimliğinizi göreceksiniz.

Oluşturduğunuz Proje kimliğini yukarıdaki javaScript kodu içerisinde mavi renk ile işaretlenmiş olan yere ekleyin. Böylece blogunuzun izleme sayacı için kendi Proje kimliğinizi oluşturmuş oldunuz.

Blog Yayın İzleme Sayacı İle İlgili Kısa Bilgiler

Blog yayın izleme sayacını blogunuza eklediğinizde sayaç sıfırdan başlayacaktır, bunun blogunuza herhangi zararı yoktur.

Kurulumu yaptıktan sonra Proje kimliği değişikliği veya yapacağınız diğer değişiklikler sayacı sıfırlacaktır.

Blog yayın izleme sayacı ile ilgili bilgileri sizlerle paylaştık, yeni bir blog eklentisi veya projesi için blogumuza abone olun.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

32 yorum

Elinize , Emeğinize sağlık hocam, blog dünyasında bir ilke imza attınız.

Cevap

Süper bir paylaşım harikasınız hocam

Cevap

Gerçekten Süper olmuş. ellerimize sağlık,hocam reklamı hakettiniz.Sayenizde yani açıcağım kişisel blog sitesi şenlenicek.

Cevap

Teşekkür ederim Turhan bey

Cevap
Bu yorum yazar tarafından silindi.

Bu Javascript içinde kod da sizin sitenizin ismi yazıyor kodu ekledikten sonra benim sitemdeki ziyaretciler sizin siteye yönlendirme olayı olmaz demi ?

Cevap

Hayır, herhangi bir yönlendirme söz konusu değil.

Cevap

Eyvallah hocam. Süper oldu

Cevap

Eklentiyi Denemiştim Ama Bir Göstergesi Olmadı

Cevap

Merhaba, gösterge dediğiniz icon mu?

Cevap

Bu eklenti iconmu bilemiyorum ekledigin zaman ortada bise yok

Ama video test edilmiş var ise link yollayın ordan inceleyim
Tesk.

Cevap

Güzel olmaya güzel ama eksik sayıyor. Blogger'ın sayacında 2000 görüntülenme olan yazıma 155 diyor

Cevap

Sizin daha önceden paylaştığınız yayın için görüntüleme sayısını yayın tarihi itibariyle göstermez. Eklentiyi eklediğiniz andan itibaren çalışmaya başlar.

Cevap

Hocam onu anladım. Ama yeni paylaştığım yayınlarda da aynı durum var. Bloggerda 100 küsür ama sayaç 12 filan.

Cevap

Sayfa okuma süresi oldu ama bu calismadi.birbirleriyle yanyana olmasi lazimdi ama maalesef bu calismadi.

Cevap

Bu sorunu çözdüğünüzü düşünüyorum.

Cevap

GÜZEL PAYLAŞIM
http://zumruduankaestetik.blogspot.com.tr/

Cevap

Çok güzel özellik bloguma ekledim teşekkürler !
www.jdsezer.blogspot.com.tr

Cevap

Rica ederim

Cevap

Logo çıkıyor ama kaç kişinin görüntülediğini göstermiyor. http://wmdost2.blogspot.com.tr/2017/05/asdadsad.html uyuz oldum .. nasıl yapacaz acaba.

Cevap

Blogumuza abone olmanızı da bekliyoruz.

Cevap

Yalnız eklenti eklendikten sonra 0'dan başlıyor bu blogunuz için sorun oluşturmaz.

Cevap

Hocam hic goruntuleme gostermio ki linkten bakarsaniz ne demek istedimi anlarsınz

Cevap

harika olmuş gerçekten heryerde aradım bulamadım bir tane bile. çok profesyonel çalışıyorsunuz elinize sağlık tüm çalışmalarınız mükemmel. takipteyiz

Cevap

Kodları yanlış ekliyorsun @Anonim Yazar Bende sıkıntısız çalışıyor www.jdsezer.blogspot.com @Blogger Eklentileri

Cevap

Teşekkürler

Cevap

Merhaba, paylaştığım kodları değişiklik yapmadan olduğu gibi ekleyin ve kontrol edin.

Cevap

Şuan masaüstü olmadığı için telefondan bakıyorum, js kodlarını body kapanış etiketinin üzerine eklediniz mi? temadan da kaynaklanabilir. Yarın sabah kontrol edip dönüş yaparım size.

Cevap

Teşekkürler, yeni eklentiler daha da güzel olacak.

Cevap

Database'den sonra kurallar sekmesine ulaşamadım.
Ondan sonra yapılması gerekenleri yapamadığım için sadece ikon göründü fakat görüntülenme sayısı görünmedi.

Bu sorunu kelime okunma sayısı blogunda yazmıştım.

Teşekkürler.

Cevap

Paylaşmış olduğum kodları doğrudan ekleseniz bile eklenti çalışır.

Cevap

Benim bu konuda 2 tane sorunum oluştu.

1 hem kelime sayısı ve okunma süresi, hemde görüntülenme süresi mobil sürümde görünüyor, masaüstü sürümde görünmüyor.
2 Mobil sürümde görünen görüntülenme çerçevesi görünüyor fakat sayı görünmüyor.

Bunlar için ne yapabilirim.

Teşekkür ederim.

Cevap