Show the view count of visitors in each post of our blog with the help of Firebase.
Required:
- Blogger
- Google Analytics Account
- Firebase Account
First go to firebase, create new project with your blog name.
- Create Project Name
- Continue
- Configure Google Analytics
Enable the services given below, in firebase.
- Hosting.
- Add App
- Realtime Database
After all this, click on General option, under the project setting. From here you copy the Firebase SDK snippet. Format: config. After copying the code, replace with some part of the code below.
<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://YOUR-APP-NAME.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>
After all, Lastly, you have to go to your blogger code editor and make some settings as per the information given below. Find the given code by pressing CTRL + F in the keyboard.
<div class='post-snip'>
This code indicates the head of the blog post, it may also be different in your template.It would be nice if you find it carefully. And just below the code mentioned above, paste the code mentioned.
<i class='fa fa-eye' style='color: green'/> <a expr:name='data:post.id'/> Views
After saving the template, go to any post on your blog, check the work done, it is working well.