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 ]]></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 Java Script Kodunu yine kontrol panelinden "Tema > HTML'yi Düzenle" kısmına girerek </body> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz </body> tagının bir satır üzerine ekleyin ve Şablonu Kaydet butona basın.
Java Script Kodu
<script src = 'https://cdn.firebase.com/v0/firebase.js' type = 'text/javascript'/>
<script> $.each($('a[name]'), function (i, e) {
var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("https://bloggereklentileri-b87be.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 Yayınla butonuna tıklayın.
Java Script 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 Java Script 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.
Blog Yayınları İçin İzleme Sayacı Eklentisi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.
Takip Et
Sosyal Medya kanallarımızdan bizi takip ederek paylaşımlarımızdan haberda olun.