Blogger - a downloadable file with a counter

I found several manuals how to add a downloadable file to a post in Blogger.com. I also wanted a download counter, so I was looking for, I was reading, I was thinking and finally I was successful. Lest I forget, this post is a manual. But maybe it could help to someone else. ;)

1. Upload a file to Google drive
How to upload the file I found for example here.

Uploaded and shared file EmptyFile.txt in my Google drive:
https://drive.google.com/file/d/0B3OQmf1aKWJAY0FyUXp3ZXZmRFU/view?usp=sharing

2. Create a long URL
According to these instructions I can create a long download URL:
https://docs.google.com/uc?export=download&id=FILE-ID-GOES-HERE

Created link:
https://docs.google.com/uc?export=download&id=0B3OQmf1aKWJAY0FyUXp3ZXZmRFU

3. Create a short URL
I use Google URL shortener to create a short URL. There are basic statistics for all created URLs, so I can see number of clicks for each added.

Created link:
http://goo.gl/T0T9FF

4. Get statistics from Google URL shortener
In URL Shortener API I found the Url: get method. I created a reguest with these parameters:
shortUrl => http://goo.gl/T0T9FF
projection => ANALYTICS_CLICKS
fields = analytics

Created request:
GET https://www.googleapis.com/urlshortener/v1/url?shortUrl=http%3A%2F%2Fgoo.gl%2FT0T9FF&projection=ANALYTICS_CLICKS&fields=analytics

For response click here.

5. Add HTML/Script gadgets
According to these instructions I wrote this code:

Select all

<script type='text/javascript'>
function appendResult(result) {
  var elementId = result.id.substring(result.id.lastIndexOf('/') + 1);
  document.getElementById(elementId).nextSibling.innerHTML = '&nbsp;(' + result.analytics.allTime.shortUrlClicks + 'x)';
}

function makeRequest() {
  var statElements = document.getElementsByClassName('downURL');  
  var request;
  var url; var newId;
  for (i = 0; i < statElements.length; i++) {
    url = statElements[i].getAttribute('href');
    newId = url.substring(url.lastIndexOf('/') + 1);
    statElements[i].setAttribute('id', newId);
    
    request = gapi.client.urlshortener.url.get({
      'shortUrl': statElements[i].getAttribute('href'),
      'projection': 'ANALYTICS_CLICKS'
    });
    request.then(
      function(response) {
        appendResult(response.result);
      },
      function(reason) {
        console.log('Error: ' + reason.result.error.message);
      }
    );
  }
}

function init() {
  gapi.client.setApiKey('AIzaSyDzaYpvBPdFs7T0_B2r2vnpEdHBCF9dy6M');  
  var statElements = document.getElementsByClassName('downURL');
  gapi.client.load('urlshortener', 'v1').then(makeRequest);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

Paste the code into a new HTML/Script gadget and insert it below the post body.

How to acquire an API key see here.

6. Insert a link into the post
Now insert the link with attribute class="downURL" somewhere into the post body:
<a href="FILE SHORT URL" class="downURL" target="_blank">SOME TEXT</a>
And finally insert <span></span> just behind. Here the script will write the result.

The code:

Select all

<a href="http://goo.gl/T0T9FF" class="downURL" target="_blank">EmptyFile.txt</a><span></span>

At the post: EmptyFile.txt

Done.

Tweet