Download counter : A Plugin for blogs!

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/AVvXsEhHHYkd_OUt2PdAsKRVoAXdwZzn1_uD9adlxAgcQ6nv0Cj96_7rXYabsfiM_XhW7Q-odBUlqPtlnwqr-ljQvwhyphenhyphen-PEC-yupuTEjvLpt3nEFMkfqnqAgl4mDZ4lhrCzLF5hYf0JG7Od-Pc4e/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.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

34 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. I an Wating for this trick long time.
    Thanks for Share

    ReplyDelete
  2. Nice Widget Mustafa Bro but Its not look like thats one which you applied on your download page. Mean you have applied another widget for download counter on your template page whenever some one download salahudin ayubi and some other things presents on your site which shows downloads counters. So how can we create thats widget because thats one seem professional. Thanks and hope for earlier reply.

    ReplyDelete
  3. My Second question is little off topic bro dont mind. i am also confused about this issue.

    Mustafa bro why did you not insert meta description for each post inside post editor. we have analyze your current posts and some previous posts written by qasim and Nida sister. they are also doing that same and have not inserted meta description for post.

    As in your earlier post you have advised to write a meta description for each post so thats your post become very friendly for search bots. So why did you not write a meta description ?

    ReplyDelete
  4. I will definitely gonna try it,

    ReplyDelete
  5. Nice share mustafa bro. You are awesome in this field. This is probably the reason why, We missed you a lot in your absense. I haven't tested it yet but will check it. Thanks again

    ReplyDelete
  6. This is awesome! Thanks for the wonderful efforts MBT~!!

    ReplyDelete
  7. You're awesome in widget creation. I love your work Mustaffa

    ReplyDelete
  8. This is reaLly a good after exam gift from you. I will implement this as soon as possible on my blog.
    But I av a question. The files to be downloaded, will it be save in the dtabase we created in the firebase? Thanks for sharing though

    ReplyDelete
  9. @Hafeez Khan
    I too have noticed many things that they advice us but don't apply them to their own blog. So its really indifferent.

    ReplyDelete
  10. Note: All comments with links were deleted.

    @rohit

    Oh I am pleased it was what you were looking for ;)

    @Hafeez
    1. Buddy for that you will simply need to insert an image instead of the text Download Now!

    Use this code instead of that download now text:
    <img src="Download Image Button" />

    That simple :)

    2. Well buddy I strongly emphasize on meta description for individual posts and Qasim and nida strongly follow it. sometimes they forget to add it but I often emphaize on permalinks and search description.

    As far I am concerned since I am engaged with many tasks therefore I blog latenight and publish it as soon as I am done with it. don't often get time to set the permalinks and meta description because I carefully set my keywords in posts and titles. I blog using windows live writer where these options are not avaialable you will firts publish post as draft and then set them in blogger which takes time. so I avoid it. But that is my laziness which you must not follow! :)

    @Ravi
    always welcomed ravi and please let me know once it works for you. You cna even customize the code and use download buttons as I guided hafeez :)

    @melaka
    My pleasure pal :)

    @gagan
    I love your kind feedback gagan. Thank you :)

    @Mathew
    No the files can be uploaded anywhere. the firebase will aonly save the numeric count values. :)


    @sangram
    Thank you sangram :)

    @Dr Adil
    I guess there is a misconception here buddy which I clarified to hafeez. Please never feel hesitate in asking questions. that's the only way you will get proper guidance.
    Almost every thing that I follow for my blogs I share it with my readers. :)

    ReplyDelete
  11. thank you very much Mohammad, good to see you back :D
    please make a customize css download and demo button, :)

    ReplyDelete
  12. @Dr Adil RamzanYes brother but now i got the answer from Mustafa Bhai. He cleared me everything.

    ReplyDelete
  13. Great but I think it is a bit to much for a non geeky guy like me,

    Muhammad Bhai when you are coming in Lahore for a seminar , I want to attend please tell kinldy. I am yoour huge fan ....

    ReplyDelete
  14. Nice tutorial! I'll try this to my blog. :)

    ReplyDelete
  15. Really nice one dude.
    you finally back!

    ReplyDelete
  16. @Deddia Permana

    Oh sure I would love to share that! :)


    @Muhammad Basit
    Just tell your university or college to invite us and we will be right at your doors! :)

    Buddy normally city-wide requires time but I have no obligation if I receive a warm welcome from any interested university. :)

    ---------------------------
    Happy to see all my friends back :)

    ReplyDelete
  17. @Mohammad Mustafa Ahmedzai

    thanks Mustafa bhai , I would be telling you soon , basically i am from a medical university, so any ideas how we can teach doctors about importance of blogging ;)

    i believe in getting fields interconnected

    i have sent you request on skype please add me, my skype ID
    dr.waqarakram


    thanks

    ReplyDelete
  18. thank you, This is really helpful.
    How about counting image views?

    ReplyDelete
  19. wow gr8 sharing...........keep it up.......

    ReplyDelete
  20. i follow u step but doesn't work at my blog.. what happen.. sad~

    ReplyDelete
    Replies
    1. post the div codes as a html code, not as a text

      Delete
  21. nice, now i can make- post view and download counter and site vies in just one post

    ReplyDelete
  22. i have added every thing and ( DOWNLOAD NOW) button too..the button working but downloads counting is not increasing ...this problem i am facing please help me any one............>. irfanzarrar@gmail.com

    ReplyDelete
  23. Hello, i have a problem when adding this inside a table. My download link and preview link are inside the table and when i put the code in between download and preview the table will not align properly. Please help. Here's an example.

    <table align="center">
    <tbody>
    <tr>
    <td><a class="download" href="#"></a></td><td><a class="livepreview" href="#"></a></td>
    </tr>
    </tbody></table>

    So where do i put the download counter codes?

    ReplyDelete
  24. Dear Mohammad, Can you please suggest how to integrate this code with new firebase account. Now above you suggest to add a new firebase account, but new code doesnt have this type of account.

    ReplyDelete
  25. What kind of template you have used here??? can I get this kind of awesome theme???

    Clipping Path

    ReplyDelete
  26. I can not put different links... It is always the same counter for each download... Thank you for your help. Can you tell me how to fix this problem? Thanks for Share... (Sorry for my english)

    ReplyDelete
  27. WHat if need to add sumthing more to the text.
    For Ex. "8 Dowmloads"
    Now it only shows "8"
    I need to add that "download" Word
    Please help

    ReplyDelete
  28. Hello, I want to statistics total downloads in month for my blog. How do it? This is mya blog: gtkt.blogspot.com. You go in my blog and comment

    ReplyDelete
  29. Thank you!
    And..
    Could you tell please how to get more than one single link working with its own counter?
    Thank you!

    ReplyDelete
  30. I had this working on a different template but now I can't get it to work on my new templet.

    ReplyDelete