How To Add Post Views Counter Plugin in Blogger?

I am happy to inform you all that now you can show post views counts below your post title in blogger blog. You have no need of any server or server code to display your post page views. Recently I got aware with a free service called FireBase. By using this free service you can easily create a dynamic and data-driven plugins for your blogger blog and you have no need of any development skill. Firebase was launched in April 2012. Here you can get 10GB Free bandwidth and 5GB Free storage which is really more than enough for bloggers. In this article you will learn how to add a dynamic page views counter for individual posts in blogger. Before going to the tutorial you may be interested to see a demo!

Demo

Note: This plugin will only increment its count value when you visit individual posts but not by just refreshing your blog homepage.

Create FireBase Account

To use this plugin and to store your database of your post views data you must need to sign up for a free account at Firebase.

• Signup at Firebase

Once you fill all the details and create your account, then you need to create your first firebase database.

Create a Firebase Database

1. At the bottom right side of your account page, you will get a following create box.

2. Insert your blog name in the text field. In my case I inserted bloggertipstricks.

3. Press create button. Once you press the button your firebase will be create as:

• firebaseio.com.

4. Note down your firebase url in any text editor like notepad. We will need it later in our tutorial.

Installing Post views Plugin

1. Go to your blogger account then choose Template


2. Backup your template before doing any changes.


3. Click Edit HTML ---> Proceed ---> Expand Widget Templates.


4. Press Ctrl+F and find ]]></b:skin>


5. Just above it, paste the following css code.

/*-------- Post Views  ----------*/
#views-container {
width: 75px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhiYzy2qSNyyuX69GvwYEwC2em7h6OLRPUWsqrNuda53v4eIh_ndceyNzb1_3N66X3KEfDeQJUu3OkS0S3olTjld_S-9uts0u3wGn4mgMsb43IbDeROFF4kWqDH2i15OgIX6YoeOz7zO_/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFMW2PVqEpuS_7n_HVzGYRs0Zivoaq7dUnsOPA9FcPVrOeTyOhUQF4PKkHR1PCeWwcW74wc0h5blfJtDUx4EzOhySzAmK77Fl21HCVeOl52VF_tEu5_-HIkZlv3AxwqEwJbbzvSjjxPxi/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

Customization: 

• Edit #EE5D06 to change the text color of the numeric count.


• Replace right with left to change the plugin alignment.

6. Now search for </body> and paste the following code just above/before it.

<!-- Post Views Script by MBT -->
<script type='text/javascript'>
    window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<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;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://Road2-Blogger.Blogspot.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.removeClass(&#39;mbtloading&#39;).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>

Change the highlighted orange line with your firebase URL which you copied instep 4.

7. Now find this code:

<data:post.body/>

Just above this paste the following code

<!-- Post Views Counter by http://road2-blogger.blogspot.com/-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>

Replace Views: with any text you want to use.

8. Now paste the below code just after <head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>



9. Press save template button.

Congratulation! You have successfully installed the post views counter for your blog.

Share on Facebook Share on Twitter Share on Google Plus

About Unknown