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.
Signup with your google account for free and follow the steps provided by Firebase to activate your account.
Create 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 project as Bloganalyzer-demo) and hit CREATE PROJECT. Your database project name should be unique. Make sure you go through all terms and conditions before move on.
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>
- Sign in to Blogger account and go to Blogger dashboard.
- 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.
- Search for (Ctrl+F)
</head>and just before it, paste (Ctrl+V) those codes copied in step #2. - Search for (Ctrl+F)
</body>, copy (Ctrl+C) the following code and paste it (Ctrl+V) before</body>.
<!-- Download Counter by 4tech --> <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>
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>{$} 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 4tech-- */
.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 4tech -- */
.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.