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.

Ön İzleme

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ı?
  1. Elinize , Emeğinize sağlık hocam, blog dünyasında bir ilke imza attınız.

    YanıtlaSil
  2. Süper bir paylaşım harikasınız hocam

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

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

    YanıtlaSil
  5. 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.

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

      Sil
  6. 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.

    YanıtlaSil
  7. Bu eklentiyi ana sayfa yayın altında nasıl gösterebiliriz.

    YanıtlaSil
    Yanıtlar
    1. Merhaba, öncelikle blog sitenizin kodlarını incelemek gerekiyor. Blog tema kodlarının bir birinden farklı olmasından dolayı bu sorunuza cevap vermek yeterli olmayacaktır.

      Sil