Download counter : A Plugin for blogs!

This is the first plugin of its kind created for websites which share downloadable resources. The plugin amazingly works with all major blogging platforms like wordpress and blogger blogs. It can even be used in static Sites or any CMS you may be using. This tool will count and display download stats whenever a visitor downloads a resource form your site. The data is stored at your firebase free account. Luckily we are amongst very few who have started developing tools using the newly introduced Firebase system that allows developers to create dynamic and data-driven tools without worrying about backend development. You do not need to worry about server code or managing databases, firebase does it all for free. All you need is to code some delicious scripts that does half the work.  This plugin is a custom alternative to Dstats download tracking service. Lets add this amazing tool to your blogger blogs!

Demo

The following link will take you to our first plugin created with Firebase.

• Read: Display Post Views in blogger

Note: If you have already followed our first tutorial on firebase then ignore steps marked as (*)

1. Create your Firebase Account *

To store your data for downloads, you will first sign up for a free account at Firebase.

• Click here to sign up now!

Fill up the easy steps sensibly and then once your account has been activated, you must create your first Firebase database as guided below in step#2.

2. Create a Firebase Database

Previously you could only create 2 firebases but now you can create a total 5! So create one for your download stats data

1. Towards the bottom right side of your account, you will find the following submit box.

  2.  Give your firebase a short name. In my case I named it mbtblogstats. This name will be used as your unique Identification.

  3.   Hit create and note down your firebase URL because we would need it later in this tutorial.

Installing Download Counter Plugin:

The steps below are for blogspot blogs. Wordpress users may simply note down the method and apply accordingly on their WP powered blogs.

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML
4. *Search for </b:skin>.  Click the black arrow to expand the code.

   5.  Paste the following Styles just above </b:skin>

/*----- download counter by MBT-----*/

.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwY7MDl-HIBOjsq4aTkmJxYMiSlpfayYo078yDtHKEIg-TAg1R9NXh7ggSH8Bs070c2exGNbDmOa5TTsXZTmjS1t_LNzF-JoM43GRal4ahVVmyU1Ci6bUoLuWaUiiKe5PpzJQicOIa9AJy/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}

.blog-stats {
color: #289728;
font: bold italic 18px georgia, arial;
float: right;
}

You can easily change the color and size of the Numeric Text count by editing   #289728

Tip: Use our color generator Tool to pick a color of your choice

6. Now search </body> and just above it paste the following script:

<!-- Download Counter by MBT starts-->

<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;[data-download-count=true]&#39;), function (i, e) {
    var elem = $(e).parent().find(&#39;#download-count&#39;).addClass(&#39;mbtloading&#39;);
    var id = $(e).closest(&#39;.post-body&#39;).siblings(&#39;a[name]&#39;).attr(&#39;name&#39;) + &quot;-&quot; + $(e).attr(&#39;id&#39;);
                          var downloadStats = new Firebase(&quot;https://mbtblogstats.firebaseio.com/downloads/id/&quot; + id);
    var data = {}, isnew = false;
    downloadStats.once(&#39;value&#39;, function (snapshot) {
        data = snapshot.val();
        if (data == null) {
            data = {};
            data.value = 0;
            data.url = window.location.href;
            data.id = id;
            isnew = true;
        }
        elem.removeClass(&#39;mbtloading&#39;).text(data.value);
    });
    $(e).click(function (e) {
        data.value++;
        if (isnew) downloadStats.set(data);
        else downloadStats.child(&#39;value&#39;).set(data.value);
    });
});
</script>

<!-- Download Counter by MBT Ends-->

Replace mbtblogstats with your Firebase name that you created in step#2.

     7.  * Now search for <head>   and paste the following JQuery library just below <head>

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

You may not add the jquery code if you have already linked to Jquery library in your blog.

      8.   Save your blog and you are all done with coding!

Displaying Download stats in Posts

Now whenever you wish to display download stats for a particular file. Simple link to your file using the code below:

<div style="width:120px;">
<a data-download-count="true" href="#">Download Now!</a>
<div class="blog-stats" id="download-count">
</div>
</div>

• Replace the # sign with your File link.
• You can write anything instead of Download Now! If your link is bigger in length then increase the width of the counter so that it shows the count in alignment.

Need Help?

I just hope this new plugin proves helpful for blogger users who are missing a database access. I am sure this plugin is the second best use of FireBase which is indeed a magic hub for developers. I would really appreciate you to use it for your projects. Please ask me any query you may have and feel free to share your precious views. Have fun buddies. Peace and blessings be upon you all always. :)

 

Note: All questions with links will be deleted no matter how important the question be. Avoid Spamming please.