Download Counter Plugin

6/25/2015
4 comments
Download Counter Plugin

If you're an administrator of a site that contains downloadable resources, then surely you're 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 it might be a problem for everybody to create such plugin, because to create this you have to know php, database, javascript etc. However I've found a website, Firebase that also does the same job. You can use their scripts to install download counter plugin in your site, which is totally legal and the best part is you can create your own free accounts at Firebase. Your download stats will be stored in your Firebase accounts and can be displayed in your site. This download counter offered by Firebase works with all major blogging platforms and websites.

Before you make any changes, it is recommended to backup your blog template to avoid template crush if anything goes wrong.
Step #1: Create your Firebase account

Signup with your google account for free and follow the steps provided by Firebase to activate your account.

Step #2: Create your database project at Firebase

Right now Firebase offers you to create 10 separate databases (which is more than enough). Create one database new project to store your download stats or import a google project if you already have one. Give your database project a name (for e.g. I named my database project as Bloganalyzer-demo) and hit CREATE NEW APP PROJECT. Your database project name should be unique. Make sure you go through all terms and conditions before move on.
Note down the url of your database. For e.g., my url will be https://bloganalyzer-demo.firebaseio.com/.
You'll be automatically redirected to project overview page; if not, click overview form left navigation menu and click Add Firebase to your web app. Alternatively you can select Authentication from left navigation menu and click WEB SETUP, placed at top right corner. Click COPY to copy entire script that pops up. Your script should look like following.

<script src="https://www.gstatic.com/firebasejs/3.6.5/firebase.js"></script>
<script>
// Initialize Firebase
  var config = {
    apiKey: "SomeRandomLettersAndNumbers",
    authDomain: "something.firebaseapp.com",
    databaseURL: "https://something.firebaseio.com",
    storageBucket: "something.appspot.com",
    messagingSenderId: "1234567890"
  };
  firebase.initializeApp(config);
  </script>
Step #3: Install Download Counter Plugin
  1. Sign in to Blogger account and go to Blogger dashboard.
  2. Click the arrow closer to Go to post list icon and select Template from the drop down menu. Alternately you can click Template from left navigation menu.
  3. Click Edit HTML.
  4. Skip this step if jQuery library already installed in your blog. 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>
  5. Search for (Ctrl+F) </head> and just before it, paste (Ctrl+V) those codes copied in step #2.
  6. Search for (Ctrl+F) </body>, copy (Ctrl+C) the following code and paste it (Ctrl+V) before </body>.
  7. <!-- Download Counter by Bloganalyzer -->
    <script type="text/javascript">
    //<![CDATA[  var dCounters = document.querySelectorAll('.counterCont');
      [].forEach.call(dCounters, function(dCounter){
        var el = dCounter.querySelector('a');
        var cId = dCounter.id;
        var dDatabase = firebase.database().ref('dCounter').child(cId);
      
        // get firebase data
        dDatabase.on('value', function(snap){
          var data = snap.val() || 0;
          dCounter.querySelector('span').innerHTML = data;
        });
        
        // set firebase data
        el.addEventListener('click', function(){
          dDatabase.transaction(function(dCount){
            return (dCount || 0) + 1;
          });
        });
      });
    //]]>
    </script>

    Replace --YOUR DATABASE-- text with your database that you've created in step #2. Leave the quotation around your database.

Step #4: Display Download Counter

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

<div class="counterCont" id="{$}">
  <a href="{#}">Download</a>
  <span class="counterStat">...</span>
</div>
Replace {$} with a unique identifier name for every download counter.
Replace {#} with your downloadable link.

Congratulation. You've successfully created download counter for you blog. You can leave it with browser default appearance or can customize its appearance to your own. I've designed few counters here to demonstrate how to do that. Once you get the idea, you can design your own counter. To apply these styles, copy (Ctrl+C) the associated code and paste it (Ctrl+V) before </b:skin>.


Download Counter #1

/*-- Download Counter by Bloganalyzer -- */
.counterCont {
  margin: 5px auto;
  margin-top: 60px;
  width: 150px;
  position: relative;
  text-align: center;
}
.counterCont a  {
  display: block;
  text-decoration: none;
  color: #f2f2f2;
  padding: 10px 0;
  background: #3498db;
  text-shadow: 0 1px 1px #555;
  box-shadow: inset 0 -1px 5px rgba(255, 255, 255, 0.3);
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 3px solid #2980b9;
  border-radius: 5px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.counterCont span {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  margin-bottom: 5px;
  padding: 10px 0;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  background: #efefef;
  color: #555;
  text-shadow: 0 1px 1px #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.counterCont span:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  border-top: 7px solid #efefef;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  margin-left: -7px;
  margin-top: -1px;
  height: 0;
  width: 0;
}

Download Counter #2

/*-- Download Counter by Bloganalyzer -- */
.counterCont {
  margin: 5px auto;
  width: 150px;
  position: relative;
  right: 15px;
  text-align: center;
}
.counterCont a  {
  display: block;
  text-decoration: none;
  color: #f2f2f2;
  padding: 10px 0;
  background: #3498db;
  text-shadow: 0 1px 1px #555;
  box-shadow: inset 0 -1px 5px rgba(255, 255, 255, 0.3);
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 3px solid #2980b9;
  border-radius: 5px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.counterCont span {
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  line-height: 50px;
  margin-left: 5px;
  padding: 0 10px;
  box-shadow: -2px 0px 7px rgba(0, 0, 0, 0.3);
  background: #efefef;
  color: #555;
  text-shadow: 0 1px 1px #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.counterCont span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  border-right: 7px solid #efefef;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-top: -7px;
  margin-right: -1px;
  height: 0;
  width: 0;
}

That all. I'm eager to see what you design. Also if you face any problem, write down your queries in comment section.
Happy Blogging.

Join the Conversation

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.

Comments so far on 'Download Counter Plugin'

  • 4 comments on Blogger
  • on Disqus
  1. tem como o contador conta só um clique? tipo por IP de cada pc?

    ReplyDelete
  2. tem como o contador contar apenas um clique por pc ou IP? sem clica varias vezes nele e ele contar?

    ReplyDelete
  3. Not Working.....in databases.....

    ReplyDelete

© 2016 Bloganalyzer. All rights Reserved. Designed By meNight Fury. DMCA.com Protection Status