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

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.

Ön İzleme