Bu yazımız bir önceki yazımızın devamı olup çok fazla kafa karışıklığına sebebiyet vermemek için ayrıca yazmayı tercih ettim. Böylece hem kafanız karışmayacak hem de istediğiniz eklentiyi ekleyip eklememek tercihinize kalacak.
Blog Yayınları İçin İzleme Sayacı Eklentisi ile ilgili makale paylaşacağım. Bu eklentinin amacı sayfanızda bulunan Metin, Yazı ve Makalelerin ziyaretçiler tarafından ne kadar okunduğu, tıklandığı ya da görüntülendiği hakkında blog yöneticileri başta olmak üzere ziyaretçilere de bilgi vermesidir.
Blogger Yayınları İçin İzleme Sayacı Eklentisi Nasıl Çalışır?
Blog sayfanızda bulunan sabit sayfalar ve yayınların her birini tek tek görüntülenmelerini veya tıklanmalarını izleme sayacı ile takip edebileceksiniz. Blogger yayın izleme sayacı Google Firebase ile oluşturulan bir uygulamadır.Blogger Yayınları İçin İzleme Sayacı Nasıl Eklenir?
Blogger hesabınıza giriş yapın ve bloğunuzun kontrol panelinden Tema > HTML'yi Düzenle alanına tıklayarak Kod Editörü sayfasını açın. Şimdi izleme sayacını eklemek için aşağıdaki adımları takip edin.1. Adım : Blog sayfanızda yer alan Metin, Yazı veya Makalelere Tahmini Okuma Süresi ve Toplam Kelime Sayısı görüntülüme HTML Kodunu bloğunuzun <data:post.body/> kodunun bir satır üzerine ekleyin.
NOT: Blogunuzda <data:post.body/> kodu birden fazla bulunabilir, bu yüzden bu kodların üzerine tek tek ekleyerek deneme yanılma yöntemi ile doğru koda ulaşabilirsiniz.
HTML Kodu
<span><a expr:name='data:post.id'/>
<span class='postviews'>
<span class='eye'/>
<span id='postviews'/> Görüntüleme
</span>
</span>2. Adım : Aşağıda vermiş olduğum CSS Kodunu kontrol panelinden Tema > HTML'yi Düzenle kısmına girerek açılan Kod Editöründe ]]></b:skin> tagını ya da </style> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz ]]></b:skin> tagının ya da </style> tagının bir satır üzerine ekleyin.
CSS Kodu
.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
}
3. Adım : Aşağıdaki JavaScript Kodunu yine kontrol panelinden Tema > HTML'yi Düzenle kısmına girerek yine açılan Kod Editöründe </body> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz </body> tagının bir satır üzerine ekleyin ve Temayı Kaydet butona basın.
JavaScript Kodu
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("https://bloggelistiricim-ed499.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', 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('name');
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
Şablon kaydedildikten sonra eklentiyi test etmek için Bloğunuzun herhangi bir sayfasını kontrol edebilirsiniz.
Blogger İçin Firebase Hesabınızı Oluşturun
https://firebase.google.com adresini ziyaret ederek bir tane Firebase hesabı oluşturun veya var olan Google hesabınız ile giriş yapın.Sonrasında şu adımları izleyin.
- Hesabınıza giriş yaptıktan sonra açılan sayfada Get Started butonuna tıklayın.
- Ardından açılan ekrandan Proje Oluştur u seçin.
- Proje Adınızı girin ve Firebase Kullanım Şartlarını kabul edin ve Devam butonuna basın.
- Google Analytics’i etkinleştirin ve Devam butonuna basın.
- Hesap Seçin alanına tıklayarak Google Analytics’i yapılandırmak için Google Hesabınızı seçin ve Proje Oluştur butonuna tıklayın.
- Projenin hazırlanmasını bekleyin. Proje hazırlandıktan sonra Devam butonuna basın.
- Sol kısımda Geliştirme > Database yolunu takip edin ve Veritabanı Oluştur butonuna basın.
- Üretim modunda başlatma seçili olacak şekilde Sonraki butonuna tıklayın.
- Son olarak Bitti butonuna basın.
Örnek Kodlama
{
//Visit https://firebase.google.com/docs/database/security to learn more about security rules
"rules": {
".read": false,
".write": false
}
}
Yukarıdaki kodu aşağıdaki kod ile değiştirin ve butonuna tıklayın.
JavaScript Kodu
{
//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 > Proje Ayarlarına tıklayın, orada 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 bloğunuzun 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ı bloğunuza eklediğinizde sayaç sıfırdan başlayacaktır, bunun bloğunuza 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ırlayacaktır.
