Wednesday, 3 June 2015

Post View Counter for Blog and Website

tips4tricx
Ever wonder how many people visit your website? If you are an administrator of a site then I'm sure you are. Now seriously if you are looking for a post view counter or tracker, then you've definitely come to the right place. Post view counter or tracker is a widget or plugin that counts (and also displays) how many times a posts has been viewed. This helps blog author (and also readers) to know how much popular that post is. But to create this type of plugin, you have to know php, database, javascript etc, which is not so easy. However I've found a website, Firebase that also does the same job. You can create free accounts at Firebase and you can use their scripts to install post view counter plugin in your blog. It doesn't matter which blogging platform you're using because Firebase works with all major blogging platforms and websites.

This is my second post about webpage counter. My previous one was about Download Counter for Blog and Website where I've discussed how Firebase actually works. You can check that out from here in case you're interested.

Let's go then.
Before you make any changes in your blog template, backup your template in case something goes wrong.
View Demo
Step 1: Create Your Firebase Account


Signup for a free account at Firebase. Follow the steps carefully given at Firebase to activate your account.


Step 2: Create Your Database At Firebase

Firebase offers you to create 10 unique databases. In our case, only one database is required. So create one database at Firebase to store your post view stats. Give your database a unique name (for e.g. I named my database as 'tips4tricx-demo-view-stat') and hit CREATE.


Note down the url of your database. For e.g., in my case that url will be https://tips4tricx-demo-view-stat.firebaseio.com/.


Step 3: Install Post View Counter Plugin

As I've already discussed how Firebase works in my previous post, so right now I'm going straight to the instruction for installing post view counter for your blog/website.
  1. Go to 'Template' and click 'Edit HTML'.
    tips4tricx
  1. Make sure whether jQuery library is already included in your blog or not. If not, search for (Ctrl+F) <head> and write down the following line just below <head>.
    1
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    1. Search for (
    Ctrl
    1. +
    F
    1. </head> and paste the following code before </head>.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
    <script type="text/javascript">
      // <![CDATA[
      $(function(){
        $('.post').each(function(){
          var $this = $(this),
              $name = $this.find('a[name]').attr('name');
          var dataRef = new Firebase('YOUR DATABASE' + $name);
          dataRef.once('value',function(s){
            var data = s.val();
            if (data==null){
              data=1;
            } else if (window.location.pathname!='/'){
              data++;
            }
            dataRef.set(data);
            $this.find('.blganr-view_counter>span').removeClass('blganr-loading').html(data);
          });
        });  
      });
      //]]>
    </script>

    Or

     Update
    Recently I came to know about Firebase transaction() which is ideal one for counter. Unlike a normalset(), which just overwrites the data regardless of its previous value, transaction() is used to modify the existing value to a new value, ensuring there are no conflicts with other clients writing to the same location at the same time.
    Both above script and this script are working fine. You can use any one of them; although it is recommended to use this one :)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script><script type="text/javascript">  // <![CDATA[    $(function() {    $('.post').each(function(){      var $this = $(this),          $title = $this.find('h3.post-title').text().trim();      var dataRef = new Firebase('YOUR DATABASE' + $title);      dataRef.transaction(function(curr){        if (window.location.pathname!='/'){          return (curr||0) + 1;        } else {          return (curr||0);        }      }, function(e,c,s){        $this.find('.blganr-view_counter>span').removeClass('blganr-loading').html(s.val());      });    });  });  //]]></script>
    Be sure to replace YOUR DATABASE in the highlighted line with your actual database you've created in step 2.
  1. Search for (Ctrl+F) </b:skin> and paste the following code before </b:skin>.
  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /*--Post View Counter by tips4tricx--*/.blganr-view_counter {  font:18px PT Sans Narrow;  margin:0 10px 10px 10px; padding:8px 5px 8px 35px; float:right;  text-align:center;  box-shadow:0 0 2px #555;  background:#fff url('http://3.bp.blogspot.com/-L45u_pdvSsg/Umz1WLZEUSI/AAAAAAAAC2A/96QhAnVyq-I/s1600/post-views.png') 3px 50% no-repeat;  display:inline-block;  z-index:9999;  color:#444;}.blganr-loading {  background:url('http://3.bp.blogspot.com/-EERf4K_hjBg/UmzBza69BtI/AAAAAAAAC1Q/67AexTAsKJU/s1600/spinner.gif') 50% 50% no-repeat;  display:inline-block;  width:30px;  height:18px;  margin:0 0 -3px 0;}
  2. Search for (Ctrl+F) post-header. You will find the following code.
    1
    2
    3
    <div class='post-header'>  <div class='post-header-line-1'/></div>
    Now replace that <div class='post-header-line-1'/> with the following code.




    <div class='post-header-line-1'>
      <div class='blganr-view_counter'>    Post Views: <span class='blganr-loading'/>  </div></div>


I tried my best to keep things as simple as possible. Any type of question related to this will be appreciated.

Happy Blogging.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks