Best Educational Blog...

Post views counter widget for blogger

Introduction

Why need to add a post views counter on your blog if you already have one on your "Dashboard"? Its purpose is for our readers to see which of our posts are viewed mostly by others. It is also for us - admins, to monitor the post views in the front end of our blog and to know which of our posts get the attentions and interests of our readers. Blogger blogs can now easily add a counter of post views thanks to Firebase which provides FREE service for all! Follow the steps below to get it working!

Creating your Firebase Account

 Signup to Firebase
*You will be redirected to your dashboard once you successfully signed up

 Then, create your Firebase APP
*Don't forget to copy your Firebase App URL. Return to Blogger

Features

Minified Script
SEO friendly
Fully Customizable
Responsive

External Scripts

FontAwesome (?)
Jquery Library v1.2.3 or higher (?)

Live Demo

 Live Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
 Copy this code then paste it before <data:post.body/>
*or anywhere you'd like it to appear inside your Blog Post

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

CSS

No CSS Required.

Java Script

 Find (ctrl+f) </body>
 Copy the following code and paste it before </body>

<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://YOUR-APP-NAME.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>
 Save your Template

Final Words

There you have it! Until next time, happy blogging!Thanks for reading post.Page Source: Add Post Views Counter to Blogger | My Blogger Aide
Share on Google Plus

About Unknown

7 comments:

  1. Thanks for the informative and helpful post, obviously in your blog everything is good.. iphonexr cases

    ReplyDelete
  2. It is perfect time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or tips. Perhaps you could write next articles referring to this article. I want to read more things about it! Luxury wigs London

    ReplyDelete
  3. Wonderful blog post. This is absolute magic from you! I have never seen a more wonderful post than this one. You've really made my day today with this. I hope you keep this up! Dietitian

    ReplyDelete
  4. You completely match our expectation and the variety of our information. LED mini mirror

    ReplyDelete
  5. Great info! I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have. Enriching

    ReplyDelete
  6. I love the way you write and share your niche! Very interesting and different! Keep it coming! muelhens lemon scented tissues

    ReplyDelete
  7. Thank you for shearing post amazing this is post very useful for me.
    New Media
    New Media
    New Media
    New Media
    New Media
    New Media
    New Media
    New Media

    ReplyDelete