--> Download counter : A Plugin for blogs! | Experience Lab - Online business creation and development guide for bloggers and startups

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 blog...

Download counter for blogsThis 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.

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.

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.

create firebase

  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.

compressed blogger stylesheet

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

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

.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNak619Di9cdcaNfXOIQjex4BjFZkTd_BLMLYWnzX1-0bs6potmSNvUWi12L72nVRJ6kRBiEsPyQOMIm3WyUJfjDQnUwS8ckcRFABj-YwMkALAgTZXTGTLIHe0k2s2PRBNYKlV-bnVLddw/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.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Download counter : A Plugin for blogs!
Download counter : A Plugin for blogs!
http://lh6.ggpht.com/-83X-Fj912ow/UZpxtoJhFXI/AAAAAAAAJt4/OVFu1ayFrfc/image%25255B6%25255D.png?imgmax=800
http://lh6.ggpht.com/-83X-Fj912ow/UZpxtoJhFXI/AAAAAAAAJt4/OVFu1ayFrfc/s72-c/image%25255B6%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2013/05/download-counter-plugin-for-blogs.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2013/05/download-counter-plugin-for-blogs.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy