Download Counter Plugin for Blogs and Websites

If you are an administrator of a site that contains downloadable resources, then i am sure that you are looking for such widget or plugin that counts (and also displays) how many times an item has been downloaded from your site. This is necessary because this helps blog author (and also readers) to know how much popular that resource is. But if you are new in webpage design, then it might be a problem for you to create such a plugin, because to create this you have to know php, database, javascript etc. However i have found a website, Firebase that also does the same job. The best part is you can create free accounts at Firebase and you can use their scripts to install download counter plugin in your site, which is totally legal. Your download stats will be stored in your Firebase free accounts and can be displayed in your site if you want to. This download counter offered by Firebase works with all major blogging platforms and websites.
So let's start with Firebase..

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.

Step 1: Create your Firebase account

Signup for a free account at Firebase and follow the steps given at Firebase to activate your account.

Step 2: Create your database at Firebase

Right now Firebase offers you to create 10 separate databases which is more than enough. So create one database that stores your download stats. Give your database a name (for e.g. i named my database as 'bloganalyzer-down-stat') and hit CREATE. Be sure that all your Firebase database contains a unique name.

Note down the URL of your Firebase database. For example, in my case that URL will be https://bloganalyzer-down-stat.firebaseio.com/.

Step 3: Install download counter plugin

Now before i give you the entire script, i should tell you how Firebase works.

Installing Firebase

To get started with Firebase, you have to first install Firebase Javascript client. To install this, search for (

Ctrl

+

f

) </head> and paste the following script before </head>.

 <script type="text/javascript" src='https://cdn.firebase.com/v0/firebase.js'></script>

Making a directory or reference

You'll need a reference or a directory to access data from that directory. Firebase directories can be created using a URL that specifies which directory you want to access. To create this type of directory or reference, add the following line in your script.

<script type="text/javascript">
  new Firebase('https://bloganalyzer-down-stat.firebaseio.com/first-resource/link_1/');
</script>

Notice that bloganalyzer-down-stat.firebaseio.com/ is the main directory that i have created earlier and first-resource/link_1/ is the sub-directory which stores the download stat of the first link of first resource. Now to store the data of various links you have to create separate unique sub-directories, which can be created dynamically .

Writing Data

To write data in the directory you have just created, you have to use Firebase set() function. Say for e.g. if your Firebase directory is bloganalyzer-down-stat.firebaseio.com/first-resource/link_1/, then you have to use the following code to write data in that directory.

<script type="text/javascript">
  var DownDataRef = new Firebase('https://bloganalyzer-down-stat.firebaseio.com/first-resource/link_1/');
  DownDataRef.set('I love Blogging');
</script>

Reading Data

To read data from Firebase you have to use on() and val() functions. on() function tells Firebase to notify when new data arrives and val() function extracts the data from directory.

<script type="text/javascript">
  var DownDataRef = new Firebase('https://bloganalyzer-down-stat.firebaseio.com/first-resource/link_1/');
  DownDataRef.on('value', function (snapshot) { 
    var data = snapshot.val();
  });
</script>

Now it's time to give you the entire script and steps for installing download counter for your blog and website.

1. Go to 'Template' and click 'Edit HTML'.
   
2. If you are using old interface of blogger, make sure that 'Expand Widget Templates' is checked.
3. If jQuery library is already included in your blog, you can skip this step. Otherwise search for (
   Ctrl
   +
   f
   ) <head> and write down the following line just below <head>.

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

4. Search for (
   Ctrl
   +
   f
   ) </head> and paste the following code before </head>.

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
<!-- Download Counter by Bloganalyzer -->
<script type="text/javascript">
// <![CDATA[
 $(document).ready(function() {
  $('div.blganr-count-this').each(function() {
   var get_position = $(this);
   var get_id = get_position.attr('id');
   var dataRef = new Firebase('YOUR DATABASE' + get_id);
   dataRef.on('value', function (snapshot) {
    var data = snapshot.val();
    if (data == null) {
     data=0;
     dataRef.set(data);
    }
    get_position.find('span').removeClass('blganr-loading').html(data);
   });
   get_position.children('a').click(function() {
    var data_w = parseInt($(this).siblings('div.blganr-download_counter').children('span').text());
    data_w++;
    dataRef.set(data_w);
   });
  });   
});
  //]]>
</script>

Make sure you replaced 'YOUR DATABASE' in the highlighted line with your database that you have created in step 2.
5. Now search for (
   Ctrl
   +
   f
   ) </b:skin> and paste the following code before </b:skin>.

/*-- Download Counter by Bloganalyzer -- */
div.blganr-count-this {
background:#bfbaff;
font-family:PT Sans Narrow;
margin:5px; padding:8px 0;
width:300px;
text-align:center;
border:3px solid #6f66ad;
}
div.blganr-count-this a {
text-decoration:none;
font-size:25px;
text-shadow:1px 1px 0px #eee;
}
div.blganr-download_counter {
font-size:17px;
margin:0 -7px; padding:3px 0;
box-shadow:0 0 2px #555;
width:314px;
background:#fff;
}
span.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;
}

Step 4: Displaying Download Counter

Now whenever you want to display download counter for a particular file, simply use the following code.

<div class="blganr-count-this" id="***"> 
 <a href="##">Download This</a> 
 <div class="blganr-download_counter">Downloaded <span class="blganr-loading"></span> times</div> 
</div>

Use a unique id for every file i.e. replace *** in the highlighted line with a unique name. Replace ## with your file link.
Happy Blogging.